Weboldalkészítő suli #3 - Építőkockák és egyéb okosságok

Sorozatunk 3. részében folytatjuk az ismerkedést az XHTML nyelvvel, további tagek (címkék) használatát sajátítjuk el és, szembesülünk az XHTML szigorú szabályaival.

Kategóriák: Internet, Technológia, Programozás

Szerző: Spányik Balázs

2008. június 27.

Mielőtt folytatnánk kedvenc weboldalunk, a CSS Zen Garden tanulmányozását, térjünk vissza egy rövid időre a sorozat előkészítő részében már pedzegetett weboldalrétegekhez. Miről is van szó?

(X)HTML kontra XHTML

A cikk során felváltva használjuk az (X)HTML és az XHTML kifejezéseket. Az előbbi arra utal, hogy az ott leírtak egyaránt vonatkozhatnak a HTML és XHTML nyelvre, míg az utóbbi esetben hangsúlyozni kívánjuk, hogy csak az XHTML nyelvről van szó.

RÉTEGES FELÉPÍTÉS

Bár első ránézésre ez nem egyértelmű, a mai modern (X)HTML-alapú weboldalak különböző, egymásra épülő rétegekből állnak. A legalsó a tartalmi réteg, amely az (X)HTML elemekkel leírt dokumentumstruktúrát és az oldal tartalmi elemeit (szövegek, képek stb.) foglalja magába, és semmilyen formázást vagy más tervezési elemet nem tartalmaz! Azt, hogy az oldal hogyan fog festeni, a CSS-stíluslapokkal leírt megjelenés réteg határozza meg. A stíluslapok tartalmazzák az oldal dizájnját, pontosan leírják, hogy a tartalmi rétegben definiált oldalstruktúra egyes részei, elemei hol és hogyan jelenjenek meg a böngészőben. Bár maga a CSS is lehetőséget kínál a különböző formázásokra (például hogy egy hivatkozás hogyan jelenjen meg önmagában, és hogyan változzon meg, ha rámutatunk az egérrel), de valójában a harmadik, viselkedés réteg az, amelyik a JavaScript programnyelven keresztül lehetővé teszi, hogy az egyes oldalelemekhez különböző eseményeket társítsunk, és rendelkezzünk afelől, hogy mi történjen, amikor ezek az események bekövetkeznek.

Az XHTML réteg hordozza a tartalmat és az oldalstruktúrát, a CSS réteg írja le dizájnt, ketten alkotják a CSS Zen Garden főoldalának kinézetét

A három réteg három teljesen eltérő technológiára épül - a tartalmi az (X)HTML-re; a megjelenés a CSS-re; a viselkedés a JavaScriptre -, és ideális esetben teljesen elkülöníthetők egymástól. Némi egyeztetés után akár három különböző személy egymástól teljesen függetlenül is dolgozhat ugyanazon a weboldalon: a szerző létrehozza az oldal tartalmát, felépíti annak struktúráját; a tervező megalkotja az oldal dizájnját, megjelenését; és ha szükséges, a programozó gondoskodik az események és aktív oldalelemek működéséről. A valóságban ezek a munkakörök általában nem, vagy nem így különülnek el: a tartalom előállítására a szerző - jó esetben - valamilyen szövegszerkesztőt használ; a tervező egy grafikus alkalmazásban álmodja meg az oldal küllemét; végül mi egy személyben leszünk az, aki a tartalmat struktúrába önti, a képként megkapott dizájnt stíluslapra alakítja át, és megírja a szükséges JavaScript kódot.

Ugyanakkor az is könnyen belátható, hogy az egyes rétegek szorosan egymásra épülnek abban a tekintetben, hogy nincs semmi értelme a megjelenítési rétegnek, ha nincs alatta az a tartalom, amelynek a kinézetéről gondoskodnia kéne. És bár írogathatunk olyan JavaScript programokat, amelyek elfutnak önmagukban is, a viselkedés réteget jelentő programkódnak is pontosan ismernie kell, hogy milyen strukturális és tartalmi elemek alkotják az oldalt, amelyet vezérelhet, illetve adott esetben azt is, hogy ezekhez milyen megjelenítési lehetőségek társulnak a stíluslapon.