A mészköves hegyoldal.
Most, egy olyan html - lapot (weblapot) láthatunk, ahol a címsorban, egy háttérkép is el van helyezve, a hivatkozások bal oldalt függőlegesen egymás alatt, a dokumentumunk pedig a jobb oldalon, úgymond körbefolyja a képet.
A mészköves hegyoldal, képmérete: 250 X 170 képpont méretű.
Az általad készített képek esetén, ezektől a képméretektől, tetszés szerint eltérhetsz, mind vízszintesen, mind függőlegesen.
A négy hivatkozás, azaz navigáció, segít az itt látottak részletesebb megismerésében.
Ha szükséged van rájuk, akkor az XHTML - lapon, a kezdő < a > címkébe írd be, hogy melyik XHTML - lapra szeretnél eljutni, ha rákattintasz az egérrel. A szöveg helyére pedig azt, hogy milyen elnevezés jelenjen meg a monitoron.
Például: XHTML - lap címsorában lévő elnevezést, azaz hova jutunk, ha az egérrel rákattintunk a szövegre.
Ha a weblapodon, nincs szükség a hivatkozásokra.
Töröld ki az XHTML - lapon a következő teljes div szakaszt, a kezdő és záró div meghatározást a tartalmával együtt.
Kezdő div : < div id = " nav " >
Záró div : < / div >
Ezt a példát láthatod ezen az oldalon is, ahól a hivatkozások nem látszanak.
Megírás: XHTML - lapon. H18. kép,
A tartalom témaköreit, két részre osztottuk, azaz két div szakaszt hoztunk létre.
Mindegyik div szakasz neve tartalom, de az első tartalom nevű div szakasz azonosítója, azaz neve id jellemzőhöz van rendelve, míg a másik tartalom nevű div szakasz azonosítója, azaz neve class osztályazonosítóhoz van rendelve.
Így a két azonosító név ugyan egyforma, mégis mindegyiket más stílussal ruházhatjuk fel, a CSS, azaz stíluslapon általunk megadott meghatározásokkal.
Mért kell kettő div szakasz:
Első, mely a képet is tartalmazza, jobb oldalon helyezkedik el, a hivatkozások miatt.
Ezért az első div szakaszt, jobbra kellett eltolni 15em távolságra, a monitor bal szélétől.
Az ide írt dokumentumunk teljes tartalma, azaz minden mondata, a monitor bal szélétől 15em távolságra fog kezdődni.
De mi azt szeretnénk, hogy a hivatkozások által elfoglalt területet követően, minden további dokumentumunk tartalmát alkotó mondatok, vagy képek a monitor bal szélén kezdődjenek, akkor készíteni kell egy másik div szakaszt.
A második div szakasz bal oldali margóját kisebbre vesszük, maximum 2em értékre, de inkább vegyük kisebbre 0.5em vagy 1em értékre, így a dokumentumunk további tartalma a monitor bal szélén kezdődik.
Az első div szakasz képet is tartalmaz. A kép megjelenítéséhez szükséges meghatározásokat, a szemléltető ábrán zöld színnel kiemelve láthatjuk. H 18. kép.
< img src = " h_oldal250x170.jpg " : Képmegjelenítési utasítás, mely feketével kiemelve tartalmazza a képünk elnevezését és kiterjesztését ( jpg ).
alt = " A mészköves hegyoldal." : Amennyiben a képünk nem jelenne meg a monitoron, akkor a feketével kiemelt szöveg jelenik meg helyette.
width = " 250 " : A képünk szélességét kell megadni képpont méretben.
height = " 170 " : A képünk magasságát kell megadni képpont méretben.
class = " kep " : A képünkhöz, tetszés szerinti egyedi azonosítót, azaz elnevezést rendelhetünk. Képünkhöz a stíluslapon, ezen azonosítóhoz tetszés szerinti meghatározásokat rendelhetünk.
Például: Meghatározhatjuk, hogy a képünket körülvevő szöveg, a kép szélétől milyen távol legyen.
/ > : A képbehívó meghatározások lezárása.
Első div szakasz tartalma, a kezdő < p > címke és a záró < /p > címke között helyezkedik el.
Magába foglalja a képbehívó meghatározásokat és a szöveget is.
Ha megfigyeljük, a képbehívó meghatározások közvetlen a kezdő p címke után helyezkednek el, és ezt követi dokumentumunk szöveges tartalma.
A képbehívó meghatározásokat, nem kötelező közvetlen a kezdő p címke után megadni. Megtehetjük, hogy a dokumentumunk szöveges részében, valamelyik mondatunk után helyezzük el. Így a képet, nem csak oldalról veszi körbe a szöveg, hanem fölötte is megjelenik szövegünk.
Második div szakasz azonosítóját, azaz nevét a class osztályazonosítóhoz rendeljük, ezért lehet a neve ugyanaz, mint az első div szakaszé. ( tartalom )
A második div szakaszban is, a kezdő < p > címke és záró < /p > címke közé írjuk, a dokumentumunk tartalmának folytatását.
Megjegyzést, lásd a lap alján.
Kép: H - 18.
<div id="tartalom">
<h3>A mészköves hegyoldal.</h3>
<p>
<img src="hegyoldal.jpg" alt="A mészköves hegyoldal." width="250" height="170" class="kep" />
Most, egy olyan html - lapot (weblapot) láthatunk, ahol a címsorban, ...............................
</p>
</div>
<div class="tartalom">
<p> Tartalom második része ........................................... </p>
</div>
Megírás: CSS, azaz stíluslapon CSS 18. kép.
Stíluslapon:
- Kettős keresztet ( # ) kell beírni, minden olyan azonosító elé, melyet az XHTML -lapunkon id jellemzőhöz rendeltünk.
- Pontot ( . ) kell beírni, minden olyan azonosító elé, melyet az XHTML -lapunkon class osztályazonosítóhoz rendeltünk.
Első div szakasz elhelyezkedésére a meghatározásokat a #tartalom azonosító után adjuk meg.
Képet körülvevő szövegre a meghatározást, a #tartalom img azonosító után adjuk meg.
float: Jelentése csúsztatás. Ezt követöen adjuk meg, hogy a kép a szövegünkön belül hól jelenjen meg. ( left balra, right jobbra. )
.kep : Képhez rendelt azonosító.
Ezt követően meghatározzuk a kép jobb ( right ) oldalán lévő belső margót ( 5px ), majd megjelenítünk egy 2px vastag vonalat a kép jobb oldalán.
A belső margó szerepe, hogy a vonal milyen messze legyen a képtől.
Ha a képünket körbe akarjuk keretezni, akkor a következő meghatározásokat kell megadni:
.kep {padding: 5px; border: 2px solid black;}
Második div szakaszra vonatkozó meghatározásokat, a .tartalom azonosító után adjuk meg.
Megjegyzés:
1. Egy adott weblapon, ha több olyan div szakaszt is elhelyezünk, melyeknek azonosítóját id jellemzőhöz rendeljük, akkor minden id jellemzőhöz más és más azonosítót, azaz nevet kell adnunk.
2. Egy adott weblapon, ha több olyan div szakaszt is elhelyezünk, melyeknek azonosítóját class osztályazonosítóhoz rendeljük, akkor ugyan azon nevet, azaz azonosítót további div szakaszoknak is megadhatunk.