12. diel - Navigačné menu, pätička a HTML entity

V predchádzajúcom cvičení, Riešené úlohy k 10.-11. lekciu HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 10.-11. lekciu HTML a CSS , sme si ukázali rámček, tieň a boxového modelu. Dokončili sme polia s článkom a na dnešné HTML / CSS tutoriál máme sľúbenú tvorbu navigačného menu a pätičku.

Hlavička

Na hlavičku použijeme opäť tag

. Ten sme už použili k definícii hlavičky článku, teraz ho použijeme k definícii hlavičky celého body. Vyhľadávače vďaka tagu spoznajú, že sa jedná o hlavičku a budú sa podľa toho správať. Opäť zopakujem, že v minulosti sa k tomuto používali tagy div, čo je teraz nesémantické. V stránke plné divov sa nevyzná ani kodér, ani vyhľadávač.

Hneď za začiatok body si teda vložme tag header:

<header>

</header>

V hlavičke budú 2 veci: logo a navigačné menu.

Logo

Logo vložíme do elementu

a opatríme ho atribútom id s hodnotou logo.

<div id="logo">HoBi</div>

Id má podobný význam ako class, slúži k priradenie štýlu určitému elementu. Rozdiel oproti class je v tom, že element s určitým id (napr. Tu s id logo) môže byť v celom HTML dokumente iba jeden. Určitú class sme mohli priradiť koľkých elementom sme chceli. Id sa využíva teda ku štýlovanie unikátnych prvkov na stránke, ukážkovým príkladom je napr. Logo, ktoré je na každej stránke len jedno. Ešte sa sem vrátime u štýlovanie.

Ako druhý prvok do header vložíme navigačné menu. K vymedzeniu oblasti navigácie slúži tag

. Jeho použitie sa opäť oproti divu oplatí, pretože vyhľadávače pochopí, že sa jedná o navigáciu.Otázkou zostáva, aký element použijeme k reprezentácii samotného navigačného menu. Ak vás napadá tabuľka, tak tu používať nebudeme. Tabuľka je určená na prezentáciu tabuľkových hodnôt. Mohlo by vás napadnúť dať za seba niekoľko divov ako tlačidlá, to už je trochu lepšie, ale stále nesémantické. Spýtajme sa: "čo je to navigácia?". Je to zoznam niekoľkých odkazov na najdôležitejšie podstránky webe. Z toho dôvodu navigáciu umiestnime do zoznamu pomocou tagu

. Navigácia bude vyzerať asi takto:
```
<nav>
    <ul>
        <li class="aktivni"><a href="#">Domů</a></li>
        <li><a href="#">O mně</a></li>
        <li><a href="#">Dovednosti</a></li>
        <li><a href="#">Reference</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</nav>
```
Všimnite si, že sme prvý položke zoznamu dali triedu aktivne. Pri každej podstránky webu nastavíme túto triedu tej položke v menu, v ktorej sa teraz nachádzame. Pre používateľov to bude prínosné, pretože sa bude na našom webe lepšie orientovať.

Keď si teraz stránku zobrazíme v prehliadači, bude trochu nevzhľadná, pretože sme na hlavičku ešte neaplikovali žiadny štýl:

Pridajme si teraz na koniec

Všimnite si tagu code, ktorý slúži pre označenie oblasti so zdrojovým kódom. Ďalej tu máme tag

. Používa sa v prípade, keď chceme zobraziť predformátovaný text tak, ako sme ho zapísali. Teda aby prehliadač nezašpinil naše medzery, tabulátory a konce riadkov. Takýto text sa vypíše presne ako je zapísaný a písme s.K prenesenie HTML kódu alebo iného textu na entity môžete použiť Online prevodník špeciálnych HTML znakov na entity a späť.V budúcej lekcii, Štýlovanie hlavičky HTML stránky , to bude o štýlovanie hlavičky a pätičky, dokončíme náš layout. Máte sa teda na čo tešiť!  Dnešná práca je ako vždy k stiahnutiu v prílohe.

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é 4478x (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:

2 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