Kapitel druckenKapitel drucken

Úloha 1 – Základní struktura HTML dokumentu

Úvod k úloze

Každá webová stránka stojí na pevných základech – na správně vystavěné HTML kostře dokumentu. Bez ní by prohlížeč nevěděl, jak správně zobrazit obsah, a mohly by vzniknout chyby nebo nekompatibility. Proto je důležité naučit se tvořit základní strukturu dokumentu HTML a rozumět, proč tam jednotlivé části patří. Tento základ budete používat pokaždé, když budete psát web – ať už půjde o jednoduchý formulář, nebo o složitou aplikaci.

Teorie a principy

Kostra HTML dokumentu obsahuje několik klíčových prvků:

  1. Deklarace typu dokumentu (<!DOCTYPE html>)

    • Informuje prohlížeč, že jde o dokument HTML5.

    • Musí být vždy na úplném začátku souboru.

  2. Tag <html>

    • Obaluje veškerý obsah webové stránky.

    • Má otevírací <html> a uzavírací </html>.

    • Doporučuje se přidat atribut lang="cs" pro správné určení jazyka.

  3. Sekce <head>

    • Obsahuje metadata (název stránky, kódování, odkazy na styly nebo skripty).

    • Nikdy se v ní nezobrazuje přímo obsah stránky.

  4. Sekce <body>

    • Zde se nachází vlastní obsah stránky (texty, obrázky, odkazy, formuláře…).

    • To, co uživatel opravdu uvidí v prohlížeči.

Praktické příklady kódu

Minimální validní HTML dokument

  • <!DOCTYPE html> říká, že jde o HTML5.

  • <meta charset="UTF-8"> zajistí správné zobrazení českých znaků.

  • <title> nastaví název stránky (viditelný na záložce prohlížeče).

Časté rozšíření hlavičky

  • viewport je důležitý pro správné zobrazení na mobilech.

Typické chyby / záludnosti

  • Chybějící <!DOCTYPE html> – prohlížeč pak může přepnout do tzv. „quirks mode“, kde se chová jinak, než očekáváte.

  • Neuzavřené tagy – např. <body> bez </body> může rozhodit celou stránku.

  • Záměna <head> a <body> – do hlavičky nepatří texty nebo obrázky.

  • Zapomenutý atribut lang – není chyba, ale je dobrý zvyk ho uvádět (pomáhá vyhledávačům a čtečkám).

Shrnutí

  • HTML dokument vždy začíná deklarací <!DOCTYPE html>.

  • Obsahuje kořenový prvek <html>, uvnitř kterého jsou dvě hlavní části:

    • <head> s metadaty,

    • <body> s obsahem pro uživatele.

  • Každý otevřený tag musí být také správně uzavřen.

  • Správná kostra dokumentu je nezbytným základem pro všechny další úkoly v HTML, CSS i JavaScriptu.