Úvod do jazyka XHTML

Tvorba jednoduchého XHTML dokumentu

Nyní už víme, že každý XHTML dokument se skládá z prvků. Existuje základní kostra XHTML dokumentu, která představuje minimum, které musí každá XHTML stránka obsahovat. Až se naučíme kostru, tak obalit jí už bude hračka!

Základní stavební prvky

Následující prvky jsou minimum, které potřebujeme pro vytvoření té nejjednodušší funkční webové stránky - tzn. stránky, která bude moci obsahovat jednoduchý neformátovaný text.

Prvek <html> </html>

Ohraničuje začátek a konec HTML či XHTML dokumentu (to se netýká deklarace dokumentu a dalších specifických informací, které jsou umístěny ještě před tímto prvkem).

Prvek <head> </head>

Z anglického head neboli hlavička.
Zde se v některých případech shromažďují důležité informace o dokumentu. Tyto informace (s výjimkou obsahu prvku title) vidíme jen ve zdrojovém kódu stránky, ale v prohlížeči se na stránce nezobrazí.

Prvek <title> </title>

Z anglického title neboli název.
Text umístěný mezi počáteční a koncovou značkou tohoto prvku se zobrazí jako název stránky (v prohlížeči na titulkovém pruhu vlevo nahoře na liště okna).
Tento prvek se umisťuje do prvku head.

Prvek <body> </body>

Z anglického body neboli tělo.
Mezi počáteční a koncovou značkou tohoto prvku se nalézá ta část dokumentu, která už se zobrazí na výstupu na stránce v prohlížeči.

Kód jednoduché stránky sestavený ze základních prvků je uveden v příkladu .

Deklarace XHTML dokumentu

Již jsme se naučili základním prvkům tvořícím jednoduchou webovou stránku. Správný XHTML dokument však musí na samém začátku obsahovat ještě informace o tom, podle pravidel jaké verze XHTML se řídí, v jakém jazyku a kódování byl napsán atd. Tato data jsou důležitá především.pro prohlížeče a další programy, které se stránkou pracují.

Nyní si tedy povíme, co je do kódu stránky nutno ještě přidat, abychom dostali platný XHTML dokument. V tomto kurzu se budeme držet pravidel nejnovější schválené verze XHTML a tou je XHTML 1.1 (psáno v roce 2007).

Na začátku dokumentu se nejprve musí nacházet informace o tom, že se jedná o dokument založený na jazyce XML, o jakou verzi XML se jedná a s jakým druhem kódování stránka pracuje (v případech UTF-8 a UTF-16 se druh kódování uvádět nemusí). Pro kódování Windows-1250 vypadá deklarace takto:

<?xml version="1.0" encoding="windows-1250"?>

Následuje definice typu dokumentu. Je zde specifikována verze používaného XHTML a adresa, kde se nachází její DTD. Pro XHTML 1.1 vypadá deklarace takto:

<!DOCTYPE

html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Již víme, že kořenem vlastního dokumentu je vždy prvek html. Ten musí ve svém atributu xmlns určovat tzv. jmenný prostor a v atributu xml:lang jazyk dokumentu. Pro češtinu vypadá zápis takto:

Teď, když jsme se vypořádali s nutnými deklaracemi, přidáme je k základním prvkům a platný XHTML dokument je na světě! Kód jednoduché XHTML stránky je uveden v příkladu . Do kódu této stránky byl ještě přidán prvek odstavce p, neboť pravidla XHTML nedovolují, aby byl text vložen přímo do prvku body.

Celý kód stránky by se mohl napsat do jediné řádky bez jakéhokoliv odsazení a prohlížeč by stránku zobrazil úplně stejně. Značky odsazujeme od kraje podle úrovně vnoření, abychom se snáze orientovali v kódu stránky a abychom nezapomněli nějaký prvek řádně uzavřít (napsat mu koncovou značku). S přibývajícími prvky bude orientace v kódu stránky stále složitější, a proto je dobré zvyknout si prvky odsazovat.

Vložení komentáře

Chcete-li si pro sebe v kódu stránky udělat nějaký komentář pro případ, že byste např. zapomněli k čemu jaký prvek slouží, můžete ho na stránku vložit v této formě:

Prohlížeč při zobrazování stránky část kódu uzavřenou do těchto znaků  přeskočí, a komentář tak nemá na výstup žádný vliv. Ukázka vložení komentáře na stránku je uvedena v příkladu .

Tvorba XHTML dokumentu: V čem a jak

K vytvoření jednoduchého XHTML dokumentu není potřeba žádný speciální program, i když existuje mnoho kvalitních editorů, jenž vám mravenčí práci při psaní kódu webových stránek velmi ulehčí (např. editor PSPad). Stačí k tomu však i obyčejný textový editor - např. Poznámkový blok (v originále Notepad) od firmy Microsoft, který se instaluje současně s operačním systémem Windows. V operačním systému Windows spustíte tento editor klepnutím na tlačítko Start (vlevo dole na hlavním panelu) => Programy => Příslušenství => Poznámkový blok.

Ukázka XHTML kódu v editoru Poznámkový blok je zobrazena na obrázku .

Návod, jak vytvořit XHTML stránku v editoru Poznámkový blok

Otevřete textový editor Poznámkový blok a napište do něj kód stránky.
V hlavní nabídce zvolte příkaz Soubor ⇒ Uložit jako, stránku pojmenujte a příponu txt přepište na htm. Soubor Uložte.

Když soubor znovu otevřete, zobrazí se už jako stránka ve webovém prohlížeči nainstalovaném na vašem počítači.

Návod, jak uložit stránku vytvořenou v editoru Poznámkový blok, je zobrazen v animaci .

Návod, jak vytvořenou XHTML stránku upravit

Otevřete stránku ve vašem webovém prohlížeči.
V řádku nabídek zvolte Zobrazit ⇒ Zdrojový kód (nebo pravým tlačítkem myši klepněte na stránku a zvolte Zobrazit zdrojový kód). Otevře se kód stránky.
Vykonejte potřebné úpravy v kódu.
Změny uložte: v řádku nabídek zvolte Soubor ⇒ Uložit (nebo použijte klávesovou zkratku CTRL + S).
Provedené změny se na stránce projeví až po jejím aktualizování. Ve webovém prohlížeči v řádku nabídek zvolte příkaz Zobrazit ⇒ Aktualizovat. Stejného výsledku dosáhnete stisknutím klávesy F5 nebo klepnutím na obrázkovou ikonu:

Návod, jak upravit stránku, je zobrazen v animaci .

Šablona

Práci při tvorbě stránek může ulehčit vytvoření jakési šablony (anglicky nazývané template), která bude obsahovat základní strukturu XHTML kódu. Člověk, který má takovouto šablonu uloženou, může pokaždé, když tvoří novou stránku, šablonu použít.

Postup, jak vytvořit a využít šablonu:

Vytvořete si stránku, která bude obsahovat pouze základní prvky a deklaraci XHTML dokumentu (stejně jako v příkladu ) a pojmenujte jí template.htm.
Otevřete kód šablony.
Zvolte Soubor ⇒ Uložit jako a stránku pojmenujete jinak než se jmenuje šablona - např. stranka1.htm.

Tak vznikne nová stránka (stranka1.htm) a vaše stará stránka (šablona template.htm) zůstane zachována pro další použití.

Editor Notepad2

Vylepšenou verzí editoru Poznámkový blok je freeware verze Notepad2, jenž umí zvýraznit XHTML syntaxi a obsahuje mnoho dalších funkcí užitečných při tvorbě webových stránek.

Ukázka XHTML kódu v editoru Notepad2 je zobrazena na obrázku .

Všechny návody v tomto kurzu předpokládají používání editoru Poznámkový blok a u něj můžete také zůstat. Pokud si však přejete vyzkoušet práci v editoru Notepad2, můžete při tvorbě vlastních stránek (např. při vypracovávání zadaných cvičení či úkolu) místo obyčejného Poznámkového bloku používat editor Notepad2. Česká verze editoru Notepad2 je umístěna přímo v tomto kurzu a můžete si ji stáhnout

zde.

Program uložte na místo, kde bude snadno přístupný (např. na Plochu). Program Notepad2 se neinstaluje, ale spouští se přímo souborem notepad2.exe.

Aktuální verzi programu Notepad2 lze stáhnout na těchto stránkách:

http://www.flos-freeware.ch/notepad2.html

Editor Notepad2 podporuje zvýraznění syntaxe nejen u XHTML a HTML stránek, ale také u dokumentů CSS, XML, JavaScript a dalších. Aby editor věděl, jak má sytaxi dokumentu zvýraznit, musí být daný dokument nejdříve uložen a jeho název musí obsahovat příslušnou příponou (v našem případě htm). Proto je užitečné při tvorbě nové stránky pokaždé vycházet z již uložené šablony.

Pro zobrazení zdrojového kódu stránky v prohlížeči Internet Explorer se použije vždy editor Poznámkový blok. Chcete-li tedy upravovat kód stránky v editoru Notepad2, můžete použít tento postup:

Otevřete editor Notepad2.
V hlavní nabídce klepněte na příkaz Soubor => Otevřít..
Vyberte na disku stránku, kterou chcete upravit a klepněte na tlačítko OK.