Skripta OVI

Struktura webové stránky

V HTML se poznámky píšou pomocí značek <!-- -->. Tyto poznámky se v prohlížeči nezobrazují a slouží pouze pro dokumentaci kódu.

Povinné elementy HTML stránky

HTML webová stránka vždy musí obsahovat tyto elementy (bez nich nebude fungovat správně):

  • <!DOCTYPE html>: Deklarace typu dokumentu. Informuje prohlížeč, že dokument je psán v HTML5.
  • <html></html>: Základní prvek, který obaluje celý dokument.
  • <head></head>: Hlavička stránky. Obsahuje meta informace o dokumentu, styly, skripty apod.
  • <body></body>: Tělo stránky. Obsahuje samotný obsah webu.
Důležité meta tagy v <head>
  • <meta charset="utf-8">: Sada znaků, kterou je napsán HTML soubor. Pro podporu českých znaků můžeme použít UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Nastavení responzivního designu. Přizpůsobí webové stránky různým zařízením.
  • <meta name="description" content="Popis stránky">: Krátký popis stránky. Tento obsah se zobrazuje ve výsledcích vyhledávání.
Nepovinné elementy v headu

Bez nich web bude fungovat, ale plní důležitou funkci:

  • <title></title>: Název webu. Zobrazuje se na liště prohlížeče a ve výsledcích vyhledávání. Je důležité, aby obsahoval klíčová slova.
  • <style></style>: Vnitřní CSS styly (méně doporučováno pro větší projekty, kde jsou výhodnější externí styly).
  • <link rel="stylesheet" href="styl.css">: Externí CSS styly. (jsou napsané v souboru .css)
  • <link rel="icon" href="favicon.png" type="image/png">: Ikona webu (favicona). Zobrazuje se na kartě prohlížeče a ve vyhledavači.
  • <script></script>: JavaScript kód vložený přímo do hlavičky nebo těla stránky.
  • <script src="script.js"></script>: Odkaz na externí JavaScript soubor. Doporučeno pro organizaci větších projektů. (Externí soubor s koncovkou .js)

Základní struktura stránky:

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Popis webu">
    <title>Název stránky</title>
    <link rel="stylesheet" href="styl.css">
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <!-- obsah webu -->
</body>
</html>
Elementy layoutu (rozložení stránky) v <body>
  • <header></header> Záhlaví.
    Obsahuje logo, název webu, hlavní menu apod.
  • <nav></nav> Navigace.
    Obsahuje odkazy na různé části webu.
  • <main></main> Hlavní obsah stránky.
    Obsahuje hlavní texty, obrázky nebo videa.
  • <footer></footer> Zápatí.
    Obsahuje informace jako kontakty, copyright nebo odkazy na sociální sítě.
  • <article></article> Článek.
    Používá se pro samostatné bloky obsahu.
  • <section></section> Sekce.
    Skupina obsahově příbuzných prvků.
  • <aside></aside> Boční panel.
    Používá se pro doplňkové informace, jako jsou reklamy nebo odkazy.
  • <div></div> Obecný kontejner. (Division)
    Pomáhá rozdělit stránku na jednotlivé části.

Každá webová stránka nemusí obsahovat přesně tyto elementy, ani je nemusí mít rozložené jako v následujícím příkladu. Nicméně jejich označení může ulehčit práci elektronickým čtečkám, nebo vyhledavačům.

Příklad struktury <body>

<body>
    <header>
        <h1>Nadpis stránky</h1>
        <nav>
            <ul>
                <li><a href="#domu">Domů</a></li>
                <li><a href="#o-nas">O nás</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="uvod">
            <h2>Úvod</h2>
            <p>Popis webu nebo aktuální informace.</p>
        </section>
        <article>
            <h2>Článek 1</h2>
            <p>Obsah článku.</p>
        </article>
        <article>
            <h2>Článek 2</h2>
            <p>Obsah článku.</p>
        </article>
    </main>
    <aside>
        <h3>Boční panel</h3>
        <p>Doplňkové informace.</p>
    </aside>
    <footer>
        <p>2025 Název webu. Všechna práva vyhrazena.</p>
    </footer>
</body>

admin

, , ,