A WWW és a HTML ismerete fontos, illetve a weblapkészítés alapjainak ismerete.
Az XHTML 1.0-s verziója 2000. január 26-án lett W3C ajánlás, az 1.1-es pedig 2001. május 31-én.
Egy W3C ajánlás azt jelenti, hogy a specifikáció stabil, a W3C tagsága átnézte, és a specifikáció mostanra már a világháló egy szabványa lett.
Az XHTML a HTML és az XML (eXtensible Markup Language) ötvözése.
Az XTHML (1.0) tartalmazza a HTML 4.01 összes elemét az XML szintaktikájával (írásmódával).
Mostanra elérte az Világháló azt a pontot, amikor nagyon sok weboldal tartalmaz "rossz", hibás HTML "kódot".
A következő kód jól jelenik meg a böngészőben, bár nem követi a HTML szabványt:
<html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML </body> |
Az XML egy olyan jelölő nyelv, melyben minden pontosan definiált és egyértelmű, így egy "jól formázott" dokumentumot kapunk.
Az XML adatok tárolására terveztetett, a HTML meg adatok megjelenítésére.
A mai piac tág, sokféle böngésző létezik, ezek egy része asztali vagy mobil számítógépeken fut, mások mobiltelefonon, vagy PDA-n (tenyérszámítógépen) futnak. Utóbbiaknak nincs elég erőforrásuk, hogy a hibás HTML oldalakat értelmezhessék.
Így a HTML és az XML-t és erősségüket ötvözve egy olyan jelölő nyelvet kapunk, amelyik ma is használható, és a jövőben is az lesz - az XHTML-t.
Az XHTML-t olvass egy egy XML-t ismerő eszköz, ÉS amíg a világ többi része nem frissít XML-t támogató böngészőre, addig az XHTML megadja a lehetőséget "jólformázott" dokumentumok készítésére most is, melyek működnek az összes böngészővel, és visszafele kompatibilisak!!!
Könnyen felkészülhetsz az XHTML-re, ha szigorú HTML-t írsz (3 html fajta van).
Az XHTML a HTML következő generációja, azonban beletelik valamennyi időbe, amíg a böngészők és egyéb szoftverek felkészülnek rá.
Néhány dolgot megtehetzs a felkészüléshez. Ahogy ebből az anyagból láthatod majd, az XHTML nem nagyon különbözik a HTML 4.01-től, tehát a dokuementum HTML 4.01 szabványnak megfelelő alakra hozása egy jó kezdés.
Továbbá már MOST el kell kezdened kisbetűs HTML címkéket használnod, és SOHA nem engedni ama rossz szokásnak, hogy lehagyd a záró címkéket, pl a </p>-t.
Kellemes kódolást!
A HTML-ben helytelenül fel lehet cserélni elemeket, pl így:
<b><i>This text is bold and italic</b></i> |
XHTML-ben ezeknek muszály helyes sorrendben szerepelniük:
<b><i>This text is bold and italic</i></b> |
Megjegyzés: egy gyakori hiba egymásba ágyazott listák esetén az, hogy elfeljtik a belső listát li elembe tenni, valahogy így
<ul>
<li>Kávé</li>
<li>Tea
<ul>
<li>Fekete tea</li>
<li>Zöld tea</li>
</ul>
<li>Tej</li>
</ul>
|
Ugyanez helyesen:
<ul>
<li>Kávé</li>
<li>Tea
<ul>
<li>Fekete tea</li>
<li>Zöld tea</li>
</ul>
</li>
<li>Tej</li>
</ul>
|
Figyeljük meg, hogy egy </li> címkét tettünk a </ul> címke után a "helyes" kódban.
Minden XHTML elemnek a <html> gyökérelemben kell lennie. Minden egyéb elemnek lehet al (gyerek) eleme. Az al-elemeknek párokban kell lenniük és helyesen ágyazódniuk a szölő elembe. Az alap dokumentumstruktúra az alábbi:
<html> <head> ... </head> <body> ... </body> </html> |
Ez azért van, mert az XHTML egy XML alkalmazás. Az XML megkülönbözteti a kis-és nagybetűket. Az olyan címkék, mint például a <br> és a <br> különböző címkékként értelmezettek.
Tehát a következő példa hibás.
<BODY> <P>Ez egy bekezdés</P> </BODY> |
Ez helyes:
<body> <p>Ez egy bekezdés</p> </body> |
Minden nemüres elemnek rendelkeznie kell lezáró elemmel is.
Hibás:
<p>Ez egy bekezdés <p>Ez egy másik bekezdés |
Helyes:
<p>Ez egy bekezdés</p> <p>Ez egy másik bekezdés</p> |
Az üres elemek után is lennie kell lezáró elemnek, vagy pedig a nyitó
elemnek a követekzővel kell végződnie: />.
Hibás:
Ez egy sortörés<br> Itt van egy vízszintes vonal:<hr> Itt pedig egy kép: <img src="happy.gif" alt="Happy face"> |
Helyes:
Ez egy sortérés<br /> Itt van egy vízszintes vonal:<hr /> Itt pedig egy kép: <img src="happy.gif" alt="Happy face" /> |
FONTOS Kompatibilitási megjegyzés:
Ahhoz, hogy az XHTML oldalad kompatibilis legyen a mai böngészőkkel, egy extra szóközt kell betenned a "/" szimbólum előtt, ehhez hasonlóan: <br />, és ehhez: <hr />.
XHTML írás tiszta, helyes HTML kódot igényel
Hibás:
<table WIDTH="100%"> |
Helyes:
<table width="100%"> |
Hibás:
<dl compact> <input checked> <input readonly> <input disabled> <option selected> <frame noresize> |
Helyes
<dl compact="compact"> <input checked="checked" /> <input readonly="readonly" /> <input disabled="disabled" /> <option selected="selected" /> <frame noresize="noresize" /> |
Itt egy lista a rövidített attribútumokról HTML-ben, s hogy hogyan kell szerepelniük XHML-ben. A harmadik oszlop azt mondja meg, hogy mely XHTML változatokban lehet használni az adott attribútumot:
| HTML | XHTML | HTML 4.01 Strict / XHTML 1.0 Strict / XHTML 1.1 |
|---|---|---|
| compact | compact="compact" | Nem |
| checked | checked="checked" | Igen |
| declare | declare="declare" | Igen |
| readonly | readonly="readonly" | Igen |
| disabled | disabled="disabled" | Igen |
| selected | selected="selected" | Igen |
| defer | defer="defer" | Nem |
| ismap | ismap="ismap" | Igen |
| nohref | nohref="nohref" | Igen |
| noshade | noshade="noshade" | Nem |
| nowrap | nowrap="nowrap" | Nem |
| multiple | multiple="multiple" | Igen |
| noresize | noresize="noresize" | XHTML 1.0 Frameset, XHTML 1.1, HTML 4.01 Frameset |
HTML 4.01 egy "name" attribútumot definiál az alábbi címkékhez: applet, frame, iframe, img, és map. XHTML 1.0-ban a "name" attribútum elavult, XHTML 1.1-ben nem létezik. Használjuk helyette az "id"-t.
Hibás:
<img src="picture.gif" name="picture1" /> |
Helyes:
<img src="picture.gif" id="picture1" /> |
Megjegyzés: A régebbi böngészők miatt egy ideig érdemes az "id" és a "name" attribútumot együttesen használni, azonos névvel, ilyen formában:
<img src="picture.gif" id="picture1" name="picture1" /> |
FONTOS kompatibilitási megjegjegyzés:
Hogy az XHTML oldal biztosan menjen minden (mai) webböngészővel, egy extra szóközte kell hagyni a "/" karakter előtt.
A lang attribútum alkalmazható szinte minden XHTML elemben. Az elem tartalmának nyelvét tartalmazza.
Ha egy elemben szerepel a lang attirbótum, xml:lang attribútumnak is ott kell lennie. Példa erre:
<div lang="no" xml:lang="no">Heia Norge!</div> |
Megjegyzés: a lang attribútum nem létezik az XHTML 1.1-ben, helyette az xml:lang attribúmot lehet használni.
Minden XHTML dokumentumnak rendelkeznie kell egy DOCTYPE meghatározással. A html, head és body elemeknek jelen kell lenniük, továbbá a title-nek is lennie kell a head elemben.
Ez a minimális XHTML dokumentum sablon:
<!DOCTYPE Doctype ide kerül> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A cím helye</title> </head> <body> A törzs szövegének helye </body> </html> |
Megjegyzés: A DOCTYPE deklaráció nem része magának az XHTML dukumentumnak. Nem egy XHTML elem, és nem lehet lezáró címkéje.
Megjegyzés: Az xmlns attribútum a html elemen belül kötelező XHTML-ben. Ennek ellenére a validator.w3.org-on található ellenőrző nem jelzi ennek hiányát az XHTML dokumentumban. Ennek oka az, hogy az "xmlns=http://www.w3.org/1999/xhtml" egy rögzített érték, és akkor is hozzáadódik a <html> címkéhez, ha az nem tartalmazza.
Az XHTML dokumentumtípus leírásáról a következő fejezetben lesz szó.
Az XHTML 1.0 szabvány 3 dokumentumtípus-definíciót határoz meg, az XHTML 1.1 pedig egyet.
A leggyakoribb az XHTML 1.0 Transitional.
Egy XHTML dokumentum 3 fő részből áll:
Az alapvető dokumentumstruktúra az alábbi:
<!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html> |
A DOCTYPE deklatáció mindig az XHTML dukumentum első sorában kell lennie (vagy ott kezdpdnie).
Ez egy egyszerű (minimális) XHTML dokumentum:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>egyzerű dokumentum</title> </head> <body> <p>Egy egyszerú bekezdés</p> </body> </html> |
A DOCTYPE deklaráció meghatározza a dokumentum típusát:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
A dokumentum további része HTML-szerűen néz ki:
<html> <head> <title>egyzerű dokumentum</title> </head> <body> <p>Egy egyszerű bekezdés</p> </body> </html> |
Jelenleg 3 XHTML 1.0 és egy XHTML 1.1 dokumentumtípus van:
Az XHTML 1.0 három XML dokumetumtípust határoz meg, melyekd három DTD-nek felenek meg: Strict, Transitional, és Frameset. Az XHTML 1.1 viszont csak egyet.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
Akkor használd, ha igazán tiszta jelölést akarsz, mellőzve minden megjelenítési zűrt. Használd együtt a Cascading Style Sheet-tel (stíluslapokkal).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Ezt akkor használd, ha szükséged van a HTML megjelenítési tulajdonságaira, s ha olyan böngészőket is támogatni akarsz, mely nem támogat stíluslapokat.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
Ezt akkor használd, ha HTML kereteket (frames) akarsz használni, hogy több keretre bontsd a böngésző ablakát.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
Ez a legújabb változata az XHTML nyelvnek. Az XHTML 1.0 Strict továbbfejlesztése (moduláris változata), amely már egyáltalán nem togatja a HTML Frame-k használatát.
Fordította: Tóth László Attila (panther@elte.hu)
| |
Erededeti, angol változat: http://www.w3schools.org/xhtml/.