Potrebuješ navigáciu

<nav></nav>

⁠

⁠

⁠

⁠

⁠

⁠

Do navigácie zabalíš odkazy

do href budeš vkladať id

<nav> <a href=”#info”>Info</a>

<a href=”#kontakt”>Kontakt</a>

<a href=”#ponuka”>Ponuka</a> </nav>

⁠

⁠

⁠

# znamená že odkazuješ na id-čka

⁠

⁠

⁠

id-čka pridáš do tých elementov stránky kam chceš odkazovať

napríklad do nadpisu

<h1 id=”info”>Info</h1>

⁠

⁠

⁠

alebo do sekcie

<section id=”info”>Info</section>

⁠

⁠

⁠

päta stránky nemusí byť zabalená len do značky <section> alebo <div> možete použiť aj značku <footer> ako obaľovač pre pätu stránky

<footer> <p>&copy; 2026 Tvoje Meno.</p> ​</footer>

pridanie kontaktného telefónneho čísla (klikne na: tel. číslo)

<a href="tel:+4733378901">+47 333 78 901</a>

pridanie kontaktného telefónneho čísla (klikne na: Zavojajte mi)

<a href="tel:+4733378901">Zavolajte mi</a>

pridanie mailovej adresy (klikne na: Pošlite mi e-mail)

<a href="mailto:someone@example.com">Pošlite mi e-mail</a>

Výsledok

⁠

⁠

⁠

Keď klikneš na položku navigácie stránka zoscrolluje nižšie na objekt ktorý je označený id-čkom

Budeš potrebovať vložiť obrázok <img>

<img src=”obrazok.jpg”>

⁠

⁠

⁠

A teraz vzhľad stránky

Potrebuješ pripojiť .css súbor do hlavičky stránky

<link rel="stylesheet" href="styles.css">

Chceme aby stránka bola až po okraj okna prehliadača musíme vynulovať margin a padding.

body, html { margin: 0; padding: 0; }

Budeš potrebovať zmeniť pozadie

background: #bada55;

Budeš potrebovať zmeniť farbu textu

color: #bada55;

Budeš potrebovať zmeniť písmo

font-family: "Arial Black", "sans-serif";

Budeš potrebovať aby sa odkaz nejak zmenil po prejdení myšou “:hover”

a:hover { background:#fff; }