Jistě se shodneme na tom, že naše první ukázka byla opravdu
velice jednoduchá. Jen pro zajímavost – aby stránka
vyhovovala specifikaci HTML, stačí, když obsahuje název stránky
uzavřený mezi tagy <title>
a </title> následovaný alespoň
nějakým textem nebo odstavcem textu apod. Název stránky se nejčastěji
zobrazuje jako titulek okna prohlížeče. Neměl by proto být příliš
dlouhý – doporučuje se délka maximálně 64 znaků.
Ač se naše ukázka zobrazila v prohlížeči správně, nebyla zcela správná z hlediska formálního. Profesionál by ji zapsal takto:
<!DOCTYPE html> <html> <head> <title>Můj první HTML dokument</title> </head> <body> <h1>Nadpis první úrovně</h1> <p>První odstavec vás vítá do světa HTML a WWW.</p> <p>Druhý odstavec následuje ihned za prvním.</p> </body> </html>
Výsledek v prohlížeči se vůbec nezmění, odlišný je pouze
zápis v HTML. První řádka <!DOCTYPE html>
určuje, že používáme nejnovější verzi HTML, v tuto chvíli HTML5.
Kromě toho přibyly na stránce tři nové elementy. Ty vymezují
hlavičku dokumentu (<head>…</head>),
tělo dokumentu (<body>…</body>)
a konečně celý dokument (<html>…</html>). Dokument si tedy můžeme představit jako
stromově uspořádanou hierarchii jednotlivých elementů. Na nejvyšší
úrovni je element html. Ten se skládá z hlavičky
head a těla dokumentu body. Tělo dokumentu se
pak skládá z nadpisu
h1 a dvou
odstavců
p.
Dokument je tak vlastně jakýmsi kontejnerem, který obsahuje různé
elementy. Každý element je však opět kontejnerem – může tedy obsahovat
buď další elementy nebo již vlastní text. Vždy se však po určité době
dostaneme k samotnému textu – elementy, ve kterých je text postupně
obsažen, určují jeho význam.
Všimněte si ještě, že v poslední ukázce jsme i pro odstavce
použili ukončovací tagy </p>. V HTML to
sice není nutné, ale XHTML to již vyžaduje. Lepší je proto začít si na
tento způsob zápisu zvykat již od počátku, v knize ho budeme rovněž
používat.[3]
Naše poznatky zobecníme a získáme tak jakousi kostru či šablonu, které by měla vyhovovat většina námi vytvářených stránek:
<!DOCTYPE html>
<html>
<head>
<title>název dokumentu</title>
</head>
<body>
tělo dokumentu
</body>
</html>
Tip
Šikovné je si tuto šablonu uložit do souboru a při tvorbě nové stránky ji pouze zkopírovat. Nemusíme pak vše pokaždé zdlouhavě opisovat.
