díl 4. - struktura HTML a XHTML dokumentu

HTML a XHTML

V minulých dílech tohoto seriálu jsme si řekli něco o základních prvcích programování ve značkovacích jazycích, tj. značkách a teď se společně podíváme blíže jak je vlastně takový takový XHTML nebo HTML dokument postaven.

Struktura webu

Již dříve jsme si řekli, že HTML nebo XHTML dokument získáme tak, že sepíšeme program www stránky do textového dokumentu a ten uložíme s příponou .html na webový server. Důležité je však také pojmenování webových souborů. Pokud chceme, aby se nám obsah webové stránky zobrazil v prohlížeči po zadání naší webové adresy druhého řádu do prohlížeče, musíme náš vstupní soubor pojmenovat index.html. Jsou možná i jiná pojmenování, ale pro začátek nám stačí toto. Soubor index.html totiž 99% webových serverů bere jako defaultní obsah webových stránek a ihned po zjištění požadavku klienta na zobrazení dané stránky v zadaném URL nebo adresáři hledá v umístění tento soubor. Pokud jej najde odešle jej klientovi (prohlížeči) a ten jej zobrazí. Pokud se nejedná o jednostránkouvou www prezentaci je potřeba soubor index.html provázat odkazy s ostatními soubory webu, které by jinak návštěvník nenašel, pokud by o nich předem nevěděl a nezadal do prohlížeče přímo jejich umístění.

Zjednodušeně řečeno, pokud do prohlížeče zadáme adresu http://www.shineweb.cz zobrazí se nám obsah souboru http://www.shineweb.cz/index.html aniž bychom to museli psát celé i s index.html

Struktura html a xhtml dokumentu

Soubor.html má definovánu svou vnitřní strukturu. Musí se skládat z těchto náležitostí:

definice dokumentu - doctype
hlavička - head
tělo - body

Definice dokumentu - doctype

Defince dokumentu, tzv. doctype v podstatě určuje jakým jazykem a kterou jeho verzí je webová stránka napsána. Je tak jednoznačně určeno prohlížeči, kterou programovou sadu má použít pro překlad značkovacího jazyka do námi srozumitelné podoby. Doctype se uvádí vždy na prvním řádku dokumentu. Definice dokumentu ve své podstatě není součástí HTML dokumentu. Zpracovává se jako první a jeho značka není párová a jako jediná se ani nemusí ukončovat. Doctype existuje celá řada a podrobněji se jim budeme věnovat v některém z příštích dílů.
Příklad:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Po definici dokumentu doctype musí v html nebo xhtml dokumentu následovat zahájení html dokumentu. Jedná se o párový tag, který je ukončen až zase na úplném konci dokumentu na posledním řádku. Mimo určení zahájení zpracovávání souboru jako html určuje jazyk a odkazuje na normu definovanou organizací W3C.
Příklad:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs-cz" lang="cs-cz" dir="ltr">
.
.
.
</html>

Hlavička HTML dokumentu - head

Hlavička html nebo xhtml dokumentu je část webové stránky, která není na první pohled viditelná. Je ohraničená tagem head a obsahuje další tagy, jako je např. velmi důležitý tag title. Některé z tagů uzavřených v hlavičce tvoří svými atributy tzv. informace o stránce zobrazitelné např. kliknutím pravým tlačítkem myši na plochu stránky pod položkou "zobrazit informace o stránce" nebo "vlastnosti" v nabídce. Blíže tedy specifikují a kategorizují www stránku. Text uzavřený v tagu title lze dokonce spatřit opravdu na první pohled v modré liště úplně na vršku Vašeho prohlížeče. Dalšími tagy mezi tagem head mohou být tagy pro připojení dalších souborů, jako jsou externí kaskádové styly, javascripty a další nebo dokonce tagy pro přímé vepsání kaskádových stylů nebo scriptů.
Tag head nemá žádné atributy.
Příklad:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="tvorba, www, webových, stránek" />
  <meta name="description" content="Tvorba www stránek na zakázku." />
  <title>Tvorba www stránek - ShineWeb</title>
  <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <link rel="stylesheet" href="/css/styl.css" type="text/css" />
  <script type="text/javascript" src="/javascript.js"></script>
</head>

Tělo dokumentu - body

jedná se o párový tag následující ihned po uzavření hlavičky. Tag body obsahuje celý viditelný obsah www stránky Příklad:

<body>
celý obsah www stránky
</body>

Shrnutí

Předchozí příklady do sebe zapadnou následujícím způsobem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs-cz" lang="cs-cz" dir="ltr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="tvorba, www, webových, stránek" />
  <meta name="description" content="Tvorba www stránek na zakázku." />
  <title>Tvorba www stránek - ShineWeb</title>
  <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <link rel="stylesheet" href="/css/styl.css" type="text/css" />
  <script type="text/javascript" src="/javascript.js"></script>
</head>
<body>
celý obsah www stránky
</body>
</html>