Minden 1989 egy csodálatos napján kezdődött, amikor is Tim Berners-Lee a genfi CERN laboratóriumban üldögélve váratlanul feltalálta a világhálót (nem az internetet, hanem a World Wide Webet, WWW), és hogy arra tartalmat is tehessünk, azaz weboldalakat hozhassunk létre, rögtön megalkotta hozzá a HTML (HyperText Markup Language) jelölőnyelvet.
Tageződjünk!
A HTML nyelv tulajdonképpen egy jól meghatározott jelölőelem-készlet; a jelölőelemeket hívjuk idegen szóval tagnek (ejtsd: teg), és ezekből mint építőkockákból építhetjük fel weboldalainkat. Íme, egy egyszerű példa:
‹a href=”www.pcworld.hu”›Kattints ide!‹/a›
Az angol anchor (horgony) szóból származó ‹a› tag példánkban a Kattints ide szövegből állít elő (hiper)hivatkozást a PC World weboldalára. Figyeljük meg, hogy a tag egy kisebb jellel kezdődik, ezután következik a neve, utána jönnek a jellemzői, tulajdonságai – idegen szóval attribútumai – (href), majd egy nagyobb jellel záródik. A legtöbb tagnek van egy úgynevezett lezáró párja, amely nagyon hasonlóan épül fel: kisebb-nagyobb jelek között találjuk a tag nevét, előtte pedig egy perjelet, esetünkben: ‹/a›. Maguk a tagek természetesen nem jelennek meg a weboldalon, a fenti esetben a nyitó és záró elem közötti szöveg, a Kattints ide! fog megjelenni hivatkozásként – ha erre rákattintunk, a href attribútumban megadott címre, azaz a PC World weboldalára jutunk.
A tag anatómiája: 1. kisebb jellel kezdődik; 2. a tag neve; 3. a href attribútum 4. az attribútum értéke idézőjelek között; 5. nagyobb jellel záródik; 6. a megjelenő tartalmi rész, amire a tag hatással van; 7. a zárótag: kisebb-nagyobb jelek között perjel + a tag neve
Út az XHTML-ig
A 90-es évek során a HTML szabványosítására és továbbfejlesztésére létrejött a World Wide Web Consortium (röviden: W3C), majd ezt követően számos verzió látott napvilágot. Az utolsó, a HTML 4.01, 1999 óta van velünk.
Addigra azonban a weboldalkészítés már több sebből vérzett: az internetet ellepték a hibáktól hemzsegő pocsék weboldalak, aminek hátterében az akkoriban használt vizuális szerkesztőprogramok (FrontPage, khm) csapnivaló tudása, no meg az oldalak készítőinek hozzá nem értése és/vagy trehánysága állt. A helyzetet tovább rontotta, hogy az uralkodó Internet Explorer, ahelyett hogy felhívta volna ezekre a hibákra a figyelmet, inkább megpróbálta kitalálni, mit is szerettek volna a készítők csinálni, így sok esetben akkor is jól nézett ki az oldal, ha rossz volt alatta a kód. Nem csoda, ha mindenki nagy ívben tett arra, hogy mik a szabályok, vagy mit hogyan kéne használni.
A W3C egyszerre két dolgot tartott szem előtt a HTML következő verziójának tervezésekor. Száműzni akarta az összes megjelenésre, dizájnra vonatkozó jelölőelemet a nyelvből, hogy azt végre arra használják, amire való: az oldal struktúrájának leírására. Továbbá szigorúbb szabályokat akart bevezetni a nyelv használatát illetően. Utóbbira épp kapóra jött az akkorra már rendkívül népszerűvé vált XML (eXtensible Markup Language). Ez egy adatstruktúrák leírására kitalált speciális jelölőnyelv, amely nem határoz meg konkrét jelölőelem-készletet; a dokumentumok készítői saját maguk találhatják ki a használni kívánt tageket. Meghatároz viszont rendkívül szigorú formai szabályokat arra vonatkozóan, hogy egy XML dokumentumnak hogyan kell felépülnie és kinéznie, és a legkisebb hibát sem tűri el. A HTML és az XML erősségeinek összegyúrásából jött létre 2000-ben az XHTML 1.0.
XHTML testközelben
Az előző alkalommal már nézegettük a CSS Zen Garden című oldalt; most nyissuk ezt meg újra a Firefoxban (www.csszengarden.com), majd válasszuk ki a Nézet menü Oldal forrás menüpontját (gyorsbillentyűje a ‹Control›+‹U›). A forráskód egy új ablakban nyílik meg. Nézzük, hogy épül fel egy szabványkövető, jól formázott XHTML-dokumentum!
A CSS Zen Garden forráskódjának eleje: a legelső két sorban látható a DTD, alatta az oldal fejléce (‹head› ... ‹/head›), benne a metaadatok, az oldal címe, valamint a külső stíluslap behívása
- A DTD
A dokumentum elején az úgynevezett dokumentumtípus-meghatározást találjuk (Document Type Definition, DTD). Ez azonosítja az oldal leírásához használt nyelvet, annak verzióját és változatát, azaz pontosan meghatározza, hogy milyen jelölőelemeket használhatunk és milyen szabályok szerint. A Zen Garden esetében ez az XHTML 1.0 Strict – ennek jelentésével majd legközelebb részletesebben foglalkozunk, most elégedjünk meg azzal, hogy ez az XHTML 1.0 legszigorúbb változata. A DTD másik nagyon fontos szerepe, hogy a különböző böngészőket szabványkövető üzemmódba kényszerítse (tudnának működni másképp is, na, az még a tragédia). A lényeg, hogy a DTD rendkívül fontos eleme az oldalnak, úgyhogy rögtön jegyezzük is fel első szabályként, hogy weboldalunk mindig DTD-vel kezdődik.
- ‹html› ... ‹/html›
Közvetlenül a DTD után a ‹html› tag nyitja meg az oldalt, majd a legvégén a ‹/html› zárótag zárja – ez szintén alapszabály. Látható, hogy ebben az esetben a nyitótag két attribútumot tartalmaz: az xmlns az úgynevezett névteret, az xml:lang az oldal tartalmi részének nyelvét definiálja. A névtér-definíciónak főleg az XML-dokumentumokban van jelentősége, itt csupán azt nyilatkozzuk ki az XML „nyelvén”, hogy az oldalban az XHTML jelölőnyelvet fogjuk használni.
- ‹head› ... ‹/head›
Egy XHTML oldal alapvetően két részből áll: a fejlécből és a törzsből. A fejlécet a ‹head› és a ‹/head› tagek közötti részben definiáljuk. Bár maga a fejléc nem látható a böngészőben, mégis az itt megadott információk miatt rendkívül fontos szerepe van az oldal megjelenését és „utóéletét” illetően. A Zen Garden fejléce épp ezekkel az információkkal, az úgynevezett metaadatok definiálásával kezdődik. Az angolul tudók számára egyértelmű, hogy az author az oldal készítőjének nevét (Dave Shea), a description az oldal rövid szöveges leírását tartalmazza. A keywords pedig olyan kulcsszavakat, amelyek alapján az internetes keresők – például a Google – megtalálhatják oldalunkat.
Szintén a fejlécében definiáljuk az oldal címét, amely az XHTML-oldalak esetében kötelező elem! Erre való a ‹title› ... ‹/title› tagpár. A cím nemcsak a böngésző ablakának tetején látható, de ez kerül fel a Kedvencek listájára is, ha valaki elmenti oda oldalunkat, valamint erre is külön figyelmet fordítanak a különböző keresők.
A 12. sorban arra láthatunk példát, hogy lehet megjegyzéseket elhelyezni egy weboldalon. A megjegyzést a böngésző teljesen figyelmen kívül hagyja, nem jeleníti meg, ennélfogva csak azok számára hordoz értékes információt, akik az oldal forráskódjával foglalkoznak. A 15–17. sor egy külső stíluslapot csatol az oldalhoz. A stíluslap felel az oldal kinézetéért, dizánjáért, ezzel majd később, a CSS tárgyalásánál részletesen foglalkozunk.
- ‹body› ... ‹/body›
Az oldal tényleges, látható részét a ‹body› és ‹/body› tagek fogják közre. Mielőtt elmerülnénk a részletekben, görgessünk rajta végig, és gyönyörködjünk benne! Nagyon szépen formázott, ebből adódóan könnyen áttekinthető és érthető, jól olvasható forráskóddal van dolgunk; saját oldalaink készítésénél is mindig törekedjünk arra, hogy annak forrása hasonlóan nézzen ki.
A kódban a két leggyakrabban előforduló elem a ‹div› és a párja, a ‹/div› tag. Neve a sokjelentésű angol division szóból származik; ebben az esetben szakaszt vagy részt jelent, az XHML-ben pedig a dokumentum főbb strukturális részeinek kijelölésére használjuk. Figyeljük meg, hogy mindegyiknek van egy teljesen egyedi azonosítója, amelyet az id attribútum ír le; ennek fontos szerepe lesz majd a stíluslapok használatakor.
A képen az oldal nagy részét magába foglaló container ‹div› látható
A legfontosabb strukturális elem a container ‹div›, amely majdnem az egész oldalt magában foglalja. Ezt három további részre osztják az intro, a supporintText és a linkList ‹div›-ek. A forráskódban ezek a beágyazott elemek az őket tartalmazó container elemhez képest beljebb kezdődnek, így lesz áttekinthető és jól olvasható a forrás, amely egyben tükrözi is az oldal struktúráját.
Az előző containert részletező intro, supportingText és linkList ‹div›-ek: balra ezek elhelyezkedése az oldalban, jobbra pedig a forráskódban
A beágyazott elemekkel mindig a befoglaló elemet részletezzük: a container önmagában még csak egy üres doboz, amelyről megtudjuk, hogy valójában egy bevezető részből (intro), egy szöveges részből (supportingText), valamint egy hivatkozásgyűjteményből (linkList) áll. Önmagukban még ezek sem mondanak sokat, de aztán következik az intro kifejtése. Ez szintén három további részre (‹div›-re) tagolódik (pageHeader, quickSummary, preamble), míg végül eljutunk az oldal konkrét tartalmi részeihez: a címekhez és alcímekhez (‹h1›, ‹h2›, ‹h3›), valamint a bekezdésekből álló hosszabb szövegekhez (‹p›).
Lépjünk vissza a Firefox ablakába, és kapcsoljuk be a múltkor telepített Web Developer kiegészítőt (Nézet –› Eszköztárak –› Web Developer Toolbar). Az eszköztáron található Resize menüből válasszuk ki a 800 menüpontot, majd ha monitorunk mérete engedi, húzzuk kicsit lejjebb a böngésző alját, hogy több látsszon az oldalból, de a szélességén ne változtassunk. Ezután kapcsoljuk be az Information menüben a Display Div Order funkciót. A Firefox pirossal bekeretezi az oldalt alkotó egyes ‹div›-eket, és a keret bal felső sarkában sárga háttéren megjeleníti az azonosítójukat is (a mellettük látható szám azt jelöli, hogy ez hányadik ‹div› a forrásban – nincs jelentősége). Hasonlítsuk össze ezt a forrással, találjuk meg azonosítójuk alapján az azonos részeket az oldalon és a forrásban, próbáljuk meg ez alapján megérteni, átlátni, hogyan épül fel az oldal. Nézzük meg ugyanezt kikapcsolt CSS-sel is (CSS –› Disable Styles –› All Styles).
A Web Developer Firefox kiegészítő Information -› Display Div Order funkciója megjeleníti az oldalt felépítő ‹div›-eket
‹mára› vége! ‹/mára›
A következő hónapban folytatjuk az XHML nyelv bemutatását: megismerjük a különböző változatait, a rá vonatkozó szabályokat, és végül az is kiderül majd, hogy miért van a nyelv halálra ítélve. Akkor is érdemes lesz velünk tartani!
