Lekce 1 - Základní struktura HTML
Vítejte u první lekce kurzu HTML 5, kde se seznámíme se strukturou HTML dokumentu.
Úplný úvod do HTML zde nebude, ten je už totiž popsán v článku první tvorba webové stránky a bylo by zbytečné to psát znovu. Jen připomenu, HTML není programovací jazyk, je to pouze značkovací jazyk pro tvorbu webu.
V tomto kurzu tedy můžeme najít všechny HTML tagy a jejich atributy,
které v jiných kurzech nejsou ani zmíněny. Slouží tedy k probrání HTML
od A do Z. HTML je také spojené se stylováním
(CSS), bez CSS by stránky vypadaly například jako prázdné kresby bez
barvy. V tomto kurzu se CSS zabývat nebudeme, avšak si párkrát nějaký CSS
kód uvedeme, ať máme nějaký příklad vzhledově pěkný 
Struktura HTML
HTML dokument se skládá z tagů, například <head> nebo
<body>, je jich však mnohem víc a všechny si je také
projdeme. Tagy nemůžeme psát jak se nám zlíbí. Když například vložíme
následující kód do prázdného souboru s koncovkou HTML, soubor bude
nevalidní:
<body>Moje první stránka</body>
Pokud však zkontrolujeme prvek stránky (pravé kliknutí na webovou stránku → Zkontrolovat prvek / Revize prvku), uvidíme následující okno:
Můžeme si všimnout, že náš prohlížeč automaticky opravil dokument, avšak onen dokument je stále nevalidní a prohlížečem je soubor na serveru samozřejmě neupravený. Takovou validaci HTML dokumentu nebo přímo kódu můžeme validovat přes online nástroj přímo od w3 konsorcia.
Aby byl dokument validní a prohlížeč mu správně rozuměl (a správně ho i zobrazil), musí mít určitou strukturu. Ta je poměrně jednoduchá a skládá se z několika základních tagů. Podívejme se nejprve na následující obrázek:
<!DOCTYPE>
Tag doctype není ve skutečnosti tag, protože je nepárový a
není uzavřený. Umožňuje nastavit typ dokumentu a měl by být prvním
elementem naší webové stránky. Ve starším HTML 4 byl zápis poněkud
komplikovaný:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Nyní se jeho zápis velmi zjednodušil a je následující:
<!DOCTYPE html>
Kód výše prohlížeči sdělí, že zobrazuje HTML 5 dokument.
<html>
Tag html obaluje celý HTML dokument, který je dále rozdělen
na hlavičku (ta obsahuje informace hlavně pro prohlížeč) a tělo, kde je
uložen fyzický obsah dokumentu:
<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Můžeme u něj uvést atributy:
manifest- Obsahuje umístění manifestu pro cache. HTML 5 totiž přichází s možností cachování obsahu stránky pro zrychlení načítání.lang- Specifikování jazyka stránky nebo nějakého elementu.xmlns- Pokud si přejeme používat raději XML syntaxi HTML 5 (ne HTML), můžeme napsat doctype následujícím způsobem:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
Asi je z kódu poznat, že atribut je vždy uvnitř tagu. Za atributem následuje rovnítko a poté uvozovky s hodnotou, kterou chceme, aby atribut měl.
manifest
Atribut manifest obsahuje umístění manifestu pro cache,
který se už ani moc nepoužívá. Místo něj by se měly použít tzv.
service workers. HTML 5 totiž přichází s možností cachování obsahu
stránky pro zrychlení načítání. Toto cachování se určitě hodí pro
webové stránky s delšími články. Doporučená přípona souboru manifestu
je .appcache.
Udělejme si menší ukázku. Nejdříve si deklarujeme manifest např. pod
názvem nacist.appcache:
CACHE MANIFEST obrazky/obrazek.jpg
Poté si vytvoříme HTML soubor, který bude využívat manifest:
<!DOCTYPE html> <html manifest="nacist.appcache"> <head> <title>Stránka používající manifest</title> <meta charset="UTF-8"> </head> <body> <p>Tuto stránku je možné prohlížet po zacachování v offline režimu.</p> <img src="obrazky/obrazek.jpg" alt="Obrázek" /> </body> </html>
Pokud se návštěvníkovi stránka uložila do cache, může si ji poté zobrazit v offline režimu, kdy se mu načte i obrázek, který jsme definovali v manifestu. Krom obrázků můžeme cachovat např. JS či CSS soubor.
lang
Pokud si tedy minulý kód vložíme do online validátoru, zjistíme, že je
v pořádku. Zobrazí se nám pouze varování, že tag
<html> neobsahuje jazyk stránky, neboli atribut
lang a také, že místo cachování pomocí manifestu máme
využít jinou alternativu. Uvedeme si tedy validní strukturu stránky bez
cachování:
<!DOCTYPE html> <html lang="cs"> <head> <title>itnetwork.cz - programátorská sociální síť</title> </head> <body> <h1>itnetwork.cz</h1> <p>Vítejte na programátorské sociální síti!</p> </body> </html>
tak nám validátor nevypíše žádná varování a dokument bude naprosto
validní. Atribut lang se dá použít na jakýkoliv element. Pokud
máme tedy stránku v češtině, dáme atribut lang="cs" do tagu
<html>. Pokud tam budeme mít například odstavec v
angličtině, hodí se jazyk specifikovat.
Je k něčemu dobrý?
Atribut lang většina developerů využije pouze u tagu
<html>. U jiných tagů se na to zapomíná nebo je to spíš
na obtíž. Tento atribut je však důležitý například pro prohlížeč,
který díky tohoto tagu určí jazyk stránky a taková kontrola pravopisu bude
fungovat ve formulářových polí správně. Vyhledávače a i překladač od
Googlu také hledí na tento atribut. Překladač má sice vlastní detekci
jazyka, může se však v některých příkladech splést (například cizí
slova v odborném článku).
Pro slovenský jazyk bude atribut lang="sk".
<head> a
<title>
Hlavička je první částí HTML dokumentu a obsahuje informace hlavně pro
prohlížeč. Povinný je párový tag <title>, který
specifikuje titulek stránky. Každá HTML stránka by ho měla v hlavičce
obsahovat a je velmi důležitý pro vyhledávače z hlediska SEO. Titulek by měl obsahovat klíčová slova a
zobrazí se jako nadpis záložky v prohlížeči. Tag
<title> se vkládá do párového tagu
<head> a je v dokumentu obsažen pouze jednou.
Základní HTML hlavička by mohla vypadat takto:
<head> <title>Titulek stránky</title> </head>
Hlavička však musí být uvnitř tagu
<html>, aby byl soubor validní. Pro jednoduchost kódu však
pokaždé celý zdrojový kód uvádět nebudeme.
Titulek se nám zobrazí v prohlížeči v záložce takto:
<meta>
Tag <meta> poskytuje tzv. metadata. Jedná se o informace
vložené do HTML dokumentu, které se nezobrazí uživateli, ale jsou určeny
zejména vyhledávačům. Jistě si domyslíte, že jsou důležité pro SEO optimalizaci stránky.
Tag <meta> musí být vždy umístěn v hlavičce stránky
a je nepárový. Kromě vyhledávačů ho používají i webové prohlížeče a
webové služby.
Atributy
Tag má následující atributy:
- charset - Specifikuje znakovou sadu dokumentu. Nejčastěji
obsahuje hodnotu
UTF-8. Jedná se o nový HTML 5 atribut, který zjednodušuje minulou specifikaci znakové sady. - content - Specifikuje parametr pro atributy
nameahttp-equiv.- http-equiv - Umožňuje simulovat hlavičku
httpodpovědi. Dříve se používal k nastavení kódování. - name - Specifikuje název metadat (viz. ukázky níže)
- http-equiv - Umožňuje simulovat hlavičku
Ukázka použití
Autora webové stránky určíme takto:
<meta name="author" content="Jan Novák" />
Dále můžeme vyhledávačům předat klíčová slova, kterých se obsah webu týká (skoro všechny webové prohlížeče je již nepoužívají):
<meta name="keywords" content="ITnetwork, HTML, tutoriál" />
Nejdůležitější je však popis stránky pro vyhledávače:
<meta name="description" content="Tutoriály pro tvorbu webu v HTML a CSS." />
Přes atribut http-equiv lze např. nastavit automatické
obnovení stránky každých 30 sekund:
<meta http-equiv="refresh" content="30" />
Další dva názvy metadat jsou generator a
application-name. V prvním případě je v content
název aplikace, která generovala HTML kód (např. Microsoft Frontpage). V
druhém případě je to název aplikace, kterou webová stránka reprezentuje,
např. ITnetwork.
Zatím jsme si neprobrali link, style,
base a další, ale na ně přijde řada příště 
V další lekci, Základní struktura HTML II. část, budeme pokračovat se strukturou HTML dokumentu.
Ukážeme si tagy <script>, <style>,
<link>, <base> a
<body>.
