Skripta OVI

Element body

Tag <body> je jedním ze základních HTML elementů, který obsahuje veškerý viditelný obsah webové stránky

Tento element má několik atributů, které umožňují přizpůsobit vzhled a chování webové stránky.

Atributy tagu <body>

  • bgcolor: Nastavuje barvu pozadí stránky.
    Hodnota může být zadána jako název barvy (např. red), hexadecimální kód (např. #FF0000), nebo v RGB/rgba formátu.
    Tento atribut je však zastaralý a doporučuje se používat CSS (background-color).
  • background: Umožňuje nastavit obrázek jako pozadí stránky. Odkaz na obrázek může být absolutní nebo relativní cesta.
    I tento atribut je zastaralý; moderní přístup je využití CSS vlastnosti background-image.
  • text: Určuje barvu textu na stránce.
    Zastaralý atribut – doporučuje se použít CSS vlastnost color.
  • link: Definuje barvu odkazů, které ještě nebyly navštíveny.
    Moderní weby tuto úpravu provádí pomocí CSS selektoru a:link.
  • alink: Určuje barvu aktivního odkazu, tedy odkazu, na který uživatel právě kliká.
    Tento atribut je také zastaralý a nahrazuje ho CSS selektor a:active.
  • vlink: Nastavuje barvu odkazů, které už uživatel navštívil. Používá se alternativně k CSS selektoru a:visited.

Atributy body jsou tedy považované za zastaralé (neumožňují uživateli jednoduše měnit vzhled stránky např. na denní a noční režim), proto se běžně nahrazují kaskádovými styly CSS.

Nastavení CSS vlastností <body>

Příklad nastavení <body>

<style>
    body {
        background-color: #f0f0f0; /* Nastaví šedé pozadí */
        background-image: url('pozadi.jpg'); 
        /* Obrázek na pozadí */
        color: #333; /* Barva textu */
    }
    a:link {
        color: blue; /* Barva nenavštíveného odkazu */
    }
    a:visited {
        color: purple; /* Barva navštíveného odkazu */
    }
    a:active {
        color: red; /* Barva aktivního odkazu */
    }
</style>

Zásady tvorby <body>

Přístupnost (Accessibility):

  • Dostatečný kontrast mezi textem a pozadím, aby byla stránka čitelná i pro osoby se zrakovým postižením.
  • Používejte sémantické HTML a zajištěte, že stylování neomezuje čitelnost na zařízeních s podporou čteček obrazovky.

Responzivní design:

  • Používejte media queries v CSS pro optimalizaci zobrazení stránky na různých zařízeních (mobilní telefony, tablety, desktop).
  • Přizpůsobte obrázky na pozadí, aby se dynamicky škálovaly podle velikosti obrazovky (background-size: cover).

Performance:

  • Snažte se minimalizovat velikost obrázků použitých jako pozadí a optimalizujte je pro web, aby se zkrátila doba načítání stránky.
  • Pro složité styly používejte externí soubory CSS, což usnadňuje cache a zrychluje načítání.

    Záložní barvy

    • Pokud používáte obrázky na pozadí, nezapomeňte nastavit i záložní barvu pomocí background-color pro případ, že obrázek není k dispozici (např. kvůli pomalému připojení nebo blokování obsahu).

    Použití tříd a ID

    • Pro snadnou správu stylů přiřazujte elementu <body> třídy nebo ID podle konkrétních potřeb stránky.
    <body id="homepage">

    admin

    , ,