Nejjednodušší HTML dokument a jeho struktura

Jiří Kosek ml.

HTML dokumenty (WWW stránky), jsou obyčejné textové soubory, které kromě vlastního textu obsahují formátovací značky, jež mohou textu přiřadit různý význam. Pro tvorbu naší první stránky proto budeme potřebovat nějaký editor, který umí pracovat s čistým ASCII textem. Nejpoužívanějším uživatelským prostředím jsou dnes patrně asi Windows a proto se jich budeme držet i zde a jako editor budeme používat Notepad (Poznámkový blok).

Pro naše počáteční pokusy bude nejvýhodnější, když si svoje první dílka v HTML budeme moci ihned prohlédnout. Spustíme proto nejprve prohlížeč a poté editor.

Pro začátek můžeme vyzkoušet napsat následující jednoduchý dokument:

<TITLE>Můj první HTML dokument</TITLE>
<H1>Nadpis první úrovně</H1>
<P>
První odstavec vás vítá
do světa HTML a WWW.
<P>
Druhý odstavec následuje
ihned za prvním.
Obr. 1: Vytváření stránky v editoru

Předtím, než si budeme moci výsledek prohlédnou v prohlížeči, musíme soubor uložit. Přípona ukládaného souboru by měla být htm. Poté, co soubor uložíme, se přepneme do prohlížeče (ve Windows např. stiskem Alt+Tab) a pomocí volby File > Open (Netscape) nebo Soubor > Otevřít (Explorer) si vybereme náš soubor. V prohlížeči může být zobrazen podobně jako na naší ukázce na obrázku 2.
Obr. 2: Vzhled naší první stránky

Značky použité v textu sdělují prohlížeči to, jak má text zobrazit. Vžitý termín pro tyto značky je tag. V našem dokumentu byly použity tyto tagy:

Tag se skládá ze znaku `<' (symbol menší než), jména a ze znaku `>' (symbol větší než). Obvykle se tagy vyskytují v párech. Ukončovací tag má pak ještě před jménem znak `/'. V našem příkladě <H1> sdělilo prohlížeči, že následující text je nadpis první úrovně; </H1> vyznačilo konec nadpisu první úrovně. Celému textu označenému nějakými tagy (např. <H1> a </H1>) se říká element. Někdy budeme mluvit o elementu i ve smyslu tagu, který slouží k vyznačení určitých úseků textu (např. element H1 slouží k vyznačení nadpisu první úrovně).

Některé tagy nemusí být párové, např. <P>. Je to v těch případech, kdy může být umístění ukončovacího tagu odvozeno prohlížečem na základě přítomnosti ostatních tagů.

POZOR: HTML v identifikátorech elementů nerozlišuje mezi velkými a malými písmeny. Všechny následující zápisy jsou tudíž rovnocenné: <title>, <TITLE>, <TiTlE>, <tItlE>.

Náš první příklad byl jednoduchý, ale nebyl nejjednodušším HTML dokumentem. Aby dokument vyhovoval specifikaci HTML, stačí když bude obsahovat pouze tagy <TITLE> a </TITLE>, které ohraničují název dokumentu. Ten je nejčastěji zobrazován jako titulek okna prohlížeče.

Naše první ukázka byla syntakticky správná, ale lepší by bylo, kdyby byla zapsána v následujícím tvaru:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<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> Druhý odstavec následuje
ihned za prvním.
</BODY>
</HTML>

Pokud si tento dokument prohlédneme prohlížečem, zjistíme, že je zcela vizuálně shodný s první ukázkou. Jediné v čem se liší, je zápis v HTML. Přibyly zde tři nové elementy, které vymezují záhlaví dokumentu (<HEAD>...</HEAD>), vlastní tělo dokumentu (<BODY>...</BODY>) a celý dokument (<HTML>...</HTML>). Použitý zápis je z formálního hlediska správnější a navíc ve spojení s některými prohlížeči může zefektivnit přístup k WWW stránkám. Několik prohlížečů lze totiž nakonfigurovat tak, že nahrají pouze záhlaví dokumentu a teprve na výzvu uživatele přenesou po síti zbytek dokumentu.

První řádek obsahující <!DOCTYPE...> je zde kvůli kompatibilitě s SGML a identifikuje verzi HTML -- v našem případě verzi 3.2.

Dokument si můžeme představit jako stromově uspořádanou hierarchii jednotlivých elementů. Na nejvyšší úrovni je element HTML; ten se rozpadá na dva další HEAD a BODY; tělo dokumentu BODY se skládá z nadpisu H1 a z odstavců P. Tuto představu ilustruje obrázek 3. Pro nás je důležité, abychom si uvědomili, že celý dokument je vlastně kontejner, který obsahuje další elementy (a ty mohou být opět jakýmisi kontejnery a obsahovat další ...). Vše po určitém čase skončí u vlastního textu.
Obr. 3: Hierarchické uspořádání HTML dokumentu

Logické členění dokumentu -- odstavce a nadpisy

Mezi základní prvky, které umožňují text logicky členit patří odstavce. Odstavce se v HTML vyznačují pomocí elementu <P>, který je umísťován v místě, kde má začít odstavec. Uzavírací tag </P> nemusí být uváděn, prohlížeče jej doplní automaticky.

POZOR: Text, který je rozpoznán jako jeden odstavec je před zobrazením zpracován následujícím způsobem: (1) všechny konce řádků jsou převedeny na mezery; (2) pokud bezprostředně za sebou následuje několik mezer jsou nahrazeny jedinou mezerou; (3) text celého odstavce je zalomen podle velikosti okna prohlížeče tak, aby byly zobrazeny celé řádky.

Vzhledem k tomu, že je HTML dokument zpracováván takto, je možné v něm pro větší přehlednost zápisu oddělovat odstavce kromě tagu <P> i několika prázdnými řádky. Následující dva HTML dokumenty se tedy v prohlížeči zobrazí zcela stejně. První je zapsán "hustší formou":

<P>První odstavec.<P>Druhý je delší.<P>A třetí ihned
následuje.

druhý je zase "přehlednější":

<P>
První                           odstavec.

<P>
Druhý je              delší.

<P>
A třetí ihned následuje.

A jak je vidět, na počtu mezer mezi slovy skutečně nezáleží. Rovněž to, že nějaký text je na konci řádky ve zdrojovém HTML dokumentu, neznamená, že na tomto místě bude zobrazen i v prohlížeči -- text je vždy přeformátován tak, aby délka řádky odpovídala velikosti okna, ve kterém je dokument prohlížen.

TIP: V případě, že chceme na nějakém místě v textu vynutit řádkový zlom, můžeme použít tag <BR>. V místě, kde je uveden, je ukončena řádka a následující text je v prohlížeči zobrazován od začátku následující řádky.

Text lze samozřejmě členit i do větších celků než jsou odstavce. HTML umožňuje použít šest úrovní nadpisů. Přičemž úroveň 1 je nejvyšší a úroveň 6 je nejnižší. Nadpisy vyšší úrovně jsou obvykle zobrazovány větším a tučnějším písmem. Syntaxe tagu pro nadpis je: <Hn>Text nadpisu</Hn>, kde n je úroveň nadpisu (1-6).

První nadpis, který je v dokumentu použit by měl být úrovně 1 (<H1>) a v hierarchii nadpisů by neměly být žádné úrovně vynechávány.

Ve většině dokumentů je první nadpis totožný s titulkem (názvem) stránky. Pro dokumenty, které mají více částí, by měl nadpis první úrovně odpovídat názvu kapitoly nebo části a titulek by měl identifikovat dokument v širším kontextu (např. název knihy doplněný o název kapitoly).

© Jiří Kosek 1999