Mint már említettük, a weboldal nem csupán egyetlen HTML dokumentumból áll. A HTML nyelvű dokumentum csupán a tartalmát és a szerkezetét írja le a weboldalnak. Emellett még szükség van a megjelenésének formai szabályait is megadni, amit tipográfiának szokás nevezni. Erre a célra szolgál a stíluslap, amelyet többféleképpen is hozzá lehet fűzni a weboldalhoz.
Mielőtt azonban a HTML dokumentum és a stíluslapok kapcsolatáról beszélnénk, célszerű megismerni, hogy a HTML milyen logikát követ a dokumentum szerkezetének leírásakor.
Az elemek zöme – gyakorlatilag minden olyan elem, amely valamilyen
megjelenítendő objektumot ír le – rendelkezik két paraméterrel: az
id és a
class paraméterrel. Ezek alkalmasak
az elemeknek a többi elemtől való megkülönböztetésére, és ellenkezőleg:
csoportosítására.
Az id paraméter egy olyan azonosítót rendel az elemhez, amelyben
szerepel, amely azonosító az egész HTML dokumentumban egyedi, azaz sem
ugyanilyen, sem más típusú elem nem rendelkezhet ezzel az azonosítóval. Ezzel
tehát egyértelműen meg lehet jelölni egy elemet.
Hogy ez mire jó? Egyrészt arra, hogy ha egy adott bekezdésnek vagy címnek, esetleg képnek egy minden többitől eltérő tipográfiát szeretnénk előírni, akkor a később ismertetendő módon a stíluslapon hivatkozni lehessen rá. Másrészt vannak egyéb felhasználásai is az egyedi azonosítóknak. Például a szintén később ismertetendő lehetőség, hogy egy képet több régióra osztva több hivatkozást helyezzünk el a képen, ehhez szintén egyedi azonosítóval kell összekapcsolni a képet, a felosztását definiáló térképpel. További felhasználása lehet a hivatkozásoknál, hogy lehet az azonosítóval ellátott elemhez ugorni a dokumentumban belső hivatkozás segítségével. Továbbá a weboldal további interaktivitását lehetővé tevő szkriptek is használhatják az azonosítót az elem elérésére.
Az egyes konkrét alkalmazások módját majd a megfelelő helyen fogjuk ismertetni.
Egy kivétel lehet az egyediség alól: ha egy elemnek több, különböző nyelvű változatát adjuk meg, akkor az egyes nyelvekhez tartozó elemek felvehetik ugyanazt az azonosítót, amit egy másik nyelvhez rendelt elem is felvett. Az ilyen nyelvi alternatívákra példa a szabványból átvett következő HTML részlet, ahol három üzenet szerepel angol illetve francia nyelvű változatban egy-egy egyedi azonosítóval. Az üzenetek ezenkívül logikailag osztályozva vannak.
A class paraméter ellenben egy csoporthoz rendeli az elemet,
amelyben szerepel. Minden egyes érték, amely korábban nem szerepelt ebben a
paraméterben, új csoportot hoz létre, míg egy már korábban szerepelt érték újabb
szerepeltetésével új elemet tehetünk a csoportba. Egy adott elem ráadásul több
csoportba is rendelhető, ha a paraméter értékeként, szóközzel elválasztva több
csoport nevét soroljuk fel.
Egy csoportba több elem is tartozhat, azonban elképzelhető az is, hogy ugyanazt a csoportnevet több, eltérő elemre is alkalmazzuk, és mégis minden esetben különböző csoportokat hoztunk létre. Ezt csupán a csoportnevek felhasználása határozza meg. Általában a stíluslapoknál szokás használni elemek egy csoportjára vonatkozó tipográfiai szabályok megadására.
Bizonyos elemek rendelkeznek a
name paraméterrel is, amely nagyon
hasonlóan használatos az id-hez, azonban a böngészők egy része nem
egyenrangúan kezeli őket. A két paraméret közül bármelyikkel hozunk létre egy
azonosítót, az a másik paraméterben sem használható már abban a
dokumentumban.
A megjelenítésre kerülő HTML elemeket két nagy csoportra lehet osztani a megjelenítés módja alapján. Ennek alapja a megjelenítés logikáját megadó doboz-modell. Ennek lényege a következő: Minden elem megjelenítése egy vagy több, téglalap alakú dobozon belül történik. Például egy bekezdést megadó P elem tartalma egy bekezdésdobozban jelenik meg, amelynek minden sora szintén egy belső doboznak tekinthető. A sorokat tartalmazó dobozok szélessége nem lehet nagyobb, mint az őket tartalmazó doboz szélessége.
Az egyes dobozokban tehát további dobozok lehetnek, amelyek általában nem nyúlhatnak ki az őket tartalmazó dobozból. Vannak esetek azonban, amikor egy szomszédos doboz belenyúlhat a másik dobozba, amely esetben az egyik doboz elfedheti a másik tartalmát.
Tulajdonképpen a böngésző az egyes elemek megjelenítéséhez szükséges hely meghatározásánál az elemekhez tartozó dobozokat veszi figyelembe. Így például a kép méretei alapján a képet tartalmazó doboz méreteit meghatározza, és ez alapján dönti el, hogy mekkora hely marad a kép mellett egyéb objektumok számára. A másik lehetőség, hogy egy doboz szélessége korlátozva van, és emiatt a bele kerülő objektumok szélessége korlátozásra kerül.
Vannak olyan elemek is, amelyekhez nam tartozik külön doboz, csupán a szöveg egy során belül néhány szóra vonatkoznak. Ilyen elem például a szöveg kiemelését lehetővé tevő EM, amely a bekezdésdobozon belül egy sor valamely részére vonatkozik. Ezeknek az elemeknek a tartalma abba a dobozba kerül, amely az elemet is tartalmazza. Ha egy ilyen elem a tördelésnél nem férne el egy sorba, akkor a következő sorban folytatódhat. Az ilyen elemeket – jobb magyar elnevezés híján – nevezzük sorbeli elemeknek, míg azokat az elemeket, amelyekhez tartozik doboz, blokk-elemeknek szokás nevezni. Az eredeti angol kifejezés ezekre inline-element illetve block-element.
Természetesen a sorbeli elemekhez is rendelhető doboz, amely azonban része a sort létrehozó belső doboznak. Így egy sorbeli elemnek is lehet kerete. Ez a keret azonban elég érdekesen nézhet ki, ha az elem tartalma nem fér el egy sorban, és átlóg a következő sor elejére.
Hogy egy adott elem melyik kategóriába tartozik, azt a weboldal megtervezése és tipográfiája szempontjából fontos tudni, hiszen ez alapján lehet megtervezni a dokumentum megjelenését. A BODY elem doboza egyébként az a doboz, amelybe a dokumentum összes többi doboza kerül. Ennek a doboznak a mérete általában nem egyezik meg a képernyőn látható ablak méretével, hanem szükség esetén azon túl is nyúlhat. Nyomtatás esetén a doboz mérete azonban megegyezik az oldal méreteivel, de ekkor is előfordulhat, hogy valamelyik beillesztett doboz mérete ezt meghaladja.
A későbbiekben, a stíluslapok kapcsán még visszatérünk erre a kérdésre, mivel a weboldal formájának meghatározásánál nagy jelentősége van a doboz-modellnek.
Ehhez kapcsolódik két elem, amelyek segítségével gyakorlatilag bármilyen formázást létre lehet hozni blokk, avagy sorbeli elemre. Ezek az elemek a SPAN, amely egy sorbeli elem, amelynek alapértelmezett megjelenése ugyanaz, mint azé az elemé, amely őt tartalmazza; valamint a DIV, amely egy blokk elem, külön formázási tulajdonságok nélkül. Mindkettő arra alkalmas, hogy a stíluslapon a megjelenését befolyásoló tulajdonságokat rendeljünk hozzá. Ezzel lehet például a szöveg színét megváltoztatni a SPAN elembe helyezve a szöveget, vagy néhány bekezdést egy közös keretben elhelyezni, ha a DIV elembe tesszük a bekezdéseket, és a DIV elemnek keretet állítunk be.
A későbbiekben még mindkét elem többféle használatára lesz példa.
Következő: Stíluslapok