Lekce 16 - Navigační menu, patička a HTML entity
V předešlém cvičení, Řešené úlohy k 14.-15. 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 v hlavičce a tvorbu patičky.
Hlavička
Na hlavičku použijeme opět tag <header>
. Ten jsme již
použili k definici hlavičky článku <article>
, 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 se budou nacházet dvě věci: logo a navigační menu.
Logo
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>
Do loga jsme vložili nadpis <h1>
a doprovodný text.
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 a 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 položek <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:
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 ©HoBi 2021 pro <a href="https://itnetwork.cz">itnetwork.cz</a>
Sekvence ©
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 |
---|---|---|---|
  | | Nedělitelná mezera | |
" | " | " | Uvozovka |
' | ' | ' | Apostrof |
& | & | & | Ampersand |
< | < | < | Menšítko |
> | > | > | Většítko |
€ | € | € | Euro |
© | © | © | Copyright |
® | ® | ® | Registrovaná známka |
™ | ™ | ™ | 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
nbsp;
, 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 > b, ale to nebyla pravda.</p>
K tématu validity se ještě vrátíme na konci kurzu, 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> <!doctype html> <html> <head> <title>Titulek</title> </head> <body> Tělo </body> </html> </code> </pre>
Takto jsou do stránky vloženy i kódy v této lekci, využití je tedy
např. pro výukové materiály. 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:
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 a flexbox , ostylujeme hlavičku a ukážeme si flexbox.
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 4743x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS