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.
|
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.
 |
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.
 |
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.
<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 až od začátku následující řádky.
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).