TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
- Úvod do XHTML
- Rozdíly mezi HTML a XHTML
- Syntaxe XHTML
- XHTML DTD
XHTML je v současnosti často omílaná zkratka. Ale co obnáší, dosti lidem stále uniká. Cílem tohoto článku, který je kvůli své rozsáhlosti rozdělen na dvě části, je seznámit čtenáře s XHTML (kdo by to řekl). Určitě zjistíte, že na XHTML není nic složitého.
K pochopení XHTML vám bude stačit základní znalost HTML a XML (hlavně jmenných prostorů).
Co je XHTML?
- XHTML znamená eXtensible HyperText Markup Language (v překladu „rozšiřitelný hypertextový značkovací jazyk“).
- XHTML je náhradou za HTML.
- XHTML je téměř identické s HTML 4.01.
- XHTML je přísnější a čistší verze HTML.
- XHTML je HTML definované jako XML aplikace.
- XHTML je od 26. ledna 2000 W3C doporučením.
- XHTML je kompatibilní s HTML 4.01.
Proč XHTML?
Dopracovali jsme se do stádia, kdy mnoho internetových stránek obsahuje „chybné“ HTML. Situaci ještě více komplikuje fakt, že se tento „chybný“ kód zobrazí v prohlížeči korektně, i když nedodržuje pravidla HTML.
<html>
<head>
<title>Toto je špatné HTML </title>
<body>
<h1>Špatné HTML
</body>Pokud jste alespoň letmo přelétli seriál XML pro začátečníky zde na Programujte.com, pak určitě víte, že pokud je XML kód napsaný špatně, prohlížeč ihned zahlásí chybu. Díky tomu jsou výsledkem vždy správně vytvořené dokumenty. Kdyby každý HTML dokument byl také bez chyb, internetové prohlížeče by měly výrazně menší velikost a vykreslování stránek by bylo značně, protože značnou část jejich velikosti zabírají právě algoritmy na zobrazení „chybného“ kódu.
Možná vás teď napadla otázka „Tak proč se stránky nezačnou tvořit v XML?“ Zde je problém v tom, že napsat stránku kompletně v XML, bez řádku v HTML, je o dost složitější (vlastní zkušenost), takže programátoři by se museli přeškolovat a stále existuje i procento uživatelů, kteří používají prohlížeče bez (nebo pouze s malou podporou) XML.
Je tedy jasné, že HTML musí zůstat ještě chvíli „žít“. Ale v souvislosti s chybným kódem nastává další „problém“, a tím jsou přenosné počítače. Ty mají menší kapacitu pevného disku a výpočetní výkon, takže chybně napsaný kód je pro ně mnohem větší sousto než u klasických počítačů.
Že by začarovaný kruh? Nemůžeme přejít na XML (či jinou technologii, která by se vyvinula), ale zároveň nemůžeme zůstat u chybného HTML kódu. Řešením je kombinace XML + HTML = XHTML. XHTML může být zobrazeno na všech prohlížečích s podporou XML a pokud ji prohlížeč nemá, tak se vůbec nic neděje – dokumenty vytvořené v XHTML jsou kompatibilní s HTML 4.01.
Rozdíly mezi XHTML a HTML
Přestože jsem v předchozí kapitole psal, že XHTML je téměř identické s HTML, tak bych nyní chtěl zdůraznit slovíčko téměř. Několik hlavních rozdílů zde je.
- XHTML elementy musí být vhodně vložené.
- XHTML elementy musí být vždy uzavřené.
- Prázdné elementy musí být také uzavřené.
- XHTML elementy se píší malými písmeny.
- XHTML dokument musí mít hlavní (root) element (<html>).
XHTML elementy musí být vhodně vloženy
Špatně:
<b><i> Tento text je napsán tučně a kurzívou. </b></i>Správně:
<b><i> Tento text je napsán tučně a kurzívou. </i></b>XHTML elementy musí být vždy uzavřené
Neprázdný element musí mít ukončovací tag.
Špatně:
<p> Toto je odstavec
<p> Toto je jiný odstavec Správně:
<p> Toto je odstavec </p>
<p> Toto je jiný odstavec </p>Prázdné elementy musí být také uzavřené
I prázdné elementy musí být uzavřeny ukončovacím tagem, nebo musí být otevírací tag ukončen „/>“
Špatně:
Konec řádku: <br>
Horizontální čára: <hr>
Obrázek: <img src=“happy.gif“ alt=“Happy face“>Správně:
Konec řádku: <br />
Horizontální čára: <hr />
Obrázek: <img src=“happy.gif“ alt=“Happy face“ />XHTML elementy se píší malými písmeny
Špatně:
<BODY>
<P> Toto je odstavec </P>
</BODY>Správně:
<body>
<p> Toto je odstavec </p>
</body>Syntaxe XHTML
Psaní XHTML dokumentu vyžaduje čistou HTML syntaxi. Některá další pravidla, která musíte při psaní XHTML dodržovat, jsou tato:
- Názvy atributů musí být malými písmeny.
- Hodnota atributu musí být uzavřena v uvozovkách.
- Minimalizace atributů je zakázána!
- Atribut name je nahrazen atributem id
Minimalizace atributů je zakázána
Špatně:
<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>Správně:
<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />Další atributy, který nemůžete v XHTML minimalizovat, jsou: compact, checked, declare, readonly, disabled, selected, defer, ismap, nohref, noshade, nowrap, multiple, noresize.
Atribut name je nahrazen atributem id
HTML 4.01 umožňuje použití atributu name pro elementy: applet, frame, iframe, img a map. XHTML tento zastaralý atribut nahrazuje atributem id.
Kvůli zachování kompatibility se staršími prohlížeči doporučuji používat oba atributy (samozřejmě se stejnou hodnotou).
<img src=“obrazek.gif“ id=“obrazek1“ name=“obrazek1“ /> Atribut lang
Atribut lang je možné použít téměř ve všech XHTML elementech. Určuje jazyk hodnoty elementu. Při použití atributu lang v elementu je nezbytné přidat ještě atribut xml:lang.
<div lang=“no“ xml:lang=“no“>Heia Norge!</div>Základní šablona XHTML dokumentu
Všechny XHTML dokumenty musí mít DOCTYPE deklaraci, musí obsahovat elementy <html>, <head> + podelement <title>. Minimální šablona XHTML dokumentu je zde:
<!DOCTYPE Doctype stránky>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Titulek stránky</title>
</head>
<body>
</body>
</html>Poznámka: DOCTYPE deklarace není součástí XHTML dokumentu samotného. Nemá tedy ukončovací tag.
XHTML DTD
DOCTYPE je v XHTML dokumentu povinnost uvádět na první řádce. Jak již napovídá název, definuje typ dokumentu.
- DTD určuje syntaxi webové stránky v jazyce SGML (Standard Generalized Markup Language).
- DTD je používáno SGML aplikacemi, jako je HTML, k určení pravidel týkajících se značkování dokumentů určitého typu včetně sady elementů a deklarace entit.
- XHTML DTD určuje povolenou syntaxi a gramatiku XHTML značkování.
- V současnosti máme 3 typy XHTML DTD: Strict, Transitional a Frameset.
XHTML 1.0 Strict
Již název napovídá, že se jedná o přísné DTD. Použijte, když chcete opravdu čistou syntaxi. Používá se společně s CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional
Použijte, když chcete využít pokročilé prezentační schopnosti HTML a když chcete podporovat prohlížeče nepodporující CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Frameset
Použijte, když chcete používat rámy na rozdělení obrazovky prohlížeče na dvě nebo více vnořených stránek (element iframe lze použít i v XHTML 1.0 Transitional).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Poznámka: Na stránce w3schools.com naleznete kompletní seznam elementů použitelných v XHTML, včetně informace, ve kterém XHTML DTD můžete určitý element použít a od jaké verze IE a Netscape Navigatoru je element podporován. Příkazy označené zde jako Deprecated jsou většinou zastaralé a XHTML DTD Strict je zakazuje.
Dostali jsme se na konec první části článku o XHTML. Tento článek využívá informace z kurzu XHTML na w3schools.com. Tuto stránku opravdu doporučuji! Ve druhé části článku se budeme věnovat validaci, modularizaci XHTML, atributům a událostem.
