IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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í.

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 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 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 4383x (2.27 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Řešené úlohy k 14.-15. 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 a flexbox
Článek pro vás napsal David Hartinger
Avatar
Uživatelské hodnocení:
1739 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 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