PortálPortál

HTML vagy XHTML?

Sok helyen (pl. tananyagfejlesztési pályázatoknál) már nem HTML, hanem  XHTML formátumban várják a webes dokumentumokat. Cikkünkben összefoglaljuk, mi a különbség az HTML és XHTML nyelv között, és a konverzióra is mutatunk példát.

Bevezető

Miért van szükség a váltásra? Az igen kedvelt  HTML (HyperText Markup Language) szabványt sok kritika éri amiatt, hogy  a tartalmi jelölésre szolgáló elemek mellett nagyon sok formai, a megjelenítést meghatározó elemet tartalmaz, így erősen összemosódik a tartalom és annak megjelenése.

A HTML 4.0 szabványban ezért sok (a korábbi verziókban előszeretettel használt) elemet érvénytelenítettek, és a megjelenésre, design-célra a stíluslapok (CSS) használatát javasolták.  A HTML egyik nagy hátrányát azonban ez a szabvány sem tudta megváltoztatni, továbbra is egy statikus, előre definiált elemeket és paramétereket tartalmazó jelölő nyelv maradt.

Ezt a szabványkészítők természetesen nem hagyhatták annyiban, így megalkották az XHTML szabványt.

Az XHTML

De mi az az X az XHTML-ben? A válasz: eXtensible vagyis kiterjeszthető. Az XHTML családba tartozó dokumentumtípusok XML alapúak, azonban hagyományos (HTML 4.0 szabványt ismerő) böngészővel is olvashatók maradnak, ha betartunk néhány egyszerű szabályt. A közeljövőben várhatóan az XML alapú böngészőprogramok fognak elterjedni, amelyek természetesen ezt a fajta dokumentumot gond nélkül olvasni fogják.

XHTML-előnyök

  1. Az XHTML dokumentumok XML alapúak, könnyen áttekinthetők, szerkeszthetők, érvényesíthetők (validálhatók) standard XML eszközökkel. A validálás lényegében annyit jelent, hogy ellenőrizzük, hogy a dokumentum tartalma megfelel-e a nyelv szabályainak (sémájának). Ha igen, akkor a dokumentumra azt mondjuk, hogy valid.

    Ilyen ellenőrző programot találhatunk a weben is, pl.: http://validator.w3.org/ . Ez a HTML kiértékelő ellenőrzi a dokumentum helyességét az abban deklarált dokumentumtípusnak (DOCTYPE) megfelelően. (A DOCTYPE jelentőségére később részletesebben kitérünk.)
     
  2. Az XHTML oldalak a HTML 4.0 szabványt támogató szerkesztőprogramokkal is szerkeszthetők
     
  3. Az XHTML dokumentumban használhatunk olyan alkalmazásokat (appletek, szkriptek), amelyek futtatásához szükséges a HTML Document Object Model (DOM) vagy az XML DOM.
     
  4. Az XHTML "család" fejlődésével az XHTML 1.0 kritériumainak megfelelő dokumentumok egyre inkább együtt tudnak működni egymással a különböző XHTML környezetekben.

Ezek alapján elmondható, hogy az XHTML család jelenti a következő lépést az internet  fejlődésében.

Különbségek

Nézzük azokat a fontos különbséget, amelyeket figyelembe kell vennünk ahhoz, hogy az általunk készített XHTML állomány valid legyen.

1. Az elemek egymásbaágyazásánál ügyelnünk kell a sorrendre, vagyis az elemek megnyitásának fordított sorrendjében kell elhelyezni a záró elemeket.

Míg a HTML-ben a

 <b><u>Vastag, aláhúzott szöveg</b></u>

kód értelmezése sem okoz különösebb problémát a megjelenítő programoknak, az XHTML dokumentumban ugyanez nem szerepelhet így, helyesen  így néz ki a fenti kód:

 <b><u>Vastag, aláhúzott szöveg</u></b>

2. Jól formázott dokumentumot kell létrehozni, amely azt jelenti, hogy minden elemet a <html> elemen belül kell elhelyezni. Minden elemnek lehetnek további beágyazott elemei. Ezek az elemek páronként kerülnek megadásra, és ügyelni kell arra, hogy a szülő elembe szabályosan kerüljön beágyazásra (lásd a fenti példát).

A jelenlegi HTML böngészők a szintaktikai hibák felett elsiklanak, illetve megpróbálják kitalálni, hogy mi volt a dokumentum létrehozójának szándéka, amely nem mindig hozza  a kívánt eredményt.  Vajon mi volt előbb, a szabványokat be nem tartó felhasználók, vagy a szabályoktól eltérő dokumentumokat is megjelenítő böngészők? Az eredmény szempontjából mindegy, a HTML kódok sokszor átláthatatlanok/feldolgozhatatlanok a helytelenül strukturált elemek miatt.

Ezzel szemben az XML alapú böngészők ha nem jól formázott dokumentummal találkoznak, nem tudják feldolgozni azt. Ez kezdetben bizonyára érzékenyen érinti majd a kódszerkesztőket, de a bosszúságok mellett előnye is lesz ennek. Kevésbé robosztus, gyorsabb böngészőprogramokkal tudunk dolgozni.

3. A tag neveket kis betűkkel kell írnunk.  Mivel az XML szabvány megkülönbözteti a kis- és nagybetűket a <br> és <BR> tag két különböző dolgot jelölhet.

4. Minden XHTML elemet kötelező lezárni. Vagyis nem írhatjuk a következőt:

<p> Első bekezdés
<p>Második bekezdés

A helyes kód:

<p> Első bekezdés</p>
<p>Második bekezdés </p>

Figyelem! Azon elemek végére, amelyeknek a HTML szabványban nincs záró párjuk (area, base, bgsound, br, col, frame, hr, img, input, isindex, keygen, link, meta, option, param), / karaktert kell tennünk. Pl. <br> helyett <br />, <img src=" /inform/xhtml/"kep.gif">" helyett  <img src=" /inform/xhtml/"kep.gif"" /> kódot kell írnunk. (Ahhoz, hogy a dokumentum kompatibilis legyen a jelenlegi böngészőkkel, ne felejtsünk el egy space karaktert is kitenni a / jel elé.

5. A paramétereket kis betűvel kell írnunk.

Rossz: <table WIDTH="250">
Helyes: <table width="250">

6. A paraméterek értékeit "" jelek közé kell zárnunk.

Rossz: <table width=250>
Helyes:<table width="250">

7. Az attribútumok minimalizálása, rövidítése tiltott

Rossz: <input checked>
Helyes: <input checked="checked" />
 

Az alábbi táblázatban látható, hogy a HTML-ben használt attribútumoknak mi a megfelelője az XHTML-ben.

HTML XHTML  HTML XHTML 
compact compact="compact" ismap ismap="ismap"
checked checked="checked" nohref nohref=" /inform/xhtml/"nohref""
declare declare="declare" noshade noshade="noshade"
readonly readonly="readonly" nowrap nowrap="nowrap"
disabled disabled="disabled" multiple multiple="multiple"
selected selected="selected" noresize noresize="noresize"

8. A name attribútumok helyett id attribútumot kell használni.

A name attribútumokat a dokumentumon belüli navigáció és elemazonosítás céljából használják a weblapszerkesztők.

Rossz: <img src=" /inform/xhtml/"kep.gif"" name="kep1" />
Helyes: <img src=" /inform/xhtml/"kep.gif"" id="kep1" />

A régebbi böngészők miatt érdemes egy ideig mindkét attribútumot szerepeltetni, ugyanazon értékkel.

<img src=" /inform/xhtml/"kep.gif"" name="kep1" id="kep1" />

9. Az xml:lang elem szerepeltetése

A HTML-ben a lang attribútum szolgált az adott elem nyelvének megadására. Az XHTML dokumentumokban az xml:lang="érték" elemet is szerepeltetni kell.

Rossz: <div lang="hu" >Hajrá Magyarok</div>
Helyes: <div lang="hu" xml:lang="hu">Hajrá Magyarok</div>

9. Kötelező XHTML elemek

Minden XHTML dokumentumnak rendelkezni kell DOCTYPE deklarációval. A html, head és body elemeknek szerepelniük kell, a title elemnek pedig a head elemen belül kell elhelyezkednie.

Nézzünk egy leegyszerűsített XHTML dokumentumsablont.

<!DOCTYPE ide jön a dokumentumtípus>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oldalcím</title>
</head>
<body>
Ide jön a tartalom.
</body>
</html>

Figyelem: a DOCTYPE megadása nem része magának az XHTML dokumentumnak, ezért záró eleme sincs, valamint kötelező az első sorban szerepeltetni.

A DOCTYPE

A DOCTYPE definiálja a dokumentum típusát. Az 1.0-s szabványban három dokumentumtípus létezik.

XHTML 1.0 Strict

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ezt akkor ajánlatos használni, amikor tiszta (prezentációs lehetőségektől mentes) kódot állítunk elő, és stíluslapokat használunk.

XHTML 1.0 Transitional

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ezt akkor érdemes használni, amikor ki akarjuk használni a HTML prezentációs lehetőségeit, vagy amikor olyan böngészőre fejlesztünk, amely nem ismeri a stíluslapokat.

XHTML 1.0 Frameset

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

A nevéből is következik, hogy ezt akkor használjuk, ha az ablakot  több keretre (frame) osztjuk fel.

HTML, XHTML konverzió

De jó is lenne, ha létezne olyan program, amellyel egyszerűen konvertálhatnánk a HTML állományainkat XHTML formába. Természetesen több ilyen alkalmazás is létezik, mi kettőt mutatunk be.

Microsoft Frontpage

Ha valaki a Microsoft Frontpage programmal szerkeszti a honlapjait a következő lépésekkel XHTML formára hozhatja azt.

  1. Nyissuk meg az adott oldalt a Frontpage programban
  2. Váltsunk át Kód nézetre
  3. A jobb egérgomb megnyomása után felbukkanó menüből válasszuk ki az "XML formázási szabályok alkalmazása" menüpontot
  4. A kód elejére (<html> tag alá) illesszünk be egy érvényes DOCTYPE definíciót.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. A HTML taget egészítsük ki az XML namespace és nyelv paramétereivel
    pl.: <html xmlns="http://www.w3.org/1999/xhtml" lang="hu">
  6. Amennyiben módosítjuk a dokumentumot, ne felejtsük el az XML formázási szabályokat újra alkalmazni. (3. pont)

HTML Tidy

A HTML Tidy programot (http://tidy.sourceforge.net/#binaries)  parancsmódban használhatjuk, de ennek az az előnye is megvan, hogy - akár batch fájlok készítésével - több dokumentumot is egyszerűen átkonvertálhatunk. A program nemcsak konverziós, hanem kódtisztítással kapcsolatos funkciókat is biztosít.

A programot parancssorban használhatjuk. tidy kapcsoló file kapcsoló file formában.

Az elérhető lehetőségekről a tidy -help parancs kiadásával tájékozódhatunk.

Cikkünkben csak a leggyakrabban használt opciókkal foglalkozunk.

Paraméter Magyarázat
-out file a kimeneti állomány megadása
-modify az eredeti állományt módosítja
-asxhtml a HTML állományt jól formázott XHTML állománnyá konvertálja
- f file a feldolgozás során jelentkező hibák kiírása a megadott állományba
-latin1 ISO-8859-1 karakterkódolás használata
-utf8 UTF8 karakterkódolás használata
-utf16 UTF16 karakterkódolás használata

Példa:

Alakítsuk át a pelda.html állományunkat XHTML formátumba, pelda2.html néven. A feldolgozás közben előforduló hibák kerüljenek a hiba.txt állományba. A karakterkódolás legyen UTF8-as.

tidy -f hiba.txt -asxhtml -utf8 -o pelda2.html pelda.html

Eredeti kód Konvertált kód
<html>

<head>
<meta http-equiv="Content-Language" content="hu">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>

<body>

<p>Csak az teszteljük,<br>
hogy mi történik az átalakítás során....</p>

</body>

</html>
 		 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 1st December 2004), see www.w3.org" />
<meta http-equiv="Content-Language" content="hu" />
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" />
<title></title>
</head>
<body>
<p>Csak az tesztelj�k,<br />
hogy mi t�rt�nik az �talak�t�s sor�n....</p>
</body>
</html>
 

Önellenőrzés

Aki ellenőrizni szeretné a tudását cikkünk témájával kapcsolatban, töltse ki on-line tesztünket.

Módszertani ajánló

tantárgy informatika
témakör honlapszerkesztés, szabványok
évfolyam/korosztály 12. évfolyam
módszer Az HTML és XHTML szabvány közti különbségek bemutatása (prezentáció), kód konvertálásához szükséges módszerek ismertetése
idő 20 perc
célok A tanulók találkozzanak különböző szabványokkal, ismerjék meg a különbségeket, illetve ismerjenek átalakítási/konvertálási módokat/eszközöket is.
tanulási helyzet A tanulók az XHTML szabvány megismerése után néhány HTML példaállományt átalakítanak, majd tetszőlegesen választható eszközzel ellenőrzik, hogy a dokumentum tartalma megfelel-e a nyelv szabályainak.
szükséges számítógépterem, kivetítő, internetkapcsolat
szerző Abonyi-Tóth Andor
cím http://www.sulinet.hu/tart/ncikk/ae/0/24761/index.html

 

Abonyi-Tóth Andor

Ajánlott linkek

Portál
Szólj hozzá te is! »»»