2. Struktura dokumentu & nadpisy

Správná struktura HTML dokumentu je důležitá z hlediska funkčnosti, zobrazování jak vizuální tak obsahové stránky webu. Základní struktura je velmi prostá a měla by vypadat takto:

<!DOCTYPE HTML>

<html>

<head>

<title> Titulek webu </title>

</head>

<body>

</body>

</html>

<!DOCTYPE HTML> prohlížeči říká, že tento dokument je napsán v jazyce HTML 5. Jednotlivé verze HTML se od sebe liší, proto bychom na tento tag neměli zapomínat, jinak by nám mohla stránka dělat neplechu. Tag <html> </html> říká, že všechno vevnitř je HTML kód. Značka <head></head> udává informace o dokumentu, které se na stránce nezobrazují. Tag, který se do hlavičky vkládá je například výše zmíněný <title></title>, je to titulek nebo by se taky dalo říct popisek webu. V prohlížeči nám pomáhá k orientaci mezi záložkami, proto by měl být výstižný a krátký. Do těla dokumentu <body> </body> píšeme vše, co chceme, aby se na dané stránce zobrazovalo.

Kostru dokumentu můžeme dále prakticky rozvinout o určité meta tagy a vlastnosti, ale o tom někdy příště.

Základní složkou obsahu webu jsou nadpisy. HTML disponuje 6 různými nadpisy navzájem se lišící velikostí přičemž nadpis první úrovně je největší a nadpis šesté úrovně je nejmenší. Tag pro nadpis je samozřejmě párový značí se <h1> Nadpis první úrovně </h1>. Číslo následující za písmenem h uvádí o jakou úroveň nadpisu jde.

V praxi to vypadá takto:

<body>

<h1> Nadpis první úrovně </h1> <br>

<h2> Nadpis druhé úrovně </h2> <br>

<h3> Nadpis třetí úrovně </h3> <br>

<h4> Nadpis čtvrté úrovně </h4> <br>

<h5> Nadpis páté úrovně </h5> <br>

<h6> Nadpis šesté úrovně </h6> <br>

</body>

Tag <br> má stejnou funkci jako klasický enter. Odřádkování enterem v textovém editoru je na webu ignorováno a takové odřádkování musíme tedy nahradit tímto nepárovým tagem.

V dalším díle seriálu se podíváme na číslované a nečíslované seznamy.

„Líbil se Vám tento článek? Sdílejte ho prosím na sociálních sítích, ať se o něm dozvědí i Vaši kamarádi. Děkuji!“
Share on FacebookShare on Google+Tweet about this on TwitterShare on TumblrEmail this to someone