16. diel - Navigačné menu, pätička a HTML entity

V predchádzajúcom cvičení, Riešené úlohy k 14.-15. lekciu HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

Na dnešný HTML/CSS tutoriál máme sľúbenú tvorbu navigačného menu v hlavičke a tvorbu pätičky.

Hlavička

Na hlavičku použijeme opäť tag <header>. Ten sme už použili na definíciu hlavičky článku <article>, teraz ho použijeme na definíciu hlavičky celého <body>. Vyhľadávače vďaka tagu spoznajú, že sa jedná o hlavičku a budú sa podľa toho správať. Opäť zopakujem, že v minulosti sa k tomuto používali tagy <div>, čo je teraz nesémantické. V stránke plnej tagov <div> sa nevyzná ani kodér, ani vyhľadávač.

Hneď za začiatok <body> si teda vložme tag <header>:

<header>

</header>

V hlavičke sa budú nachádzať dve veci: logo a navigačné menu.

Logo

Logo vložíme do elementu <div> a opatríme ho atribútom id s hodnotou logo:

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

Do loga sme vložili nadpis <h1> a sprievodný text. Objavujú sa nám tu dva nové tagy:

<span> - slúži na zoskupenie riadkových elementov alebo časti textu, aby ich bolo možné ľahko naštylovať. Rovnako ako tag <div> tento tag nenesie žiadny význam a používa sa teda iba na štylovanie.
<small> - slúži na označenie textu s nízkym významom, napríklad k vedľajším poznámkam. Často sa do neho píše napríklad copyright, my v ňom teraz máme vložené "webdeveloper".

Možno vás zarazilo, že na stránke budeme mať dva nadpisy prvej úrovne (jeden v článku a druhý v logu), keď sme na začiatku kurzu povedali, že <h1> má byť na stránke iba raz. Trochu toto tvrdenie poupravíme. Stará špecifikácia HTML neumožňovala 2 nadpisy prvej úrovne na jednej stránke. HTML s tým od verzie 5 nemá problém, ak sú nadpisy vložené v headeri. Aj logicky je to lepšie, pretože nadpis má ako webová stránka, tak článok v nej zobrazený.

Atribúty `id` a `class`

S týmito atribútmi sme sa už stretli, aj tak si ale ešte pripomenieme, v čom sa vlastne líšia. Atribút id má podobný význam ako atribút class, slúži na priradenie štýlu určitému elementu. Rozdiel oproti class je v tom, že element s určitým id (napr. s id="logo" vyššie) môže byť v celom HTML dokumente iba jeden. Určitú class sme mohli priradiť koľkým elementom sme chceli. ID sa využíva teda na štylovanie unikátnych prvkov na stránke. Ukážkovým príkladom je práve logo, ktoré je na každej stránke len jedno. K tejto téme sa ešte vrátime pri štylovaní.

Ako druhý prvok do headeru vložíme navigačné menu. Na vymedzenie navigačnej oblasti slúži tag <nav>. Jeho použitie sa opäť oproti tagu <div> oplatí, pretože vyhľadávače pochopia, že sa jedná o navigáciu.

Otázkou zostáva, aký element použijeme na reprezentáciu samotného navigačného menu. Pokiaľ vás napadá tabuľka, tak tu používať nebudeme. Tabuľka je určená na prezentáciu tabuľkových hodnôt. Mohlo by vás napadnúť dať za seba niekoľko divov ako tlačidlá, to už je trochu lepšie, ale stále nesémantické.

Skúsme sa sami seba opýtať: "Čo je to navigácia?". Navigácia je zoznam niekoľkých odkazov na najdôležitejšie podstránky webu. Z toho dôvodu umiestnime medzi tagmi navigácie zoznam, ktorý vytvoríme pomocou tagu <ul> a položiek <li>. Navigácia bude vyzerať asi takto:

<nav>
    <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="aboutme.html">About Me</a></li>
        <li><a href="skills.html">Skills</a></li>
        <li><a href="references.html">References</a></li>
        <li><a class="contact-button" href="contact.html">Contact</a></li>
    </ul>
</nav>

Všimnite si, že sme prvej položke zoznamu dali triedu .active. Pri každej podstránky webu nastavíme túto triedu tej položke v menu, v ktorej sa teraz nachádzame. Pre užívateľov to bude prínosné, pretože sa bude na našom webe lepšie orientovať. Položke "Contact" sme pridali triedu .contact-button - určite teda podľa logiky pomenovávania tried tušíte, že ju nakoniec ostylujeme podobne ako naše referenčné tlačidlo, aby bol web trochu zaujímavejší a záložka s kontaktmi nešla prehliadnuť

Nové HTML súbory, na ktoré sa v elementoch <a> odkazujeme, si vytvoríme neskôr.

Keď si teraz stránku zobrazíme v prehliadači, bude trochu nevzhľadná, pretože sme na hlavičku ešte neaplikovali žiadny štýl:

My First Webstite

index.html

Na štýlovanie sa dostaneme nabudúce, uvidíte, aké je CSS mocné.

Pätička

Pridajme si teraz na koniec <body> aj pätičku. Podobne ako existuje tag <header>, existuje aj tag <footer>, ktorý slúži na označenie pätičky. Môže sa jednať o pätičku článku alebo o pätičku celého <body>. Na koniec <body> si teda vložme tag <footer>:

<footer>

</footer>

Do pätičky stránky patria informácie o copyrighte, rok vytvorenia a kto web vytvoril. Pri väčších weboch býva zvykom do pätičky umiestňovať navigáciu, aj keď osobne mi to príde zmätočné. Umiestnime do nej nasledujúci kód:

Created by &copy;HoBi 2021 for <a href="https://itnetwork.sk">itnetwork.sk</a>

Sekvencia © označuje špeciálny znak ©. Tieto znaky vkladáme pomocou tzv. HTML entít.

HTML entity

Možno vás už napadlo, čo budete robiť, keď budete potrebovať do textu vašej stránky zapísať nejaký zo znakov, ktoré využíva jazyk HTML. Sú to najmä znaky <, >, " a &. Hoci sa pravdepodobne nič nestane, keď znak v texte použijete, bude vaša stránka nevalidná. Prehliadače s niektorými chybami v HTML kóde počítajú, ale to nie je dôvodom na to, aby sme ich robili a už vôbec sa nedá spoľahnúť na to, že nám to vždy prejde.

Tento kód je teda zle:

<!-- This code is wrong -->
<p>He claimed that a > b, but that wasn't true.</p>

Problém je samozrejme v tom, že tieto znaky (tu väčšietko >) zmätú prehliadač, ktorý si myslí, že otvárame nejaký HTML tag. Z tohto dôvodu niekoľko znakov zapisujeme pomocou tzv. HTML entít.

Na napísanie komentára je v ukážke použitý špeciálny tag . Komentáre slúžia iba pre poznámky vývojárov, prehliadači sú ignorované.

Najdôležitejšie entity sú tieto:

Znak	Číslo entity	Názov entity	Popis
			Nedělitelná mezera
"	"	"	Úvodzovka
'	'	'	Apostrof
&	&	&	Ampersand
<	<	<	Menšie
>	>	>	Väčšie
€	€	€	Euro
©	©	©	Copyright
®	®	®	Registrovaná známka
™	™	™	Ochranná známka

Pomocou entít je možné zapísať úplne všetky znaky. Je nutné ich používať na vloženie znakov, ktoré sú rezervované pre jazyk HTML. Môžeme ich použiť aj na vloženie znakov, ktoré sa na klávesnici zle píšu (napr. copyright). Entitu môžeme zapísať buď pomocou názvu alebo pomocou kódu (názov sa preferuje kvôli lepšej čitateľnosti).

Keď dáme za seba niekoľko nedeliteľných medzier nbsp;, prehliadač z nich neurobí jednu ako u medzery normálne, ale ponechá všetky. Začiatočníci, ktorí nepoznajú margin a padding, takto odsadzujú elementy, čo je úplne zle a preto sa tomu vyhnite.

Využitie nedeliteľnej medzery je napr. v texte za predložkami a spojkami, kedy nechceme, aby sa medzera zalomila a znak zostal na samostatnom riadku.

Opravme si ukážku vyššie, aby bola validná:

<p>He claimed that a &gt; b, but that was not true.</p>

K téme validity sa ešte vrátime na konci kurzu, každopádne by sme sa o ňu mali snažiť a kto vám bude hovoriť opak, tak HTML a CSS nerozumie.

Vloženie zdrojových kódov

Pomocou HTML entít sa na stránky vkladajú napríklad zdrojové kódy HTML, kedy chceme, aby sa tagy iba zobrazili, ale neaplikovali:

<pre>
<code>
&lt;!doctype html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Title&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        Body
    &lt;/body&gt;
&lt;/html&gt;
</code>
</pre>

Takto sú do stránky vložené aj kódy v tejto lekcii, využitie je teda napríklad pre výukové materiály. Všimnite si tagu <code>, ktorý slúži na označenie oblasti so zdrojovým kódom. Ďalej tu máme tag <pre>. Používa sa v prípade, keď chceme zobraziť predformátovaný text tak, ako sme ho zapísali. Teda aby prehliadač neumazal naše medzery, tabulátory a konce riadkov. Taký text sa vypíše presne ako je zapísaný a neproporcionálnym písmom.

Výsledok:

Source code

code.html

Na prevedenie HTML kódu alebo iného textu na entity môžete použiť Online prevodník špeciálnych HTML znakov na entity a späť.

Dnešná práca je ako vždy na stiahnutie v prílohe.

V ďalšej lekcii, Štylovanie hlavičky HTML stránky a flexbox , ostylujeme hlavičku a ukážeme si flexbox.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 0x (2.27 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

2 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity

16. diel - Navigačné menu, pätička a HTML entity

Hlavička

Logo

Atribúty id a class

Navigačné menu

Pätička

HTML entity

Vloženie zdrojových kódov

Stiahnuť

Atribúty `id` a `class`