HTML5
Základy HTML

Z předchozího již víme, že webové stránky neboli HTML dokumenty jsou obyčejné textové soubory. Textový soubor pak obsahuje koktejl namíchaný jednak ze samotného textu a druhak ze speciálních značek, které všemu dávají tu správnou chuť a barvu – určují význam jednotlivých částí textu.

Pro vytvoření naší první stránky proto budeme potřebovat jednoduchý textový editor. V prostředí Windows nám pro tyto účely bohatě poslouží např. program Poznámkový blok (Notepad). Spustíme jej a napíšeme v něm následující text:

<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.

Abychom si napsaný text mohli prohlédnout v prohlížeči, musíme jej nejprve uložit do souboru. V Poznámkovém bloku tedy vybereme z menu příkaz Soubor → Uložit jako…. Jako jméno souboru můžeme uvést v podstatě cokoliv, přípona souboru by však měla být .html. My naši pokusnou stránku uložíme do souboru pokus.html.

Nyní je správný čas pro spuštění prohlížeče. Spustíme tedy náš oblíbený prohlížeč, ať už je to Firefox, Chrome, Internet Explorer, Opera, Safari nebo nějaký jiný. V menu zvolíme příkaz Soubor → Otevřít a vybereme dříve uložený soubor pokus.html a výběr potvrdíme. Ve většině operačních systémů místo toho stačit kliknout na jméno souboru s HTML stránkou v nějakém správci souborů (např. v Průzkumníku) – stránka se automaticky otevře v prohlížeči. Také můžeme soubor se stránkou přetáhnout do okna prohlížeče myší.

Náš první smělý pokus by se měl v prohlížeči zobrazit podobně jako na obrázku 5 – „Zobrazení naší první stránky v Internet Exploreru“.

V případě, že zobrazení je nesprávné, musíme zkontrolovat zápis naší první stránky v Poznámkovém bloku. Opravíme případné překlepy, soubor znovu uložíme a v prohlížeči stiskneme tlačítko pro znovunačtení stránky – většinou je označeno nápisem Obnovit, nebo Aktualizovat, případně je možné překreslení vyvolat stiskem klávesy F5. Pokud jsme vše opravili správně, stránka by měla být v pořádku.

Nyní se podívejme na význam jednotlivých značek, které jsme použili při zápisu naší první stránky. Vžitý termín pro tyto značky je tag. Tagy určují význam textu, který je mezi ně uzavřen:

Jak vidíme, každý tag se skládá ze znaku `<' (symbol menší než), svého jména a znaku `>' (symbol větší než). Obvykle se tagy vyskytují v párech – příslušný ukončovací tag má před svým jménem ještě znak `/' (lomítko). V našem příkladě <h1> sdělilo prohlížeči, že následující text je nadpis, a </h1> vyznačilo konec tohoto nadpisu.

Celému textu mezi počátečním a ukončovacím tagem včetně těchto tagů se říká element. Někdy budeme o elementu hovořit i ve smyslu tagu, který se obecně používá k nějakému účelu (např. „element h1 slouží k vyznačení nadpisu první úrovně“). Text uzavřený mezi tagy je pak obsah elementu.

Z ukázky je rovněž patrné, že některé tagy se nemusí vyskytovat v párech – např. <p>. Jedná se o tagy, kde si místo správného výskytu ukončovacího tagu umí prohlížeč domyslet sám. Dojde mu tedy, že když v textu odstavce narazí na tag pro začátek odstavce, musí nejprve ten předchozí odstavec ukončit.