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

V predchádzajúcom cvičení, Riešené úlohy k 14.-15. lekcii 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

Pre 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 na to používali tagy <div>, čo je teraz nesémantické. V stránke plnej tagov <div> sa nevyzná ani programátor, 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>Sam<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štýlovať. Rovnako ako tag <div> tento tag nenesie žiaden význam a používa sa teda iba na štýlovanie.
<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), hoci sme si 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á nielen webová stránka, ale aj č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ť ľubovoľnému počtu elementov. ID sa teda využíva na štýlovanie 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 štýlovaní.

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. Ak vám napadá tabuľka, tak tú používať nebudeme. Tabuľka je určená na prezentáciu tabuľkových hodnôt. Mohlo by vám 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&nbsp;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 kóde bola v texte odkazu About me použitá nezlomiteľná medzera. Do HTML je zapísaná so sekvenciou  , ktorá je vložená namiesto medzery. Vďaka tomu sa pri zmenšení obrazovky tento navigačný záznam nerozdelí na dva riadky.

Všimnite si, že sme prvej položke zoznamu dali triedu .active. Pri každej podstránke webu nastavíme túto triedu tej položke v menu, v ktorej sa práve nachádzame. Pre používateľov to bude prínosné, pretože sa im bude na našom webe lepšie orientovať. Položke "Contact" sme pridali triedu .contact-button - podľa logiky pomenovávania tried určite tušíte, že ju nakoniec oštýlujeme 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 žiaden štýl:

Sam Bittner - Web Developer

index.html

Ku štýlovaniu 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;SaBi 2024 for <a href="https://ictdemy.com">ictdemy.com</a>

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

HTML entity

Možno vám už napadla otázka, čo robiť, ak 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 >) zmätú prehliadač, ktorý si myslí, že otvárame nejaký HTML tag. Z tohto dôvodu niektoré znaky 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 ako poznámky vývojárov, prehliadačmi sú ignorované.

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

Znak	Číslo entity	Názov entity	Popis
			Nedeliteľná medzera
"	"	"	Ú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 pri normálnej medzere, 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 ak vám niekto bude tvrdiť 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 tag <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č nevymazal naše medzery, tabulátory a konce riadkov. Taký text sa vypíše presne tak, 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, Štýlovanie hlavičky HTML stránky a flexbox , oštýlujeme 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é 48x (2.28 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:

72 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

Najčastejšie vyhľadávané

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`