MS Office week
Pouze tento týden sleva až 80 % na e-learning týkající se MS Office
50 % bodů zdarma na online výuku díky naší Slevové akci!

Lekce 3 - Rozložení stránky v HTML (layout)

V minulé lekci, Základní struktura HTML podruhé, jsme pokračovali se strukturou HTML dokumentu. Ukážeme si tagy <script>, <style>, <link>, <base> a <body>.

Obsah HTML dokumentu se nachází v elementu <body>. Většinou však <body> dále rozdělíme do několika sekcí s různým významem, které tvoří tzv. layout. Před příchodem HTML 5 sekce představovaly divy, HTML 5 však nyní přišlo s novými značkami právě pro tvorbu layoutu, které vždy dávají určité sekci určitý význam. To pomůže např. vyhledávačům lépe pochopit obsah stránky.

Layout se s postupem času vyvíjel. V dávné minulosti se k jeho tvorbě využívaly rámce nebo tabulky. S příchodem dynamických stránek se skládal z divů a ty jsou nyní nahrazeny novými tagy. Z hlediska ergonomie je výraznou změnou přesunutí navigačního menu nahoru, které nejčastěji vypadá jako vodorovný řádek. Dříve byla navigační oblast nejčastěji jako levý sloupec. Součástí layoutu zůstala hlavička a patička. Objevila se nová oblast v podobě pravého sloupce, který obsahuje doplňující obsah k článku. Tyto změny v koncepci webové stránky se občas označují termíny jako web 2.0 a web 3.0.

Rozložení stránky na jednotlivé části (sekce) ukazuje následující obrázek:

HTML layout pomocí HTML5 tagů

<header>

Hlavičku stránky (neplést s hlavičkou dokumentu <head>, která není pro uživatele, ale pro prohlížeč) definujeme tagem <header>. Tag <header> zpravidla obsahuje nadpis h1, případně dva nadpisy sloučené pomocí tagu hgroup. Nadpisy se v tomto případě váží k celému webu (jako vše v header), ale header můžeme stejně tak vložit i do dalších sekcí stránky. Header dále zpravidla obsahuje obrázek s logem, vyhledávací pole nebo např. možnost výběru jazyka. Kód jednoduchého headeru by mohl vypadat takto:

<header>
    <img src="images/logo.png" alt="Psí potřeby" />
    <hgroup>
        <h1>Psípotřeby.cz</h1>
        <h3>To nejlepší pro vaše čtyřnohé miláčky.</h3>
    </hgroup>
</header>

V prohlížeči by to vypadalo klasicky takto:

Header
localhost

<nav>

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Tag <nav> obsahuje navigační prvky. Může být součástí header nebo stát samostatně pod ním. Můžeme ho samozřejmě použít kdekoli na stránce, ale zvykem je mít navigaci pod hlavičkou. Obvykle obsahuje nastylovaný seznam <ul>, jehož položky reprezentují odkazy na jednotlivé podstránky. Uveďme si příklad navigačního menu:

<nav>
    <ul>
        <li>O nás</li>
        <li>Hračky</li>
        <li>Vodítka</li>
        <li>Krmivo</li>
        <li>Pelíšky</li>
        <li>Kontakt</li>
    </ul>
</nav>

Na stránce to vypadá klasicky bez stylu takto:

Header & navigace
localhost

Velmi často se seznamy stylují bez odrážek (teček), proto někdy nejde ani poznat, že se o seznamy jedná.

<footer>

Patička obvykle obsahuje copyright, informace o autorovi a případně další odkazy (např. na mapu stránek a podobně). Mohli bychom ji napsat např. takto:

<footer>
    <p>Copyright (C) 2012 PsiPotreby.cz, Jan Novák</p>
</footer>

Patička je už podle názvu úplně na konci:

Header & navigace
localhost

<section>

Section se používá zejména k označení "těla" dokumentu mezi hlavičkou a patičkou. Právě zde se nalézá samotný článek nebo články.

<article>

Samotný článek píšeme do elementu <article>. Ten může opět obsahovat <header>, <section> a <footer>. To je samozřejmě velmi přínosné pro vyhledávače, jelikož nyní vědí, na jakou část webu se zaměřit. Ukažme si takový článek:

<article>
    <header>
        <h1>Krmivo DOG plus</h1>
    </header>
    <section>
        <p>DOG plus je speciální a kompletní krmivo pro aktivní psy všech plemen... </p>
    </section>
</article>

<aside>

Jako součást moderních layoutů se osvědčil postranní panel, pro který se v HTML 5 nabízí tag <aside>. Je logicky chápán jako soubor doplňujících informací k článku. Obvykle jsou zde umístěny odkazy na další podobné články, informace nebo reklamy:

<aside>
    <h1>Podobné produkty:</h1>
    <ul>
        <li>Psí tyčinka Multivitamin</li>
        <li>Vitamíny pro psy</li>
        <li>Doplňky stravy</li>
    </ul>

    <h1>Akční nabídky:</h1>
    <ul>
        <li>Vodítko Denny</li>
        <li>...</li>
    </ul>
</aside>

Tag můžeme použít i mimo layout pro vymezení něčeho, co nepatří k hlavnímu tématu daného bloku. Můžeme zde např. psát různé poznámky nebo vysvětlivky k textu. Nabízí se např. k obalení definičního seznamu (slovníku pojmů).

Po přidání CSS můžeme mít tento výsledek webové stránky:

Your page
localhost

Trochu nastylovaný layout

HTML s CSS výše uvedeného příkladu je níže k dispozici ke stažení.

Tyto tagy prohlížeče často sami nestylují, jsou ale vhodné k označení sekcí namísto divů, jak bylo zmíněno na začátku. Prohlížeč bude mít alespoň jasno, co kam patří a může nám to někdy pomoct i v SEO optimalizaci.

V další lekci, Rozložení stránky v HTML II. část, si ukážeme HTML 5 tagy <details>, <summary>, <figure>, <time> a další.


 

Stáhnout

Staženo 39x (26.03 kB)

 

Předchozí článek
Základní struktura HTML podruhé
Všechny články v sekci
HTML5
Článek pro vás napsal Samuel Hél
Avatar
Jak se ti líbí článek?
4 hlasů
Autor se věnuje hlavně programování, nejvíce z oblasti webových technologií, dělá občasné video edity ze svých dovolených. Má rád memes a svou gf
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!