Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022

Lekce 12 - Navigační menu, patička a HTML entity

V předešlém cvičení, Řešené úlohy k 10.-11. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Na dnešní HTML/CSS tutoriál máme slíbenou tvorbu navigačního menu a patičky.

Hlavička

Na hlavičku použijeme opět tag <header>. Ten jsme již použili k definici hlavičky článku, nyní ho použijeme k definici hlavičky celého <body>. Vyhledávače díky tagu poznají, že se jedná o hlavičku a budou se podle toho chovat. Opět zopakuji, že v minulosti se k tomuto používaly tagy <div>, což je nyní nesémantické. Ve stránce plné tagů <div> se nevyzná ani kodér, ani vyhledávač.

Hned za začátek <body> si tedy vložme tag <header>:

<header>

</header>

V hlavičce budou 2 věci: logo a navigační menu.

Logo vložíme do elementu <div> a opatříme ho atributem id s hodnotou logo:

<div id="logo">
    <h1>Honza<span>Bittner</span></h1>
    <small>webdeveloper</small>
</div>

Objevují se nám zde dva nové tagy:

  • <span> - slouží k seskupení řádkových elementů nebo části textu, aby je bylo možné snadno nastylovat. Stejně jako tag <div>, tento tag nenese žádný význam a používá se tedy pouze pro stylování.
  • <small> - slouží k označení textu s nízkým významem, například k vedlejším poznámkám. Často se do něj píše třeba copyright, my v něm nyní máme vloženo "webdeveloper".

Možná vás zarazilo, že na stránce budeme mít dva nadpisy první úrovně (jeden ve článku, druhý v logu), když jsme na začátku kurzu řekli, že <h1> má být na stránce pouze jednou. Trochu toto tvrzení poupravíme. Stará specifikace HTML neumožňovala 2 nadpisy první úrovně na jedné stránce. HTML s tím od verze 5 nemá problém, pokud jsou nadpisy vloženy v headeru. I logicky je to lepší, jelikož nadpis má jak webová stránka, tak článek v ní zobrazený.

Atributy id a class

S těmito atributy jsme se již setkali, i tak si ale ještě připomeneme, v čem se vlastně liší. Atribut id má podobný význam jako atribut class, slouží k přiřazení stylu určitému elementu. Rozdíl oproti class je v tom, že element s určitým id (např. s id="logo" výše) může být v celém HTML dokumentu pouze jeden. Určitou class jsme mohli přiřadit kolika elementům jsme chtěli. ID se využívá tedy ke stylování unikátních prvků na stránce. Ukázkovým příkladem je právě logo, které je na každé stránce jen jedno. K tomuto tématu se ještě vrátíme u stylování.

Navigační menu

Jako druhý prvek do headeru vložíme navigační menu. K vymezení navigační oblasti slouží tag <nav>. Jeho použití se opět oproti tagu <div> vyplatí, jelikož vyhledávače pochopí, že se jedná o navigaci.

Otázkou zůstává, jaký element použijeme k reprezentaci samotného navigačního menu. Pokud vás napadá tabulka, tak tu používat nebudeme. Tabulka je určena k prezentaci tabulkových hodnot. Mohlo by vás napadnout dát za sebe několik divů jako tlačítka, to už je trochu lepší, ale pořád nesémantické.

Zkusme se sami sebe zeptat: "Co je to navigace?". Navigace je seznam několika odkazů na nejdůležitější podstránky webu. Z toho důvodu umístíme mezi tagy navigace seznam, který vytvoříme pomocí tagu <ul>, a jednotlivé odkazy do <li>. Navigace bude vypadat asi takto:

<nav>
    <ul>
        <li class="aktivni"><a href="index.html">Domů</a></li>
        <li><a href="omne.html">O mně</a></li>
        <li><a href="dovednosti.html">Dovednosti</a></li>
        <li><a href="reference.html">Reference</a></li>
        <li><a class="kontakt-tlacitko" href="kontakt.html">Kontakt</a></li>
    </ul>
</nav>

Všimněte si, že jsme první položce seznamu dali třídu .aktivni. U každé podstránky webu nastavíme tuto třídu té položce v menu, ve které se nyní nacházíme. Pro uživatele to bude přínosné, jelikož se bude na našem webu lépe orientovat. Položce "Kontakt" jsme přidali třídu kontakt-tlacitko - jistě tedy podle logiky pojmenovávání tříd tušíte, že ji nakonec ostylujeme podobně jako naše referenční tlačítko, aby byl web trochu zajímavější a záložka s kontakty nešla přehlédnout. :)

Nové HTML soubory, na které se v elementech <a> odkazujeme, si vytvoříme později.

Když si nyní stránku zobrazíme v prohlížeči, bude poněkud nevzhledná, jelikož jsme na hlavičku ještě neaplikovali žádný styl:

Moje první webová stránka
index.html

Ke stylování se dostaneme příště, uvidíte, jak je CSS mocné.

Patička

Přidejme si nyní na konec <body> i patičku. Podobně jako existuje tag <header>, existuje i tag <footer>, který slouží k označení patičky. Může se jednat o patičku článku nebo o patičku celého <body>. Na konec <body> si tedy vložme tag <footer>:

<footer>

</footer>

Do patičky stránky patří informace o copyrightu, rok vytvoření a kdo web vytvořil. U větších webů bývá zvykem do patičky umisťovat navigaci, i když osobně mi to přijde zmatečné. Umístěme do ní následující kód:

Vytvořil &copy;HoBi 2021 pro <a href="https://itnetwork.cz">itnetwork.cz</a>

Sekvence &copy; označuje speciální znak ©. Tyto znaky vkládáme pomocí tzv. HTML entit.

HTML entity

Možná vás již napadlo, co budete dělat, až budete potřebovat do textu vaší stránky zapsat nějaký ze znaků, které využívá jazyk HTML. Jsou to zejména znaky <, >, " a &. Ačkoli se pravděpodobně nic nestane, když znak v textu použijete, bude vaše stránka nevalidní. Prohlížeče s některými chybami v HTML kódu počítají, nicméně to není důvodem k tomu, abychom je dělali a už vůbec se nedá spolehnout na to, že nám to vždy projde.

Tento kód je tedy špatně:

<!-- Tento kód je špatně -->
<p>Tvrdil, že a > b, ale to nebyla pravda.</p>

Problém je samozřejmě v tom, že tyto znaky (zde většítko >) zmatou prohlížeč, který si myslí, že otevíráme nějaký HTML tag. Z tohoto důvodu několik znaků zapisujeme pomocí tzv. HTML entit.

Pro napsání komentáře je v ukázce použit speciální tag <!-- -->. Komentáře slouží pouze pro poznámky vývojáře, prohlížeči jsou ignorovány.

Nejdůležitější entity jsou tyto:

Znak Číslo entity Název entity Popis
  &#160; &nbsp; Nedělitelná mezera
" &#34; &quot; Uvozovka
' &#39; &apos; Apostrof
& &#38; &amp; Ampersand
< &#60; &lt; Menšítko
> &#62; &gt; Většítko
&#8364; &euro; Euro
© &#169; &copy; Copyright
® &#174; &reg; Registrovaná známka
&#8482; &trade; Ochranná známka

Pomocí entit lze zapsat úplně všechny znaky. Je nutné je používat k vložení znaků, které jsou rezervované pro jazyk HTML. Můžeme je použít i k vložení znaků, které se na klávesnici špatně píší (např. copyright). Entitu můžeme zapsat buď pomocí názvu nebo pomocí kódu (název se preferuje kvůli lepší čitelnosti).

Když dáme za sebe několik nedělitelných mezer, prohlížeč z nich neudělá jednu jako u mezery normální, ale ponechá všechny. Začátečníci, kteří neznají margin a padding, takto odsazují elementy, což je naprosto špatně a proto se tomu vyhněte. Využití nedělitelné mezery je např. v textu za předložkami a spojkami, kdy nechceme, aby se mezera zalomila a znak zůstal na samostatném řádku.

Opravme si ukázku výše, aby byla validní:

<p>Tvrdil, že a &gt; b, ale to nebyla pravda.</p>

K tématu validity se ještě vrátíme na konci seriálu, každopádně bychom se o ni měli snažit a kdo vám bude říkat opak, tak HTML a CSS nerozumí.

Vložení zdrojových kódů

Pomocí HTML entit se na stránky vkládají např. zdrojové kódy HTML, kdy chceme, aby se tagy pouze zobrazily, ale neaplikovaly:

<pre>
<code>
&lt;!doctype html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Titulek&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        Tělo
    &lt;/body&gt;
&lt;/html&gt;
</code>
</pre>

Všimněte si tagu <code>, který slouží pro označení oblasti se zdrojovým kódem. Dále tu máme tag <pre>. Používá se v případě, kdy chceme zobrazit předformátovaný text tak, jak jsme ho zapsali. Tedy aby prohlížeč neumazal naše mezery, tabulátory a konce řádků. Takový text se vypíše přesně jak je zapsaný a neproporcionálním písmem.

Výsledek:

Zdrojový kód
code.html

K převedení HTML kódu nebo jiného textu na entity můžete použít Online převodník speciálních HTML znaků na entity a zpět.

Dnešní práce je jako vždy ke stažení v příloze.

V další lekci, Stylování hlavičky HTML stránky, ostylujeme hlavičku s navigací.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 3403x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Řešené úlohy k 10.-11. lekci HTML a CSS
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Stylování hlavičky HTML stránky
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
524 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (36)

Avatar
Yuriy Tretyachenko:17.2.2021 3:01

Ohledne rozdilu class a id. I kdyz jsme u CSS, bylo by dobre nastinit o pomerne sirokem vyuziti id, napr., u zalozek, v JavaScriptu (getElementById) aj.

 
Odpovědět
17.2.2021 3:01
Avatar
Martin Kopuletý:18. ledna 16:08

Díky za update manuálu! Proč u footeru není text v <p>Vytvořil ©HoBi 2021 pro</p> ,ale je bez paragrafu ??? V předchozích článcích bylo uvedeno, že žádný text by neměl volně "plavat"... Děkuji za odpověď.

 
Odpovědět
18. ledna 16:08
Avatar
Jaroslav Drobek:22. března 9:10

Konečně, mezi řádky, toužebně vyhlížený tag <!-- --> pro poznámky!

 
Odpovědět
22. března 9:10
Avatar
Ondřej Raška:19. června 17:06

Ne taková katastrofa jako předchozí lekce. Nicméně stále přetrvává nešvar, že před aplikací nových změn odstraníme některé starší z předchozích lekcí ale studentovi neřekneme proč, a které jsme odstranily.

Student je pak zmatený a frustrovaný, jelikož jeho výsledek po aplikaci nových změn neodpovídá obrázku. Musí si stáhnout zejména css soubor a řádek po řádku kontrolovat co mu přebývá.

Nebo může použít v nové lekci pokaždé stažený html a css soubor, což tak nějak kazí výukový princip.

 
Odpovědět
19. června 17:06
Avatar
Marek Němec
Člen
Avatar
Marek Němec:23. června 17:12

Čárkou pouze aplikuješ ten css kod na více elementů :)

 
Odpovědět
23. června 17:12
Avatar
Eliška Solničková:23. července 21:38

Nejsem si jistá nějakými věcmi. Úplně jim nerozumím.

 
Odpovědět
23. července 21:38
Avatar
Marcela Skupieňová:21. září 16:43

mám chybu localhost 8080, co mám špatně?

 
Odpovědět
21. září 16:43
Avatar
vit.kadlec
Člen
Avatar
vit.kadlec:4. října 16:42

Zdravím, jen drobnosti

  1. <!-- toto jste mohli dát někam o pár lekcí dříve, psal bych si tam poznámky přímo do indexů a lépe by se mi to učilo --> .
  2. v Google Chrome je F12 kde jsou krásně popsané jednotlivé elementy co dělají včetně rámců atd. nechcete to také zapracovat? je to názorné.
 
Odpovědět
4. října 16:42
Avatar
Renáta Vyšatová:19. října 2:32

Krásné vysvětlení všeho v této lekci, mám radost 😊 Ani jsem si nemusela dělat poznámky, abych tomu porozumněla 😂 A jsem nadšená z tagu < !-- -->, díky němu se mi bude učit mnohem líp. Ale co čtu starší komentáře, tak já třeba souhlasím, že se tento tag neobjevil v dřívější lekci, jinak by to všechno pro úplného začátečníka mohlo být všechno zmatečné a nejspíš by se kvůli svým "poznámkám" v html souboru špatně orientoval.

 
Odpovědět
19. října 2:32
Avatar
Jan Trnka
Člen
Avatar
Jan Trnka:12. listopadu 0:52

Tak tady je to vše jasné.

 
Odpovědět
12. listopadu 0:52
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.

Zobrazeno 10 zpráv z 46. Zobrazit vše