2. ročník · Informačné a sieťové technológie

Ako postaviť stránku krok za krokom

Interaktívny manuál k projektu NetLab – Počítačové siete. Hýb posuvníkmi, meň farby a hneď uvidíš výsledok aj kód, ktorý si môžeš skopírovať do svojho styles.css.

premenné v :root trieda .container objekty vedľa seba navigácia
čo sa naučíš

1Kostra projektu a prepojenie CSS

Skôr než začneme štýlovať, musí byť CSS súbor správne pripojený k HTML.

Štruktúra priečinka
📁 Priezvisko_Meno/
├── 📄 index.html
├── 🎨 styles.css
└── 📁 images/
    ├── logo.png
    ├── banner.jpg
    ├── router.png
    └── switch.png
Cesty k obrázkom píš relatívne: images/router.png, nikdy nie C:\Users\...
Riadok <link rel="stylesheet" href="styles.css"> patrí do <head>. Keď sa štýly neprejavia, skontroluj najprv tento riadok a názov súboru.
Odporúčané poradie v súbore styles.css
1. Premenné
:root { --modra: … }
2. Reset a základ
* { margin:0; … }, body, nadpisy
3. Hlavička a navigácia
header, nav, ul.menu
4. Rozloženie a obsah
.container, .left, tabuľka, päta

2Farby cez :root a premenné

Farbu zapíšeš raz a používaš ju všade. Keď ju zmeníš, zmení sa na celej stránke naraz.

Vytvor premennú

V bloku :root (koreň dokumentu = celá stránka). Názov musí začínať dvomi pomlčkami: --modra: #0D4F9E;

Použi ju cez var()

Namiesto farby napíšeš var(--modra), napr. background-color: var(--modra);

Zmeň na jednom mieste

Vyskúšaj nižšie: zmeň farbu v :root a sleduj, ako sa prefarbí hlavička, menu aj tlačidlo.

Zmeň premenné
Hotové palety
index.html – náhľad
Časté chyby
  • color: --modra; → chýba var()
  • color: var(modra); → chýbajú pomlčky --
  • :root napísaný ako root alebo .root → chýba dvojbodka
  • chýbajúca bodkočiarka ; za premennou pokazí aj ďalší riadok
Prečo to robíme?

Firmy majú svoje „firemné farby“. Keď sa rozhodnú zmeniť odtieň modrej, stačí prepísať jeden riadok v :root – a nemusíš hľadať #0D4F9E na 20 miestach v kóde.

3Trieda .container

Kontajner je „krabica“, ktorá drží obsah v rozumnej šírke a v strede obrazovky. Bez neho by sa text na veľkom monitore roztiahol cez celú šírku.

Nastav kontajner
Šírka okna prehliadača
Simuluje monitor / mobil. Skús zúžiť okno pod šírku kontajnera!
Typ šírky
Šírka kontajnera
Vnútorný okraj (padding)
flex-direction
align-items
Medzera medzi deťmi (gap)
okno 1400 px

V náhľade: oranžový prerušovaný rámik = hranica .container, šedé pruhy = voľné miesto okolo (margin).

width vs. max-width

width: 1200px je vždy 1200 px – na mobile pretečie a objaví sa vodorovný posuvník. max-width: 1200px znamená „najviac 1200 px“ – na menšej obrazovke sa kontajner zúži.

margin: 0 auto

Prvá hodnota (0) = hore a dole, druhá (auto) = vľavo a vpravo. Prehliadač rozdelí voľné miesto rovnako na obe strany → kontajner je v strede. Funguje len ak má kontajner šírku.

Jedna trieda, veľa sekcií

Triedu .container dáš každej sekcii: <section class="container">. Keď chceš niektorú sekciu pod sebou, pridaj druhú triedu: class="container stlpec".

4Objekty vedľa seba (flexbox)

Zlaté pravidlo: display: flex dávaš RODIČOVI – a jeho priame deti sa postavia vedľa seba.

bez display:flex
1
2
3
bloky sú pod sebou
s display:flex
1
2
3
deti sú vedľa seba

Ihrisko flexboxu

Počet detí
flex-direction
flex-wrap
justify-content (hlavná os)
align-items (priečna os)
Šírka detí (.box)
gap
flexbox – náhľad
Výzvy – nastav ihrisko tak, aby…

Vzor: obrázok + text vedľa seba

Poradie
Pomer šírok (obrázok : text)
Zvislé zarovnanie
Zobraziť ako
V HTML sa pri prehodení mení poradie značiek – kto je v kóde prvý, je vo flexboxe vľavo.
okno 1200 px

Over si, čo vieš

Klikni na odpoveď – hneď uvidíš, či je správna. Skóre: 0 / 0