C# týden November Black Friday
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Pouze tento týden sleva až 80 % na e-learning týkající se C#

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Rámeček, stín a boxmodel v CSS, jsme si ukázali rámeček, stín a boxmodel. Dokončili jsme pole s článkem a na dnešní HTML/CSS tutoriál 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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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://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.

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.

V příští lekci, Stylování hlavičky HTML stránky, 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 2501x (75.41 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
53 hlasů
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 sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Předchozí článek
Rámeček, stín a boxmodel v CSS
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
Aktivity (6)

 

 

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

Avatar
Peter Butora
Člen
Avatar
Peter Butora:12.2.2018 18:37

Ahoj prosím poradíte, nikde jsem si nevšiml že by bylo pořádně vysvětleno kdy používat <div>
k čemu slouží? jsou nějaké věci na které se používá jenom <div>?

Odpovědět
12.2.2018 18:37
Péťa
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Peter Butora
Jan Lupčík:12.2.2018 18:46

Použiješ ho vždy, když potřebuješ seskupit nějaké elementy, nebo když potřebuješ zobrazit nějaký blokový element na stránce (vyjma základní struktury stránky, kdy bys měl použít tagy <main>, <article> apod.). <div> se dobře styluje a používá se skoro na každé blokové zobrazení. Naopak na text by se používat neměl. :)

Odpovědět
12.2.2018 18:46
TruckersMP vývojář
Avatar
Peter Butora
Člen
Avatar
Peter Butora:12.2.2018 18:49

dík a jak by to vypadalo třeba u article?
<div class="modra">
<article>
</article>
</div>

a potom to ostyluji takhle??? a prč se třeba nestyluje rovnou article není to na stejno? nebo je to přehlednější
.modra {
background: blue;
}

Odpovědět
12.2.2018 18:49
Péťa
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Peter Butora
Jan Lupčík:12.2.2018 18:52

Samozřejmě by se měl rovnou stylovat <article>. Nevím, proč to používat takto - ten <div> nemá žádný význam.
Jinak pro kód používej prosím 2. tlačítko nad tímto editorem (mezi emotikony a B). A pokud odpovídáš na nějaký komentář, nezapomeň použít tlačítko Odpovědět. :)

Odpovědět
12.2.2018 18:52
TruckersMP vývojář
Avatar
Erik Hawlasek:28.5.2018 14:59

Zdravím, chtěl bych se optat, kdybych chtěl udělat například border pro obrázek pomocí classu, šlo by to?

Odpovědět
28.5.2018 14:59
Za zeptání nic nedáš.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Milan Racek
Člen
Avatar
Milan Racek:2.11.2018 13:59

Čaute,skúšam tvorit web podla tohto tutoriálu a mám menší problém.
Pri otvorení súboru "rozlezenie.html" mi ukáže stránku tak ako pridávam obrázok.
Nevidno mi pätičku stránku,musím zoscrollovať nižšie,ale neviem prečo.Myslím,že to bude nejaký detail.
Pridávam css súbor

body{
background: url('obrazky/pozadie_sede.png') #1c2228;
font: 14px Verdana;
margin: 73px 0px 0px 0px;
min-width: 960px;
}

h2, h3, h4, h5, h6 {
text-align: center;
text-shadow: 3px 3px 7px #666666;
color: #0a294b;
font-family: Arial;
}

h1 {
font-size: 2em;
font-weight: normal;
color: white;
text-align: center;
text-shadow: 2px 2px 1px #0a294b;
}

.centrovany {
text-align: center;
}

h2{
font-size: 1.7em;
}

article {
background: url('obrazky/pozadie.png') #009aca;
padding: 30px 0px;
}

article header {
width: 250px;
float: left;
position: static;
background: none;
}

article section {
        width: 666px;
        float: left;
        background: white;
        border: 2px solid #006797;
        box-shadow: 2px 2px 7px #1c2228;
        padding: 20px;
}

.cistic {
clear: both;
}

.vlavo{
float: left;
}

header {
height: 73px;
position: fixed;
top: 0px;
background: url('obrazky/pozadie_sede.png') #1c2228;
width: 100%;
}

#logo {
background: url('obrazky/logo.png') no-repeat;
width: 250px;
height: 60px;
float: left;
margin: 7px 0px 0px 20px;
}

#logo h1 {
margin: 14px 0px 0ox 10px;
}

nav ul {
margin: 0px;
list-style-type: none;
}

nav ul li {
float: left;
padding: 0px 25px;
margin: 0 5px;
font-size: 17px;
height: 73px;
line-height: 4.3em;
}

nav a {
color: white;
text-decoration: none;
}

nav ul li:hover, .aktivni {
background: #ffbb00;
box-shadow: 0px 0px 5px black;
}

footer {
        height: 40px;
        color: white;
    margin: 20px 0 0 30px;
}

footer a {
        color:  #ffbb00;
        text-decoration: none;
}

#centrovac {
        margin: 0px auto;
        width: 960px;
}

Ďakujem za pomoc

Editováno 2.11.2018 14:00
 
Odpovědět
2.11.2018 13:59
Avatar
Miša Šebová:22. září 20:18

Ahojte, ako docielim,aby bol article header rovnako veľký ako section? Asi mi niečo uniklo :-?

Editováno 22. září 20:19
 
Odpovědět
22. září 20:18
Avatar
 
Odpovědět
22. září 20:48
Avatar
Patrik Živčák:6. listopadu 12:01

Prosím vysvetliť niekto odstavec alebo aspoň vetu (čo tým chce autor povedať):

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.

Už som prešiel aj dalšiu lekciu a celkovo nechapem ako funguje napr. zapis v css:

nav ul li:hover, .aktivny{}

Predtym bolo povedane, že sa da vytvorit triedny selekor nejako takto: .selektor{ }, lenže tu je to akosi pospájané a vysvetlenie som nevidel v lekciach alebo som len nepozorný neviem. Hlavne ta časť s čiarkou alebo to proste definujem jeden štyl pre viac selektorov akože napr.

p, .selektor{
        color: gray;
}

Je to v tomto zmysle, že dám jeden štýl môjmu vlastnému selektoru a zaroveň aj napr. odstavcu?

Ospravedlňujem sa za dlhšiu otázku.

Editováno 6. listopadu 12:02
 
Odpovědět
6. listopadu 12:01
Avatar
Odpovídá na Patrik Živčák
Andy Scheuchzer:6. listopadu 18:42

Tou větou měl autor na mysli, že když budeš v úvodu, dáš třídu aktivni odkazu s úvodem. Když se přesuneš do O mně, bude .aktivni odkaz na o-mne.html.

Ano, čárka ti umožňuje použít více selektorů pro jeden blok stylů.

Dlouhé otázky jsou v pořádku, nějak přece své myšlenky sdělit musíš ;-)

Odpovědět
6. listopadu 18:42
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
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 34. Zobrazit vše