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äť tagHneď 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<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.
Navigačné menu
Ako druhý prvok do header vložíme navigačné menu. K vymedzeniu oblasti navigácie slúži 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é 4500x (2.27 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS