Najmenší html dokument

Najmenší HTML dokument

Namenší HTML dokument je najmenší html dokument, zapísaný podľa syntaktických pravidiel jazyka HTML.

Vyzerá takto:

<!DOCTYPE html>
<html lang="sk">

<head>
  <meta charset="utf-8">
  <title>Minimálny html dokument - ukážka</title>
</head>

<body>
</body>

</html>

Keď tento text pošleme do W3 Validátora, mal by sa ukázať zelený oznam "No errors".

Časti html dokumentu

<!DOCTYPE html>

Táto špeciálna značka hovorí, že dokument je zapísaný v najnovšej verzii jazyka html. V prípade, že by za slovom html boli ešte nejaké ďalšie informácie, odkazujú na konkrétnu verziu (napr. staršíu).

<html lang="sk">
</html>

Táto značka vymedzuje začiatok a koniec html dokumentu. Atribút lang v otváracej značke definuje jazyk, v ktorom je obsah dokumentu napísaný.

<head>
  <meta charset="utf-8">    
  <title>Minimálny html dokument - ukážka</title>
<head>

V hlavičke dokumentu sa nachádzajú informácie opisujúce obsah dokumentu. Povinná je informácia o názve dokumentu, označená značkami title. Nepovinná je informácia o použitom kódovaní znakov (<meta charset="...">), ktorá zabezpečuje správne zobrazenie znakov s diakritikou.

Kódovanie Unikód (utf-8) je najrozšírenejšie kódovanie znakov, obsahuje kódy pre znaky zo všetkých svetových jazykov (latinka, cyrilika, východné jazyky, symboly a emoji, ...).

Neskôr sem vložíme aj ďalšie informácie. Všetky tieto informácie sa zobrazujú mimo hlavného okna prehliadača.

Všimnite si, ako je značka title "vnorená" do head (poradie jednotlivých značiek).

<body>

</body>

Značky body obklopujú viditeľnú časť stránky (v hlavnom okne prehliadača). Je to vlastná stránka, ktorú vidí používateľ. Sem budeme písať vlastný obsah stránky.

Staršia verzia tejto kapitoly.

Údaje v HTML dokumente (stránke) možno rozdeliť na dva druhy: obsah a metainformácie.

Preto má každá html stránka svoju pevne danú štruktúru, ktorú voláme minimálny html dokument.

Túto štruktúru si teraz postupne vybudujeme.

1. Vytvoríme prázdny textový súbor `stranka.html` a doň zapíšeme obsah stránky:

  <h1>Vitaj, svet!</h1>
  <p>Lorem ipsum dolor sit amet.</p>

2. Obsah stránky "vnoríme" do značky `body`:

<body>
  <h1>Vitaj, svet!</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</body>

Značka body tú časť prehladača, v ktorej sa zobrazuje samotná web stránka.

3. Nad sekciu s obsahom umiestnime hlavičku na metainformácie:

<head>
</head>

<body>
  <h1>Vitaj, svet!</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</body>

- Metainformácie = upresňujúce informácie o tom, čo a akým spôsobom je v dokumente zapísané a ako to môžeme použiť).

4. Hlavička obsahuje povinnú značku `title`:

<head>
  <title>Jojo Mrkvička - osobná stránka</title>
</head>

<body>
  <h1>Vitaj, svet!</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</body>

Názov dokumentu (title) sa zobrazuje na table záložiek v prehliadači.
Zobrazujú ho aj webové vyhľadávače (Google, Bing, a iné) vo výsledkoch vyhľadávania.

5. Do hlavičky treba pridať aj informáciu o kódovaní stránky:

<head>
  <meta charset="utf-8">
  <title>Jojo Mrkvička - osobná stránka</title>
</head>

<body>
  <h1>Vitaj, svet!</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</body>

Kódovanie zabezpečí zobrazenie znaky stránky v správnom kódovaní znakov.
Každé zariadenie môže vnútorne používať iné kódovanie znakov.
Stáva sa, že prehliadač nevie, ktoré kódovanie zvoliť na správne zobrazenie znakov webstránky.
To sa najčastejšie prejaví nesprávnym zobrazením znakov s diakritikou (mäkčene a dĺžne).

6. Obsah a hlavičku "obalíme" značkou `html` s nastaveným jazykovým kódom:

<html lang="sk">

<head>
  <meta charset="utf-8">
  <title>Jojo Mrkvička - osobná stránka</title>
</head>

<body>
  <h1>Vitaj, svet!</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</body>

</html>

ako jazyk môžeme použiť dvojpísmenové označenie jazyka z ISO štandardu
označenie jazyka môžeme rozšíriť aj o ISO kód krajiny, napr. en-GB, en-US, pt-BR a pod.

7. Napokon pridáme označenie verzie jazyka html:

<!DOCTYPE html>
<html lang="sk">

<head>
  <meta charset="utf-8">
  <title>Jojo Mrkvička - osobná stránka</title>
</head>

<body>
  <h1>Vitaj, svet!</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</body>

</html>

Označenie <!DOCTYPE html> znamená prosto najnovšia verzia (html 5)

Poznámky na záver

tieto značky musí obsahovať každý správne zapísaný html dokument (sú povinné, aby všetky inforácie vedel počítač správne prečítať)
uľahčujú pri strojovom spracovaní správne prečítať a ohodnotiť jednotlivé časti vášho dokumentu
správnosť zápisu overte pomocou online služby W3C Markup Validator Service

Najmenší html dokument