Struktura a vizualizace webové stránky

Struktura webové stránky

Struktura webové stránky je logické a sémantické uspořádání jejích částí. Jinak řečeno se jedná o kostru stránky, do které je zasazen další obsah.

Strukturu webové stránky lze přirovnat ke struktuře novin, případně časopisů. Stejně jako noviny mají hlavičku s názvem a datem, obsah rozdělený do článků, rubrik a sekcí, a nakonec zápatí s informacemi o vydavateli, i webová stránka má své části. Každá část má svůj účel a dohromady tvoří přehlednou a logickou strukturu, která návštěvníkům usnadňuje orientaci a hledání informací.

Strukturální elementy

Základní strukturu webové stránky tvoříme pomocí strukturálních elementů. Těmito elementy jsou:

• <main>

  Hlavní obsah stránky, kam se umisťuje primární text, obrázky a multimédia, tedy část, která je pro návštěvníka nejdůležitější. Na stránce smí být pouze jeden viditelný element main.

• <header>

  Hlavička stránky, kde se obvykle nachází logo, název stránky a hlavní navigační menu.

• <nav>

  Navigační blok, kde jsou odkazy na hlavní části webu, usnadňující pohyb uživatele mezi stránkami.

• <article>

  Samostatný článek nebo příspěvek, například blogový příspěvek, tisková zpráva nebo novinka.

• <section>

  Sekce, která logicky rozděluje obsah do tematických bloků, například jednotlivé kapitoly nebo tematické části stránky.

• <aside>

  Element určený pro obsah, který je vedlejší nebo doplňkový k hlavnímu obsahu stránky, například boční panel, tipy, odkazy nebo reklamní bloky.

• <footer>

  Patička stránky, obsahující například kontaktní informace, odkazy na právní upozornění nebo autorská práva.

Podívejme se nyní na pár webových stránek a zkusme si určit základní strukturální elementy. Konkrétně se podíváme na stránky katedry informatiky, letiště Václava Havla a wikipedie.

Další elementy

Pro vytvoření kompletní webové stránky si pouze se strukturálními elementy nevystačíme. Do základní struktury stránky (kostry) musíme doplnit další HTML elementy, které popíší obsah.

• <p>

  Odstavec textu. Používá se k oddělení souvislých textových bloků tak, aby byl obsah přehledný a sémanticky správně strukturovaný.

• <a>

  Hypertextový odkaz. Pomocí atributu href určuje cílovou adresu, na kterou se uživatel po kliknutí přesměruje.

• <img>

  Obrázek na stránce, může mít více formátů. Cesta k obrázku je určena atributem src, alternativní popis obrázku pomocí atributu alt.

• <h1> až <h6>

  Nadpisy různé úrovně, které dávají stránce hierarchii a pomáhají uživatelům i vyhledávačům orientovat se v obsahu. h1 je nejvyšší úroveň, obvykle hlavní název stránky, a h6 nejnižší, pro menší podnadpisy.

• <hgroup>

  Element určený k seskupení více nadpisů (například nadpis a podnadpis) do jednoho logického celku.

• <ul> a <li>

  Jedná se o seznam s odrážkami. HTML element li představuje jednotlivou položku seznamu.

Kromě těchto sémantických elementů existují generické kontejnery <div> a <span>, které nemají samy o sobě význam, ale používají se pro seskupování nebo stylování obsahu.

CSS box model

CSS box model je základní stavební jednotka každého HTML elementu, který se zobrazuje v prohlížeči. Každý element totiž není jen samotný obsah – text, obrázek nebo odkaz – ale vždy tvoří obdélníkový box, který můžeme pomocí CSS ovlivňovat.

Box se skládá ze čtyř hlavních částí:

• Content

  Samotný obsah boxu, například text nebo obrázek.

• Padding

  Prostor mezi obsahem a hranicí boxu.

• Border

  Rámeček kolem boxu.

• Margin

  Prostor mezi tímto boxem a okolními elementy, který určuje jeho odstup od ostatních prvků na stránce.

Díky box modelu můžeme přesně určovat velikost, prostor a vzhled jednotlivých prvků, což je základem pro jejich umístění na stránce.

Pojďme se nyní podívat na to, jak s ním pracovat.

Rámeček

Rámeček slouží k vizuálnímu oddělení elementu od jeho okolí, případně k jeho zvýraznění. Můžeme mu nastavit tloušťku, styl (spojitá, přerušovaná nebo tečkovaná čára) a barvu.

.simple-border { border: 1px solid gray; }

Každou stranu rámečku můžeme také nastavit zvlášť, pomocí vlastností border-top, bottom, right a left.

Vnitřní okraj

Vnitřní okraj (padding) je prostor mezi obsahem prvku a jeho rámečkem. Slouží k tomu, aby text nebo jiný obsah nebyl nalepený přímo na okraj, vytváří tedy místo navíc. Jeho použití je přímočaré. Nadefinujeme, kde všude chceme mezeru mít (top, right, bottom, left) a určíme její velikost.

.simple-space {padding: 20px 15px 20px 15px;}

Vnější okraj

Vnější okraj (margin) je prostor mezi rámečkem prvku a venkovní hranou elementu, který ho odděluje od ostatních prvků na stránce. Slouží tedy k tomu, aby mezi jednotlivými prvky na stránce vznikl dostatečný odstup. Jeho použití je jako u paddingu přímočaré: nadefinujeme, kde chceme mezeru mít (top, right, bottom, left), a určíme její velikost.

.simple-space {margin: 20px 15px 20px 15px;}

Kromě zadání přesné velikosti okraje lze použít hodnotu auto. To znamená, že prohlížeč sám nastaví velikost okrajů. Toto nastavení lze použít k vycentrování elementu na stránce – pokud má element menší šířku než jeho rodič, prohlížeč rovnoměrně rozdělí volný prostor vlevo a vpravo, a prvek tak stojí uprostřed.

Zobrazení a viditelnost elementu

V CSS se zobrazení elementu určuje vlastností display. Rozlišujeme tři základní typy zobrazení:

• block (blokový)

  Zabírá celou šířku rodiče a před i za sebou automaticky zalamuje řádek. Vlastnosti margin i padding u něj fungují standardně. Lze mu nastavovat jak šířku, tak výšku. Typickými příklady blokových elementů jsou například div, p nebo nadpisy (h1–h6).

• inline (řádkový)

  Zabírá jen šířku obsahu a nezalomí řádky. Margin-top a margin-bottom je ignorován. Padding-top a padding-bottom sice ignorovány nejsou, ale neovlivní okolní prvky. Nelze mu nastavovat výšku ani šířku. Typickými příklady řádkových elementů jsou span nebo a.

• inline-block (blokový-řádkový)

  Chová se jako blokový prvek uvnitř řádku – lze mu nastavovat šířku i výšku, ale sám o sobě nezpůsobí zalomení řádku. Typickým příkladem je například element button.

Viditelnost elementu

Viditelnost elementu můžeme nastavit pomocíá vlastností display nebo visibility. Máme opět tři základní typy:

• display: none

  Nevykreslí ani element, ani jeho potomky. Element ze stránky úplně "zmizí".

• display: contents

  Nevykreslí element, ale vykreslí jeho potomky. Toto zobrazení má ale horší podporu v prohlížečích.

• visibility: hidden

  Nevykreslí element (ani jeho potomky), vykreslí ale jeho box model. Element sice na stránce není vidět, stále ale zabírá místo, jako kdyby na stránce byl.

Obsah elementu

Velikost části určené pro obsah lze nastavit pomocí vlastností width, height, min-width, min-height, max-width a max-height. Toto nastavení se nám může hodit pro nespočet příkladů. Při omezení výšky nebo šířky může někdy dojít k přetečení obsahu. To následně můžeme řídit pomocí vlastnosti overflow (např scroll, auto).

Rozměry elementu

Pokud chceme elementům nastavovat výšku a šířku, musíme brát v potaz i jeho rozměry. Ve výchozím nastavení (box-sizing: content-box) se do width a height nezapočítává padding ani border. Vzpoměňmne si na příklad z přednášky:

.box {
  width: 100px;
  border: 1px solid gold;
  padding: 10px;
}

Skutečná velikost elementu zde bude 122 pixelů. To může být neintuitivní, protože se zdá, že jsme šířku přeci nastavili na 100px. Co se skutečně započítává do height a width je určeno vlastností box-sizing. Ta může nabývat dvou hodnot:

• content-box

  Započítáv se pouze obsah.

• border-box

  Započítává se obsah, padding a border.