Kurz HTML – základní struktura dokumentu

22. října 1999

•

Kurz HTML (2): Základní struktura dokumentuV tom nejjednodušším případě můžeme HTML dokument považovat za běžný textový soubor. Narozdíl od něj má však HTML dokument určitou strukturu, která bude tématem dnešní, druhé části kurzu o HTML…

Struktura HTML

Struktura HTML dokumentu je taková, jaká je uvedena v následující tabulce. Zmíněné části by rozhodně neměly v dokumentu chybět, i když se dají najít stránky, kde určité části nejsou uvedeny, což ale nebrání jejich správnému zobrazování. Pokud se tedy chystáte vytvořit webovou stránku, dbejte, aby výchozí stav byl takový, jaký je v tabulce:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Final//CZ“>
<HTML>
<HEAD>
<TITLE> </TITLE>
<META>
</HEAD>
<BODY>
</BODY>
</HTML>

Část: <!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Final//CZ“>

Označuje typ dokumentu. Výše uvedený příklad říká prohlížeči, že se jedná o dokument HTML, že použitá verze jazyka HTML je 4.0 a že dokument obsahuje české znaky.

Část: <HTML>

Párový tag, který označuje začátek samotného HTML dokumentu. Podle specifikace W3C je tento tag povinný, většina nových prohlížečů jej ovšem ke správnému zobrazení stránky nepotřebuje, doporučujeme jej ovšem ve stránce ponechat.

Část: <HEAD>

Nezbytný HTML tag tvořící hlavičku HTML dokumentu. Údaje, které jsou zde uvedeny, se v samotné webové stránce (kromě TITLE) nezobrazují, ale můžou obsahovat důležité informace, týkající se samotného obsahu stránky.

Část: <TITLE>nazev stranky</TITLE>

Titulek stránky. Mezi tento párový tag se píše název stránky, který se objeví v horní liště prohlížeče. Pokud tedy mezi tagy <TITLE> a </TITLE> napíši text „Interval.cz – server o webu a e-komerci“, výsledek bude vypadat v prohlížeči tak, jak je uveden na následujícím obrázku:

Titulek stránky by podle některých zdrojů měl být velký maximálně 64 znaků, pokud je delší, může být prohlížečem automaticky zkrácen. Pokud titulek stránky neuvede žádný, automaticky se dosadí jméno HTML souboru a cesta k němu.

Část: <META>

Nepovinná součást webové stránky. Metatagy slouží pouze ke sdělování různých informací o dokumentu, jako je například kódovaní dokumentu, klíčová slova dokumentu apod. Nejpoužívanější použití tohoto tagu je sdělování, v jakém kódování má stránku zobrazit či jaká je definice klíčových slov. Uvedený tag zobrazí webovou stránku v kódové sadě Windows 1250

Část: </HEAD>

Konec hlavičky dokumentu

Část: <BODY>

Tag <BODY> slouží k tomu, aby zobrazil samotný obsah stránky – vše tedy, co je tedy vidět v prohlížeči – text, obrázky atd.- , je uvedeno v sekci <BODY>. Samotný tag <BODY> má několik parametrů, které si zde uvedeme i s příkladem na konci:

BGCOLOR=“barva“ – definice barvy pozadí stránky

TEXT=“barva“ – definice barvy textu ve stránce

LINK=“barva“ – definice barvy odkazu

VLINK=“barva“ – barva odkazu, na který jste již klikli.

ALINK=“barva“ – barva aktuálního odkazu (zbarvení odkazu v okamžiku, kdy na něj kliknete.)

BACKGROUND=“obrázek“ – obrázek na pozadí stránky, který se rozkopíruje na celou viditelnou plochu stránky.

LEFTMARGIN =“číselná hodnota“ – definuje vzdálenost začátku zobrazení stránky v pixelech od levého kraje prohlížeče. Prázdný prostor je vyplněn buď barvou na pozadí (BGCOLOR) nebo obrázkem na pozadí (BACKGROUND).

TOPMARGIN =“číselná hodnota“ – definuje vzdálenost začátku zobrazení stránky v pixelech od horního kraje prohlížeče. Prázdný prostor je vyplněn buď barvou na pozadí (BGCOLOR) nebo obrázkem na pozadí (BACKGROUND).

Poznámka1: Poslední dva uvedené tagy nefungují v Netscape Navigatoru – ten má svůj vlastní ekvivalent těchto tagů – MARGINWIDTH A MARGINHEIGHT.

Pokud chcete mít stejné okraje v Internet Exploreru a současně v Netcape Navigatoru, použijte v tagu <BODY> obě verze, tedy LEFTMARGIN, TOPMARGIN (pro IE) a MARGINWINDTH, MARGINHEIGHT (pro NN).

Poznámka2: Všechny výše uvedené parametry tagu <BODY> doporučuji mít na stránce definovány – jedině pak budete mít jistotu, že všem uživatelům se stránka zobrazí tak, jak si přejete vy (tedy všichni budou mít stejnou barvu odkazů, pozadí, okraje atd.).

Příklad:

Uvedený příklad nastaví barvu pozadí na žlutou, všem odkazům (nenavštíveným, navštíveným, aktuálním) nastaví červenou barvu a dokument bude „odsazen“ od levého okraje 30 pixelů a od horního okraje prohlížeče o pět pixelů. Celý zdrojový kód náhledu je tento:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.0 Final//CZ“>
<HTML>
<HEAD>
<<TITLE>Náhled</TITLE>
<META http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
</HEAD>
<body BGCOLOR=“YELLOW“ vlink=“RED“ alink=“RED“ link=“RED“ LEFTMARGIN=20 TOPMARGIN=5 marginwidth=“20″ margin>
<a href=“http://www.interval.cz“>Odkaz na Interval.cz</a>
</BODY>
</HTML>

Část: </BODY>

Konec zobrazovaného obsahu stránky. Co následuje za tímto tagem se již ve stránce nezobrazuje.

Část: </HTMl>

Konec souboru ve formátu HTML.

Shrnutí:

Na začátku článku uvedenou strukturu HTML dokumentu doporučuji používat jako výchozí stav, když chcete tvořit webovu stránku. Některé uvedené tagy nejsou povinné, přesto je však doporučuji použít. Co se týče parametrů (BGCOLOR, LINK, TEXT atd.) v tagu <BODY>, všechny parametry uveďte a vložte jejich hodnoty – tím zajistíte, že stránka bude vypadat stejně i u ostatních uživatelů, kteří si budou vaši stránku prohlížet a kteří mají jiné nastavení Windows. Ohledně stylu psaní tagů poznamenám, že je můžete psát velkými nebo malými písmeny, je to jedno, nezáleží tedy, zda-li napíšete <BODY> nebo <body> – stejně tak je jedno, jak je řadíte, jestli každý tag dáte na nový řádek nebo je poskládáte za sebou – řazení tagů pod sebe je samozřejmě přehlednější.

Předchozí článek Kurz HTML - úvodní seznámení s HTML

Další článek Kurz HTML - formátování textu na stránkách