12. díl - Navigační menu, patička a HTML entity

HTML a CSS Statický web Navigační menu, patička a HTML entity American English version English version

V minulém dílu našeho seriálu tutoriálů pro tvorbu webu v HTML jsme si ukázali rámeček, stín a boxmodel. Dokončili jsme pole s článkem a na dnešek máme slíbenou tvorbu navigačního menu a patičku.

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é 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

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

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

Id má podobný význam jako 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ř. zde s id logo) 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 např. logo, které je na každé stránce jen jedno. Ještě se sem 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 divu 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é. Zeptejme se: "co je to navigace?". Je to seznam několika odkazů na nejdůležitější podstránky webu. Z toho důvodu navigaci umístíme do seznamu pomocí tagu <ul> a jednotlivé odkazy do <li>. Navigace bude vypadat 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š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.

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:

Navigační menu v HTML

Přidejme si nyní na konec <body> i patičku. Ke stylování se dostaneme příště, uvidíte, jak je CSS mocné.

Patička

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 2013 pro <a href="http://devbook.cz">DEVBOOK.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.

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 samostané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ýsledek:

Vložení zdrojového kódu na webové stránky

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.

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.

Příště to bude o stylování hlavičky a patičky, dokončíme náš layout. Máte se tedy na co těšit! :) Dnešní práce je jako vždy ke stažení v příloze.


 

Stáhnout

Staženo 1697x (75.41 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (3)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (24 hlasů) :
4.958334.958334.958334.958334.95833


 


Miniatura
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Stylování hlavičky HTML stránky

 

 

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

Avatar
Tonda Kozák
Člen
Avatar
Tonda Kozák:

Nastav navigaci jiné pozadí.
Mimochodem, v:

text-shadow 2px 2px 4px #0a294b;

ti chybí dvojtečka.

 
Odpovědět 3. ledna 13:28
Avatar
torhanmichal
Člen
Avatar
torhanmichal:

Ahoj, byl bych vděčný za radu. Pracuji na vodorovném vysouvacím menu o 6 odkazech.. Rád bych, aby se mi u jednoho odkazu vysunulo podmenu o šířce 700px, které mám nastylované a u dalšího odkazu o šířce 400px. Děkuji za radu :)

 
Odpovědět 12. ledna 14:13
Avatar
Tomáš123
Člen
Avatar
Odpovídá na torhanmichal
Tomáš123:

Priraď tým menu triedy a rôzne šírky nastav v CSS.

Odpovědět 12. ledna 16:19
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
torhanmichal
Člen
Avatar
torhanmichal:

Díky Tome za radu, ať se daří ;)

 
Odpovědět  +1 14. ledna 17:28
Avatar
Denis Mareček:

Mám otázku, udělal jsem dvě navigace na stránce, tu druhou jsem si upravil, ale zjistil jsem, že další navigace se dělají spíš přes divy, můžu to tak nechat nebo je to nevzhledné a nemá to tak být?

Odpovědět 18. března 14:21
Never back down!
Avatar
torhanmichal
Člen
Avatar
torhanmichal:

Kdo mi poradí je fakt machr.. :D :D... Nevíte někdo, jak nastylizoval v patičce to průhledné posouvajicí se pozadí?
zde odkaz : http://www.bluefishaquariums.gr.. díky moc za každou radu, už se s tím patlám dlouho ..

 
Odpovědět 20. srpna 15:43
Avatar
Odpovídá na torhanmichal
Ondřej Langr (andysekcze):

Průhledné - do elementu s obsahem:

background: transparent;

. a do body dáš

background: url('urlobrazku.pripona') fixed no-repeat 100% 100%;

:) tím posledním se možná pletu, pokud ano tak mě prosím opravte

Editováno 20. srpna 20:34
Odpovědět 20. srpna 20:33
I have a charger. I have Note 7. Umh I haven't Note7.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Ondřej Langr (andysekcze)
Jiří Gracík:

Pro velikost lépe použít hodnotu cover, nechceme obrázek deformovat

Odpovědět 20. srpna 21:04
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovědět 20. srpna 21:30
I have a charger. I have Note 7. Umh I haven't Note7.
Avatar
torhanmichal
Člen
Avatar
torhanmichal:

Díky moc za radu :) vše funguje jak má .. ještě jednou dííky oběma...

 
Odpovědět 21. srpna 11:37
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 24. Zobrazit vše