Weblap Visszalép Egyszerűen div szakasz

Weblapunk tartalmából, a monitort nézők előtt csak azon dokumentumok, fotók jelennek meg, melyeket a body nevű szakaszban helyezünk el, azaz a kezdő <body> címke és a záró body </body> címke között helyezkedik el. Ez alól kivételek a megjegyzéseink, melyeket megjegyzés jelek között helyezünk el, akkor ezek nem jelennek meg a monitoron.

Div szakaszok felépülésének egyszerű ismertetése.
Minden div szakaszt, egyedi azonosítóval kell ellátni.
Az azonosítók egy szóból állnak és kis betűvel ékezet nélkül írjuk.
A div szakaszoknak mindenki tetszés szerinti elnevezést, azaz azonosítót írhat.

Egyetlen egy div szakasz

Elkészítünk egy darab div szakaszt.
Készítsünk elő egy írógéppapírt, melynek mérete A3-as
Ezért, géppapírunk elnevezése, azaz azonosítója A3 helyett, aharmas lesz.
Az írógéppapír bal felső sarkába, írjuk be a kezdő div címkét és azonosítóját:
<div id="aharmas">

Az írógéppapír jobb alsó sarkába írjuk be a záró div címkét:
</div>

Elkészítettük az első, egyetlen egy div szakaszunkat.
A kezdő és a záró div címkék közé, annyi címsort és bekezdést írhatunk be, amennyi a dokumentumunk megírásához szükségeltetik.

Példa:
Kezdjük a kezdő div címkével, és ha végeztünk a dokumentumunk megírásával, akkor zárjuk a záró div címkével

<div id="aharmas">
<h1> Írjuk ide a fő címsort. Ez gyakorlatban a könyvek borítóján olvasható </h1>
<h2> Írjuk ide dokumentumunk első fejezetének címsorát </h2>
<p> Ezen kezdő p címke után írjuk be dokumentumunk első bekezdését. Ha végeztünk zárjuk le a záró p címkével </p>
<p> Ez egy újabb bekezdés kezdő p címkéje, ide írjuk a dokumentumunk második bekezdését. Ha befejeztük, zárjuk le ezt is a záró p címkével. </p>

<h2> Írjuk ide a következő fejezet címsorát </h2>
<p> Ezen kezdő p címke után írjuk be a következő fejezet első bekezdését. Ha végeztünk zárjuk le a záró p címkével </p>
<p> Ez egy újabb bekezdés kezdő p címkéje, ide írjuk a második bekezdését. Ha befejeztük, zárjuk le ezt is a záró p címkével. </p>
</div>

Vissza a lap elejére

Div szakasz a div szakaszban

Elkészítjük első div szakaszunkat.
Készítsünk elő egy írógéppapírt, melynek mérete A3-as
Ezért, géppapírunk elnevezése, azaz azonosítója A3 helyett, aharmas lesz.
Az írógéppapír bal felső sarkába, írjuk be a kezdő div címkét és azonosítóját:
<div id="aharmas">
Az írógéppapír jobb alsó sarkába írjuk be a záró div címkét:
</div>
Elkészítettük az első div szakaszunkat.

Elkészítjük a második div szakaszunkat.
Felezzünk meg egy írógéppapírt és vágjuk félbe, melynek mérete A4-es lesz, és a gyakorlás végett az oldalából is vágjunk le egy-két cm-t
A géppapírunk elnevezése, azaz azonosítója A4 helyett, anegyes lesz.
Az írógéppapír bal felső sarkába, írjuk be a kezdő div címkét és azonosítóját:
<div id="anegyes">
Az írógéppapír jobb alsó sarkába írjuk be a záró div címkét:
</div>
Elkészítettük a második div szakaszunkat.

Elkészítjük a harmadik div szakaszunkat.
Felezzünk meg az A4-es írógéppapírt és vágjuk félbe, melynek mérete A5-es lesz, és a gyakorlás végett az oldalából is vágjunk le egy-két cm-t
A géppapírunk elnevezése, azaz azonosítója A5 helyett, aotos lesz.
Az írógéppapír bal felső sarkába, írjuk be a kezdő div címkét és azonosítóját:
<div id="aotos">
Az írógéppapír jobb alsó sarkába írjuk be a záró div címkét:
</div>
Elkészítettük a harmadik div szakaszunkat.

A papírméreteket változtathatnánk a végtelenségig, mely mindegyik különálló div szakasz is lehetne.
Most, ezzel a három papírmérettel gyakorlunk.
1./ A3-as aharmas <div id="aharmas> </div>
2./ A4-es anegyes <div id="anegyes"> </div>
3./ A5-ös aotos. <div id="aotos"> </div>

Helyezzük egymásra a lapjainkat.

Egymásra helyezés

XHTML lapon így írjuk le
<div id="aharmas"> A3-as lapunk kezdő div címkéje
<div id="anegyes"> A4-es lapunk kezdő div címkéje
<div id="aotos"> A5-ös lapunk kezdő div címkéje
</div> A5-ös lapunk záró div címkéje
</div> A4-es lapunk záró div címkéje
</div> A3-as lapunk záró div címkéje

Helyezzük egymásra lapjainkat úgy, hogy a négyes és ötös külön legyen

Egymásra helyezés

XHTML lapon így írjuk le
<div id="aharmas"> A3-as lapunk kezdő div címkéje
<div id="anegyes"> A4-es lapunk kezdő div címkéje
</div> A4-es lapunk záró div címkéje
<div id="aotos"> A5-ös lapunk kezdő div címkéje
</div> A5-ös lapunk záró div címkéje
</div> A3-as lapunk záró div címkéje

Minden div szakaszban a kezdő és a záró div címkék közé, annyi címsort és bekezdést írhatunk be, amennyi a dokumentumunk megírásához szükségeltetik. Valamint képeket is elhelyezhetünk.

Ha egy div szakaszban nem helyezünk el se szöveget se képet, akkor az a weblapunkon nem jelenik meg, mondhatnánk semmi értelme.

A div szakasz szélességét width, mindig meg kell adni.
A szélességi értéket CSS, azaz stíluslapon határozzuk meg, ezen meghatározásokat a div szakaszra jellemző azonosítók után kapcsos zárojelek közé írjuk.
Az azonosítók elé, kettős keresztet ( # ) kell beírni.

Példa a CSS, azaz stíluslapon történő megírásra:
#aharmas {width: 600px;}
#anegyes {width: 300px;}
#aotos {width: 150px;}

A szélesség értelmezése:
Az A3-as szélességi méretének, 600 képpont értéket határoztunk meg. Ebben az esetben függetlenül a monitorunk szélességétől, amikor a dokumentumunk szövegsorainak hossza eléri a 600 px méretet, a további szövegsor új sorban kezdődik.
Az A4-es szélességi méretének, 300 képpont értéket határoztunk meg. Ebben az esetben függetlenül a monitorunk szélességétől, amikor a dokumentumunk szövegsorainak hossza eléri a 300 px méretet, a további szövegsor új sorban kezdődik.
Az A5-ös szélességi méretének, 150 képpont értéket határoztunk meg. Ebben az esetben függetlenül a monitorunk szélességétől, amikor a dokumentumunk szövegsorainak hossza eléri a 150 px méretet, a további szövegsor új sorban kezdődik.

Ajánlott legnagyobb szélesség:
A weblapunk készítésekor nem tudhatjuk, hogy az elkészült weblapunkat nézők, milyen széles monitoron olvassák weblapunk tartalmát.
A kényelmes olvasáshoz áttekintéshez az elfogadott legnagyobb szélességnek a 800px méretet ajánlják.
Az én legkisebb monitorom szélessége is 800px, de a 800px méretből az oldalsó görgetősáv 25 - 30 px méretet elfoglal. Ennek következtében, csak azon weblapokat tudom egyben áttekinteni, és kényelmesen olvasni, melyek szélessége nem több 770px méretnél

Összegezve:
Saját tapasztalatom, hogy a legnagyobb, azaz a 770px szélességű div szakasz (weblap) a legoptimálisabb, illetve az ennél kisebb div szakaszok.

Vissza a lap elejére

Mikor id és mikor class.

A div szakaszok azonosítóját, mikor írjuk id jellemző és mikor class osztályazonosító után.
Az id jellemző után, azon div szakaszokat, melyek egyedi tulajdonsággal rendelkeznek, azaz a többi div szakasztól elkülönülnek megjelenési formájukban.
A class osztályazonosító után, ugyan azon névvel, azaz azonosítóval több div szakasz is rendelkezhet.

Kérdezhetnénk, mi ennek az értelme?

Példa:
Készítünk egy több ezer oldalas dokumentumot, mely tartalmaz egy borítót, kezdő címsort, tartalomjegyzéket, lábjegyzetet, tartalom: alfejezeteket és azok címsorát, megjegyzéseket, idézeteket, bemutató példákat, stb.

A dokumentumunk megjelenésében egyedi tulajdonsággal rendelkeznek, a dokumentum többi részétől elkülönülnek, egyszer szerepelnek és hivatkozásokat is, tartalmaznak a következő részek.

Ezen részek div szakaszának azonosítóját, id jellemző után adjuk meg.

Idáig öt egyedi és elkülönülő div szakaszunk van

A dokumentumunk megjelenésében egyedi tulajdonsággal rendelkeznek, de többször is szerepelnek a következő részek.
Ezen részek div szakaszának azonosítóját, class osztályazonosító után adjuk meg.

Összesen: 1005 div szakasz

Az első öt div szakasznak könnyen kitalálhatunk egyedi azonosítót, azaz elnevezést.
A második részben 1000 div szakasz található, hogy mindegyiknek külön azonosítót találjunk ki, a végére már bele is őszülnénk. Nem beszélve arról mi lenne, ha minden egyes div szakasz kezdő címkéjében kellene megírni, az arra jellemző meghatározásokat.

Ennek megkönnyítése érdekébe, készítünk egy XHTML fájlt és egy CSS fájlt.
Az XHTML - lapunkon elkészítünk négy div szakaszt, melynek azonosítóját id jellemző után adjuk meg, és négy div szakaszt melynek azonosítóját class osztályazonosító után adjuk meg.
A CSS fájlunkban meghatározzuk ezen div szakaszok megjelenési formáját
Ezen CSS fájl könnyíti meg munkánkat azzal, hogy a div szakaszokra jellemző meghatározásokat egyetlen egyszer kell leírni, és nem ezerszer.
Valamint ha meggondoljuk magunkat és más meghatározást akarunk írni valamelyik div szakaszra /Pl: megjegyzések/ akkor elég egyetlen egy meghatározási sort módosítani és nem kell 200-szor leírni

Div szakaszok leírása:
Id jellemző után megadott azonosítóval rendelkező div szakaszok

<div id="container"> </div> Ez a borító div szakasza
<div id="fejlec"> </div> A címsor és annak háttérképét tartalmazó div szakasz
<div id="tartalomjegyzek"> </div>A tartalomjegyzék div szakasza
<div id="tartalom"> </div> Ebben a div szakaszban helyezkednek el:
alfejezetek, megjegyzések, idézetek, bemutatók
<div id="labjegyzet"> </div> A lábjegyzet div szakasza

A class osztályazonosító után megadott azonosítóval rendelkező div szakaszok

<div class="alfejezet"> </div> Alfejezetek div szakasza
<div class="megjegyzes"> </div> Megjegyzések div szakasza
<div class="idezet"> </div>Idézetek div szakasza
<div class="bemutato"> </div>Bemutatók div szakasza

A div szakaszokat rendezzük el a weblapunknak megfelelően
Div szakaszok megírása XHTML - lapon:

<div id="container"> Ez a könyv eleje, kezdő borító, azaz kezdő div címkéje
<div id="fejlec"> </div>A címsor és annak háttérképét tartalmazó div szakasz
<div id="tartalomjegyzek"> </div> A tartalomjegyzék div szakasza
<div id="tartalom"> Tartalom div szakasz kezdő div címkéje
<div class="alfejezet"> Első alfejezet div szakaszának kezdő div címkéje
<div class="megjegyzes"> </div> Megjegyzés div szakasza
<div class="idezet"> </div> Idézet div szakasza
<div class="bemutato"> </div> Bemutató div szakasza
</div> Első alfejezet div szakaszának záró div címkéje
<div class="alfejezet">Második alfejezet div szakaszának kezdő div címkéje
<div class="megjegyzes"> </div> Megjegyzés div szakasza
<div class="idezet"> </div> Idézet div szakasza
<div class="bemutato"> </div> Bemutató div szakasza
</div> Második alfejezet div szakaszának záró div címkéje
</div> Tartalom div szakasz záró div címkéje
<div id="labjegyzet"> </div> A lábjegyzet div szakasza
</div> Ez a könyv vége, hátsó borítója, azaz záró div címkéje

Elkészítettük weblapunk div szakaszait.

Kezdhetjük feltölteni a div szakaszokat, a rájuk jellemző tartalommal, és képekkel
Az alfejezet azonosítóval rendelkező div szakaszt, mely magába foglalja a megjegyzés, idézet, bemutató div szakaszokat is, jelen példában kétszer írtam be egymást követően az XHTML lapunkon, és nem 100-szor a helyfoglalás miatt.
A megjegyzés, idézet, bemutató div szakaszokat tetszés szerint felcserélhetjük, és csak azon div szakaszt alkalmazzuk e három közül, melyikre éppen szükségünk van, és annyiszor amennyire szükségünk van.

Weblapunk formázásához, készítsük el a CSS, azaz stíluslapunkat
Megjegyzés:
Stíluslapon azon div szakaszazonosítók elé, melyek id jellemző után lettek megadva, kettős keresztet kell beírni, azon div szakaszazonosítók elé, melyek class osztályazonosító után lettek megadva, pontot kell beírni.

Példa a meghatározások megírására, melyektől mindenki tetszése szerint eltérhet
#container { width: 770px; margin-top: 5px; margin-right: auto; margin-left: auto; }
#fejlec { width: 770px;}
#tartalomjegyzek { width: 470px; margin-left: 150px;}
#tartalom { width: 750px; margin-left: 10px;}
# labjegyzet {clear: both; font-size: 80%; color: #999; margin-top: 4em; }
.alfejezet { width: 770px;}
.megjegyzes { width: 650px; margin-left: 50px;}
.idezet { width: 600px; margin-left: 70px;}
.bemutato { width: 700px; margin-left: 20px;}

További stílus meghatározásokat a tartalom témaköreiben leírtakból meríthetünk.

Vissza a lap elejére