XHTML

Jazyk XHTML je v podstatě novější verzí HTML, vznikl vlastně spojením jazyků HTML a XML. XHTML je sice "přísnější" než HTML, ale pokud jste HTML porozuměli, nebudete mít s jeho používáním velké problémy. V podstatě jen doplníme nebo upravíme HTML o některé další drobnosti a pravidla. Stejně jako HTML a CSS si můžete nechat soubor v XHTML zkontrolovat na validator.w3.org.

První pravidla a změny se týkají úvodu zdroje stránky - konkrétně jejího záhlaví a hlavičky - prvních řádků a metatagů.
Nejprve je potřeba prohlížeči sdělit, o jaký typ souboru se u naší stránky jedná - hned na prvním řádku zdroje stránky. Pro stránku v jazyku HTML jsme používali <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">.
Pro XHTML můžeme využít tyto možnosti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- striktní typ dokumentu, všechny značky odpovídají standardu XHTML (neobsahuje například tag frame)

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

- přechodový typ dokumentu, funguje HTML i XHTML

Uvedením jednoho z těchto typů dokumentu také odstraníte problémy se šířkou bloků v IE starších verzí - bude se chovat podle standardů (šířka se počítá bez rámečku a mezer). Zajímavé je, že zápis tohoto elementu odporuje dalším dvěma pravidlům - není zapsaný malými písmeny a není ukončený.

Na druhém řádku zdroje stránky můžete narazit na určení tzv. jmenného prostoru, to má význam hlavně pro jazyk XML, v našem případě zatím nemusíme uvádět, může zůstat tag html bez parametrů:
<html xmlns="http://www.w3.org/1999/xhtml" lang="cs" xml:lang="cs">

V hlavičce stránky mezi meta-tagy nesmí chybět definice typu obsahu, tento tag známe z minulé lekce, tady ho uvádím upravený podle dalších následujících pravidel XHTML:
<meta http-equiv="content-type" content="text/html; charset=windows-1250" />

Hlavička stránky v XHTML by tedy celá mohla vypadat například takto:
<!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" lang="cs" xml:lang="cs">
<head>
<title>Ukázkový dokument XHTML</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1250" />
<meta http-equiv="Content-Language" content="cs" />
</head>

Další pravidla se týkají všech tagů na naší stránce, o žádné převratné změny se ale nejedná.

Na rozdíl od HTML, kterému "nevadily" některé drobnosti, je třeba v XHTML být pečlivější, jinak by se stránka nezobrazila správně (i když současné prohlížeče se zatím ke standardům XHTML a CSS staví různě):

- uzavírejte všechny značky, u nepárových připište lomítko na konec tagu - například <br /> nebo <img src="foto.jpg" /> (všímavější z vás už postřehli lomítko v metatagu o několik řádků výše)

- všechny značky pište malými písmeny - pravda je, že současné prohlížeče vám tyto chyby většinou "odpustí"

- všechny parametry musí obsahovat hodnotu a ta musí být v uvozovkách - opět jsme si mohli u HTML někdy "odpustit", v XHTML musí být například (povinné uvozovky jsou podtržené):
<img src="foto.jpg" width="150" height="90" alt="Logo stránky" /> , <div id="logo">, <a href="film.htm"> film </a> apod.

- všechny značky musí být do sebe správně vnořené - toto pravidlo jsme měli dodržovat i u HTML, například je správně <p><b>Tučný</b> text v odstavci</p>, chyba by byla <b><p>Tučný</b> text v odstavci</p>, přesto, že by nejspíš současným prohlížečům nevadila

- řádkové značky nemohou obsahovat značky uvozující celý blok - řádková značka může být například a nebo span, nemůže obsahovat například div nebo p, také například nadpis h1 (až h6) nemůže obsahovat odstavec nebo div

Další z drobných odlišností od HTML je zápis komentáře <!--poznámka-->, kde lze psát pouze dvě pomlčky (v HTML na počtu pomlček nezáleželo).

Pokud jste používali HTML správně, nebyl by takový problém upravit stránky pro XHTML. Existují také nástroje, které umí stránky v HTML převést do XHTML, například online verze programu HTML Tidy na adrese http://infohound.net/tidy


Úkoly:

Úkol (3 body):

Převeď svůj index do XHTML a nechej si ho zkontrolovat ve validátoru. Používej XHTML i na další stránky, které budeš tvořit.

Název školy:Základní škola, Hradec Králové, M. Horákové 258
Název projektu:EU peníze školám
Číslo projektu:CZ.1.07/1.4.00/21.2575
Téma:Tvorba WWW stránek
Název:VY_32_INOVACE_25_10B_tvorba www25
Autor:Pavel Petr
Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.