12. diel - HTML layout

V minulej lekcii, Štylovanie textu v CSS - Google fonty, veľkosť fontu a tieň , sme si ukázali štylovanie písma pomocou Google fontov a nastavili veľkosť a tieň písma.

Dnes v HTML/CSS tutoriále začneme pracovať na layoutu, pomocou ktorého pridáme našej stránke hlavičku a pätičku. Po dokončení niekoľkých nasledujúcich lekcií dotiahneme svoje webové stránky do tejto podoby:

Webové stránky krok za krokom - Webové stránky krok za krokom

Aby sme tento výsledok dosiahli, musíme sa naučiť, ako pomocou CSS pozíciovať prvky na stránke.

Rozloženie stránky

Iste viete, že webové stránky majú určité rozloženie prvkov, ktorému sa často hovorí layout. Pri väčšine webových stránok nájdeme:

hlavičku s logom webu,
v nej alebo pod ňou navigáciu na najdôležitejšie podstránky,
ďalej samotný článok s obsahom a
na konci pätičku s informáciou, kto web vytvoril.

Nižšie sú tieto časti zvýraznené na layoutu, ktorý budeme vytvárať:

Súčasti layoutu stránky - Webové stránky krok za krokom - Webové stránky krok za krokom

Pre tieto elementy HTML poskytuje nové tagy, ktoré si hneď predstavíme.

Každá podstránka na našom webe má toto rovnaké rozloženie. Napr. teda ako stránka "O mne", tak stránka "Zručnosti" bude obsahovať tú istú hlavičku, navigáciu, článok a pätičku. Len v obsahu článku sa od seba samozrejme jednotlivé stránky odlišujú. Layout si vložíme do každej podstránky webu ako HTML kód a jeho elementy potom napozicujeme pomocou CSS tak, aby sa zobrazovali na správnych miestach.

V minulosti sa na vytvorenie layoutu používali tzv. rámy, ktoré ale boli už z HTML odstránené, sú nevalidné a preto ich nebudeme používať. Navigácia bola v minulosti tiež často v ľavom stĺpci, neskôr sa premiestnila do vodorovného menu pod hlavičku.

Začnime tým najjednoduchším, a to poľom s článkom.

Článok `<article>`

Na našom webe teraz máme iba článok s informáciami o nás. Ten sme ako článok nijako neoznačovali, pretože na webe nič ďalšie nebolo. Keď na web teraz chceme pridať hlavičku a pätičku, treba časť s článkom označiť ako článok pomocou párového tagu <article>, aby sa s hlavičkou a pätičkou neplietol.

Keď tagy na layout ako <article> a ďalšie ešte neexistovali, všetky časti stránky sa obaľovali do elementov <div>. Z toho však nebolo poznať, o akú časť stránky sa jedná, a preto sa na tvorbu layoutov už nepoužíva. Element <div> nenesie žiadny význam pre webové vyhľadávače, preto by sme sa ho mali snažiť používať čo najmenej. Slúži na zoskupovanie logicky súvisiacich blokových elementov. Tento element väčšinou používame v kombinácii s CSS štýlmi. Využijeme ho v situáciách, keď potrebujeme skupinu elementov od zvyšku obsahu odlíšiť iba vizuálne, ale nie sémanticky.

Časti článku - `<header>` a `<section>`

Samotný článok často neobsahuje len text, ale aj ďalšie doplňujúce informácie ako titulok, autora, dátum publikácie, hodnotenia a podobne. Preto existujú ďalšie tagy, ktorými je možné element <article> ešte logicky rozdeliť. Spravidla ho rozdeľujeme aspoň na dve časti a to:

na hlavičku s titulkom článku a
na sekcii s obsahom článku.

Slúžia na to tagy <header> a <section>. Ukážme si opäť o akej časti výsledného webu sa jedná:

Súčasti layoutu článku - Webové stránky krok za krokom - Webové stránky krok za krokom

V HTML kóde by sa článok s rozložením definoval takto:

<article>
    <header>
        <h1>O mně</h1>
    </header>

    <section>
        <p>Text článku...</p>
    </section>
</article>

Máme tu teda článok <article>, ktorý ďalej obsahuje hlavičku <header> s nadpisom článku. Tagom <section> označujeme časť článku, v ktorej je jeho obsah. Článku môžeme pridať aj pätičku tagom <footer>, kde sa zobrazí napríklad dátum jeho publikácie a hodnotenia. V hlavičke by potom mohol byť uvedený autor a podobne. My pre jednoduchosť zostaneme len pri vyššie uvedenej štruktúre.

Hlavičky v HTML

Ako ste si možno práve uvedomili, už sa bavíme o tretej hlavičke v HTML. Aby sme si ich neplietli, poďme si ich zopakovať:

hlavička HTML dokumentu <head> nie je vidieť a obsahuje informácie pre prehliadač a vyhľadávače
hlavičku stránky s logom a navigáciou si vytvoríme až ďalej
hlavička článku <header> spravidla obsahuje nadpis článku

Úprava `index.html`

Poďme teraz nové znalosti konečne aplikovať do súboru index.html. Tu časť s článkom webu označíme ako článok a ešte ju logicky rozdelíme na hlavičku a obsah, čo nám neskôr pomôže vytvoriť dané rozloženie webu.

Za značkou <body> teda otvoríme element <article> s článkom av ňom element <header> s nadpisom <h1>:

...
<body>
    <article>
        <header>
            <h1>O mně</h1>
...

Hlavičku následne zatvoríme pomocou </header> a otvoríme <section> pre obsah článku, v ktorom bude zvyšok obsahu stránky. Pretože obsah na stránke sme vytvorili niekedy v začiatku kurzu, nadrobno ho rovno upravíme, aby zodpovedal cielenému vzhľadu webu:

        </header>
        <section>

            <img src="obrazky/avatar.jpg" class="avatar" alt="Programátor HoBi" />

            <p>
                Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.
            </p>

            <p>
                Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT.
                Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>.
            </p>

            <p>
                Rád čtu a někdy (hlavně v létě) i sportuju.
            </p>

            <p>
                Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!
            </p>

            <h2>Dovednosti</h2>
            <p>
                Co umím, jsem sepsal na stránce <a href="dovednosti.html">dovednosti</a>.
            </p>
        </section>


    </article>
</body>

Obsah a článok nezabudneme úplne na konci zavrieť pomocou </section> a </article>.

Obrázku sme priradili triedu class="avatar", aby sme ho mohli ďalej v kurze štylovať. Rovnú ju využijeme na zmenšenie obrázku, ktorý by nám zaberal veľmi veľký priestor. Obrázok <img> nebudeme chcieť ďalej inak štylovať, preto okolo neho už nie je odsek s centrovacou triedou, ani nemá atribúty na nastavenie šírky a výšky s percentami. Pre zmenšenie obrázku do súboru styl.css pridáme:

.avatar {
    width: 300px;
}

A máme hotovo. Naša stránka teraz bude vyzerať takto:

Moje první webová stránka

index.html

Web nájdete ako vždy v prílohe na stiahnutie.

V budúcej lekcii, Pozadie webu a veľkosť elementov , si ukážeme štylovanie pozadia webovej stránky a nastavíme výšku a šírku elementov.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 8443x (2.27 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

3 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity

12. diel - HTML layout

Rozloženie stránky

Článok <article>

Časti článku - <header> a <section>

Hlavičky v HTML

Úprava index.html

Stiahnuť

Článok `<article>`

Časti článku - `<header>` a `<section>`

Úprava `index.html`