Kinézet és tartalom - Miért van szükség a stíluslapokra?

1994-ben belátták az ehhez értők, hogy szükség van egy olyan szervezetre, amelyik felügyeli és fejleszti a HTML nyelvet. Ugyanis azelőtt nem létezett ilyen, és nem is volt egyetértés a szabványban. Ezért 1994-ben megalakult a World Wide Web Consortium (rövidítve: W3C), ez a világhálóra vonatkozó szabványi előírások létrehozásával és közzétételével foglalkozó szervezet, amely a www.w3.org címen érhető el. (A webes szabványokkal foglalkozik még a Web Standards Project is.)

Egy W3C szabvány a következő szakaszokon megy keresztül: Working Draft (munkavázlat), Last Call Working Draft (utolsó hívás), Candidate Recommendation (jelölt ajánlás) és Proposed Recommendation (tervezett ajánlás). A végső szakasz a W3C Recommendation, azaz ajánlás szakasz, amikor már teljesen kész van egy szabvány, és a W3C „éles” használatra ajánlja. Az is előfordul, hogy a W3C egy ajánlást visszaminősít munkavázlattá, vagy egy már meglévő ajánlás újabb változatát adja ki. Egy szabvány elavulttá is válhat, ha többé már nem ajánla a W3C használatra.

A HTML verziói

Verzió	Melyik évben vált ajánlássá?	Jelenlegi státusz
HTML 2.0	1995. november	Elavult
HTML 3.2	1997. január	Elavult
HTML 4.0	1997. december	Elavult
HTML 4.01	1999. december	Ajánlás
HTML 5	-	Munkavázlat

A W3C 1997 januárjában nyilvánította ajánlássá a HTML 3.2-t. Azonban az a koncepció, amit ez a nyelv követett, hibás volt! Ugyanis egyetlen dokumentumban kellett leírni a tartalmat és a kinézetet is. A tartalom itt egy weboldal alapstruktúráját és a rajta található szöveget jelenti. A tartalmat írjuk le akkor, amikor azt mondjuk, hogy ez egy táblázat, ez egy címsor, ez egy lista, ez egy bekezdés. A kinézet pedig a tartalom formázása: színek, keretek, betűtípusok, vastag és dőlt betűk, háttérszínek. Hogy egy szemléletesebb példát mondjak: a tartalom leírását jelenti, amikor egy táblázatot készítünk, és csak azt mondjuk meg, hány sora és oszlopa legyen. A formázást pedig az jelenti, amikor megadjuk a táblázat szegélyének vastagságát és színét, a benne lévő szöveg igazítását és színét stb.

Az alább látható első példában csak a tartalmat hoztuk létre a HTML kóddal. Annyit mondtunk, hogy legyen az oldalon egy főcím, alcím, bekezdés, lista, még egy bekezdés, benne egy linkkel, és végül egy kép. Így néz ki:

A weboldal, amin csak tartalmi elemek vannak.

Ebben a második példában pedig az előbbi weboldalt formáztuk stíluslappal: színeket, háttérszínt, betűstílust, szegélyt állítottunk be:

És így néz ki ugyanez a weboldal, amit stíluslappal formáztunk.

A tartalmat és a kinézetet jobb két külön fájlban leírni és tárolni, nem pedig ugyanabban a fájlban! A következő példa rávilágít arra, hogy miért.

Tegyük fel, hogy van egy honlapunk, ami 400 weboldalból áll. (A honlap nem más, mint összetartozó weboldalak együttese, amik között linkekkel tudunk átjárni. A weboldal pedig az, amit a böngészőnk ablakában látunk.) Ennek a 400 weboldalas honlapunknak egységes kinézete van. A főcímek kékkel, középre igazítva és bekeretezve jelennek meg, az alcímek pirossal és balra igazítva; a bekezdéseken belüli sortáv másfeles, és egy bizonyos betűtípust használnak stb... és még sorolhatnánk, milyen stílusú a weboldalak megjelenése.

Mivel mind a tartalmat, mind a kinézetet ugyanabba a fájlba kell írnunk, ezért ugyanazt a kinézetet kell írnunk mind a 400 weboldalunk kódjába, hiszen mi egységes megjelenést akarunk. Ezt a megoldást ez az ábra szemlélteti, ahol egy téglalap magát a weboldal HTML kódját jelenti:

Ez a megoldás legalább két komoly problémát is okoz:

1. Nagyon nehéz módosítani a kinézeten. Ha egy jellemzőt módosítunk, akkor mind a 400 weboldal kódjában át kell írnunk a módosított jellemzőt, ami drága és sokáig tart.
2. Amikor letöltjük az Internetről ezeket a weboldalakat, akkor elég lenne mindig csak a tartalmat letölteni, hiszen a kinézet egységes, ehelyett a böngészőnek a kinézetre vonatkozó információkat is mindig le kell töltenie. Ezzel feleslegesen használjuk a sávszélességet, és több időbe kerül, amíg letöltődik egy weboldalt.

Ezért a W3C kidolgozta a stíluslapokat CSS, angolul Cascading Style Sheets, azaz rangsorolt stíluslapok néven. A stíluslapok koncepciója, hogy a tartalmat teljesen külön kell választani a kinézettől. A tartalmat a HTML nyelv írja le, a kinézetet pedig a CSS. Egy stíluslap is egy szöveget tartalmazó fájl, csak neki .css a kiterjesztése. Külön fájlban kell megírnunk a HTML kódot, ami a tartalmat struktúrálja, és külön fájlban a CSS kódot, ami a formázást végzi. Ezután egyszerűen összekötjük a stíluslapot a weboldalakkal, megmondjuk, hogy melyik weboldalhoz melyik stíluslap tartozik.

Jelenleg a CSS 1 és a CSS 2 ajánlás, a CSS 2.1 és a CSS 3.0 verziókon még dolgoznak. Mi a CSS 2.1-et fogjuk használni, ez a 2-höz képest hibajavításokat tartalmaz, a rosszul támogatott funkciókat kivették belőle és a böngészők által széles körben támogatott új funkciókat belevették.

A CSS verziói

Verzió	Utolsó módosítás	Jelenlegi státusz
CSS 1	1999. január	Ajánlás
CSS 2	1998. május	Ajánlás
CSS 2.1	2007. július	Jelölt ajánlás
CSS 3	folyamatosan dolgoznak rajta	Munkavázlat

Ezzel a fenti ábránk a következőképpen módosul:

Ez a megoldás legalább két előnyt jelent, amik pontosan a fenti hátrányok ellentétei:

1. Nagyon könnyű módosítani mind a 400, vagy tetszőleges számú weboldal kinézetén, egyszerűen átírjuk a stíluslapban a változtatni kívánt jellemzőt.
2. A HTML kód kisebbé és áttekinthetőbbé válik. A böngészőnek csak a tartalmat kell letöltenie, a stíluslapot egyszer letölti, eltárolja a gyorsítótárban, majd alkalmazza az összes letöltött weboldalra.

A kinézet és a tartalom szétválasztása megengedi azt is, hogy egy weboldalra számtalan különböző stílust alkalmazzunk. Egyszer megírjuk a weboldal HTML kódját, aztán később akármilyen stílust rendelhetünk hozzá a HTML kód megváltoztatása nélkül. Azaz nem egy stílust alkalmazunk több weboldalra, hanem több stílust külön egy weboldalra:

Egy bemutató, hogy mit lehet vizuálisan elérni CSS alapú kinézettel: CSS Zen Garden. Itt 986-féle különböző stíluslap áll rendelkezésre ugyanahhoz a weboldalhoz, és mi dönthetjük el, hogy melyiket társítsuk hozzá. Bárki küldhet be stíluslapot ehhez az oldalhoz, de az oldal HTML kódját nem módosíthatja. A jobb oldali menüből lehet stílust váltani. Bár úgy tűnhet, hogy stílusváltáskor egy másik weboldalra jutottunk, ha jobban megfigyeljük, a szöveg mindig ugyanaz (és a HTML kód is), csak a kinézet tér el teljesen a stíluslapoknak köszönhetően.

Ennek mintájára én is készítettem egy egyszerűbb példát a stíluslapok működésének szemléltetésére.

Szabványkövető mód (standards mode) és kompatibilitási mód (quirks mode)

1997-ben jelent meg a Netscape Navigator 4 és az Internet Explorer 4. Ezek a ma már ősrégi böngészők nem a W3C szabványának megfelelően értelmezték a CSS-t, hanem ettől kisebb-nagyobb mértékben eltérően, a saját szájízük szerint. Mivel akkoriban ez a két böngésző volt messze a legelterjedtebb, ezért a weboldalakat úgy kellett megírni, hogy működjenek ezekben a böngészőkben is.

Azonban az újabb böngészők (Firefox, Safari, Opera (7 és újabb), Internet Explorer 6 és 7, Mac IE 5, és Konqueror (3.2 és újabb)) már jobban támogatták a W3C szabványt, ezért szükség volt arra, hogy a böngészők ezentúl kétféle módon értelmezzék a stíluslapokat. Ugyanis meg kellett tudniuk jeleníteni a Netscape Navigator 4 és az Internet Explorer 4 böngészőkre optimalizált RÉGI weboldalakat, ÉS a W3C szabványát betartó ÚJ weboldalakat is.

Kompatiblilitási módnak (quirks mode) nevezzük az a módot, amelyben a böngésző nem teljesen a W3C szabványa szerint értelmezi a CSS-t, hanem emulálja a Netscape Navigator 4 és az Internet Explorer 4 hibáit, hogy az ezekre a böngészőkre megírt weboldalak úgy jelenjenek meg, mintha ténylegesen ezekkel a régi böngészőkkel néznénk őket.

Szabványkövető módnak (standards mode) nevezzük azt a módot, amelyben a böngésző a W3C szabványának megfelelően értelmezi a CSS-t. A két mód között lényeges különbségek vannak, ezért nekünk úgy kell megírnunk a honlapunkat, hogy a modern böngészők szabványkövető módban (standards mode) értelmezzék azt.

De honnan tudja a böngésző, hogy melyik mód szerint kellene megjeleníteni egy weboldalt? Az előző leckében láttuk, hogy HTML oldalunkat így kezdtük, rögtön a legelső sorban:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ezt nevezzük DTD-nek (Document Type Definition, dokumentumtípus meghatározás vagy doctype). A doctype két fontos célt szolgál:

• Ha használjuk a weboldal elején, akkor a böngésző szabványkövető módban fogja megjeleníteni a weboldalunkat. Ha nem használjuk, akkor viszont kompatibilitási módban, amit el kell kerülnünk.
• A W3C ellenőrző eszköze, a HTML és CSS validator csak akkor fogadja el érvényesnek weboldalainkat, ha az elejükön használtunk doctype-ot.

Tehát a doctype használatával elkerüljük a kompatibilitási módot, ez pedig azért fontos, mert a szabványkövető mód és a kompatibilitási mód között lényeges különbségek vannak. Lássunk egy példát! A most következő mindkét linket nyissuk meg Internet Explorerrel!

Weboldal szabványkövető módban

Weboldal kompatibilitási módban

Ha tényleg IE böngészővel nézzük az oldalakat, akkor láthatjuk, hogy a két négyzet különböző méretű. Pedig a stíluslap, ami a négyzet méretét állítja be, ugyanaz a két weboldalhoz! A különbség a következő: a szabványkövető weboldalnál megadtuk a helyes doctype-ot, a másiknál viszont nem adtunk meg semmilyen doctype-ot. És mivel, ha nincsen doctype, akkor az IE kompatibilitási módra vált, és ekkor másképpen értelmezi a szélességet.

Fontos még megjegyezni, hogy ma már senki sem használja a Netscape Navigator 4 és az Internet Explorer 4 böngészőket, tehát nem kell arra törekednünk, hogy ezekben a böngészőkben jól jelenjen meg a honlapunk.

Tehát a tanulságok:

• A két megjelenítési mód között különbség van.
• Mindig használjunk helyes doctype-ot!

Használható doctype-ok

A HTML nyelvben jelenleg 3 doctype-ot használhatunk.

Transitional

Átmeneti dokumentumtípus. A stíluslapok feladata, hogy szétválasszák a kinézetet a tartalomtól, a stíluslapban kell leírni a kinézetet, és a HTML oldalon pedig csak a tartalomnak kell szerepelnie. Az átmeneti dokumentumtípust már meglévő, régebbi weboldalakon használják (néha újakon is, helytelenül). Ezeken a régebbi weboldalakon még nem különítették el teljesen a tartalmat a kinézettől, azaz HTML 3.2-ben bevezetett prezentációs címkéket használnak, amik azonban teljesen kiválthatóak lennének stíluslapokkal. Ezt az alábbi ábrával lehetne szemléltetni (a HTML kód még tartalmaz prezentációs címkéket, de már egyes formázásokat stíluslappal végzünk):

Ez a dokumentumtípus azért átmeneti, mert átmenet ebből az állapotból a tartalom és a kinézet szétválasztása felé. Új honlap készítésekor ne használjuk ezt a típust!

Ha mégis használjuk, akkor a következőket kell beírni a dokumentum legelső sorába. (Az egész egy sor, csak esetleg nem fér ki egy sorba.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/DTD/loose.dtd">

Frameset

Keretes dokumentumtípus. Kereteket (frame) akkor kell használnunk, amikor azt akarjuk, hogy az aktuális böngészőablakban egynél több weboldal is megjelenjen egyszerre. Például ha azt szeretnénk, hogy a böngészőben ne csak egy, hanem egyszerre három weboldal legyen látható, akkor négy weboldalra lesz szükségünk. Az egyik weboldal csak annyit tesz, hogy felosztja a böngészőablak megjelenítésre használt területét három részre. Ennek a felosztó weboldalnak kell kapnia a keretes dokumentumtípus-meghatározást. A másik három fájl pedig a megjeleníteni kívánt három weboldal.

Ez a példa megmutatja, hogyan néz ki egy keretes weboldal.

Ez megint egy olyan doctype, amit nem ajánlott használni, és nincs is elterjedve a weben. Ugyanis a kereteket használó weboldalak nem jól használhatók. Többek között nem fog bennük a szokásos módon működni a böngésző „vissza” gombja, és a könyvjelzők közé sem a szokásos módon lehet eltenni egy ilyen weboldalt. A keresők sem szeretik. (A példák szemléltetésekor azonban használni fogok kereteket, mert a határolóvonalak húzogathatóak az egérrel, így növelhető/csökkenthető a HTML kód és az eredménye megjelenítéséhez szükséges terület, továbbá a felsorolt hátrányok nem jelentkeznek ebben az esetben.)

Ha mégis használjuk, akkor így néz ki:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/DTD/frameset.dtd">

Strict

Szigorú dokumentumtípus. Ezt ajánlott használni. A „szigorúság” azt jelenti, hogy a Transitionallal ellentétben itt nem engedélyezett semmilyen prezentációra vonatkozó jelölőelem a HTML kódban, minden formázást stíluslappal kell megadni.

Ez a szigorúság azonban csak az előnyünkre válhat, ezt már kifejtettük az előbb. Új weboldal készítésekor mindenképpen ezt ajánlott használni. Ez a honlap és a példák is ezt használják. Az összes többi dokumentumtípus csak a régi idők kedvéért létezik, a jövőben egyre kevesebb honlap fogja használni őket remélhetőleg.

A javasolt doctype tehát a HTML 4.01 Strict, ami így néz ki:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Az XHTML-ről

Weboldalunkat nemcsak HTML, hanem XHTML nyelven is megírhatjuk. Az XHTML az angol Extensible HyperText Markup Language kifejezés rövidítése. Magyarul bővíthető hyperszöveges leírónyelv. Az XHTML nem más, mint a HTML XML alapokra helyezve.

Az XML az Extensible Markup Language rövidítése, magyarul bővíthető leíró nyelv, ezt is a W3C szervezet dolgozta ki. Egy XML dokumentum nagyon hasonlít egy HTML dokumentumra. Elég annyit tudni, hogy az XML célja az internetes információcsere támogatása, egy egységes, platformfüggetlen módot biztosít az információ leírására, tárolására és továbbítására. A HTML csak a weboldalakra vonatkozó információkat tudja leírni, az XML viszont szinte mindennel kapcsolatos információt.

A W3C-nél felismerték, hogy jó lenne a HTML-t is felruházni az XML jó tulajdonságaival, így született meg 2000-ben az XHTML 1.0.

Az XHTML verziói

Verzió	Utolsó módosítás	Jelenlegi státusz
XHTML 1.0	2002. augusztus	Ajánlás
XHTML 1.1	2007. február	Munkavázlat
XHTML 2.0	folyamatosan dolgoznak rajta	Munkavázlat

Ajánlott linkek

A W3C angol nyelvű honlapja: http://www.w3.org/

W3C Magyar Iroda: http://www.w3c.hu/

A webes szabványok fejlesztéséért és elfogadtatásáért küzdő szervezet: http://www.webstandards.org/

A HTML 4.01 hivatalos specifikációja (a szabvány leírása): http://www.w3.org/TR/html401/

A CSS 2.1 hivatalos specifikációja: http://www.w3.org/TR/CSS21/

CSS Zen Garden: http://www.csszengarden.com/tr/magyar/

Vigyázat az XHTML-lel! (1) http://www.webdevout.net/articles/beware-of-xhtml

Vigyázat az XHTML-lel! (2) http://www.hixie.ch/advocacy/xhtml