HTML a CSS: Ako funguje webová stránka a ako vytvoriť jednoduchý statický web

Webová stránka je v jadre súbor textu (HTML) s pravidlami (CSS), ktoré určujú štruktúru aj vzhľad. HTML (HyperText Markup Language) popisuje obsah a logickú štruktúru dokumentu – napríklad nadpisy, odstavce, zoznamy, obrázky alebo odkazy. HTML používa značky (tagy) v uhlových zátvorkách, napr. <html>, <head>, <body>, <h1>, <p>, <a>, <img>. Každá stránka začína deklaráciou typu dokumentu <!DOCTYPE html>, potom nasleduje koreňový element <html> s dvoma hlavnými časťami: <head> (meta údaje, titulok, prepojenia na štýly a skripty) a <body> (viditeľný obsah).

Semantické tagy, ako <header>, <nav>, <main>, <article>, <section> a <footer>, pomáhajú čitateľom (aj vyhľadávačom či asistenčným technológiám) lepšie pochopiť obsah. Dôležité je aj správne používanie nadpisov <h1> až <h6> – slúžia na logickú hierarchiu. Obrázky vkladáme cez <img src="cesta" alt="popis">; alt atribút je zásadný pre prístupnosť.

CSS (Cascading Style Sheets) určuje, ako má HTML vyzerať: farby, písmo, rozloženie, medzery a animácie. Kaskádovanie znamená, že štýly sa aplikujú podľa pravidiel poradia a špecifickosti. CSS môže byť vložené priamo do HTML (inline style), umiestnené v <style> v hlavičke (internal) alebo uložené v samostatnom súbore a prepojené cez <link rel="stylesheet" href="styles.css"> (external – najlepšia prax pre údržbu).

Základné CSS koncepty

• Selektory: určujú, ktorému elementu sa štýl aplikuje. Napríklad elementový selektor p { color: red; } cieli všetky odstavce. Triedy (.trieda) a ID (#id) umožňujú cieliť konkrétne prvky. Môžeme kombinovať selektory, použiť potomkovské (nav .link) alebo pseudo-prvky (::before) a pseudo-triedy (:hover).
• Vlastnosti a hodnoty: napr. font-size, color, margin, padding, display, width, height, background.
• Box model: každý blok v dokumente má obsah, padding (vnútorné odsadenie), border (ohraničenie) a margin (vonkajšie odsadenie). Rozumejte tomu, ako sa tieto veličiny sčítavajú pri výpočte veľkosti prvku.
• Display: blokové elementy (display: block) zaberajú celý riadok, inline elementy sú v jednom riadku. Flexbox a CSS Grid sú moderné spôsoby rozloženia.
• Flexbox: jednoduchý nastroj pre jednorozmerné rozloženie (riadky alebo stĺpce). Umožňuje zarovnávanie, rozdeľovanie priestoru a responzívne rozťahovanie prvkov.
• Grid: vhodný pre dvojrozmerné rozloženia (súčasne riadky i stĺpce), flexibilnejší pre komplexné štruktúry.
• Media queries: umožňujú meniť štýly podľa veľkosti obrazovky (responzívny dizajn). Typický prístup je „mobile-first“ — štýly pre malé obrazovky píšeme najprv a väčšie prispôsobenia pridávame cez @media (min-width: ...).

Jednoduchý príklad (čistý text; vložte do súboru index.html a styles.css)

index.html:

<!DOCTYPE html>

<html lang="sk">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Moja prvá stránka</title>

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

</head>

<body>

<header>

<h1>Vitajte na mojej stránke</h1>

<nav><a class="link" href="#">Domov</a> | <a class="link" href="#">O mne</a></nav>

</header>

<main>

<article>

<h2>Krátky článok</h2>

<p>Toto je ukážkový odstavec. Obrázok má alt popis a stránka je responzívna.</p>

<img src="obrazok.jpg" alt="Popis obrázka">

</article>

</main>

<footer>© 2026</footer>

</body>

</html>

styles.css:

body { font-family: Arial, sans-serif; margin: 0; line-height: 1.5; }

header { background: #0a74da; color: #fff; padding: 1rem; }

.link { color: #fff; text-decoration: none; }

main { padding: 1rem; }

img { max-width: 100%; height: auto; display: block; }

@media (min-width: 600px) {

main { max-width: 800px; margin: 0 auto; }

}

Praktické rady a dobré návyky

• Používajte validný a semantický HTML; validátor (validator.w3.org) pomôže nájsť chyby.
• Dbajte na prístupnosť: alt text pre obrázky, kontrast farieb, správna štruktúra nadpisov, používajte <label> pre formuláre.
• Responzívny dizajn testujte v rôznych veľkostiach okna a na mobilných zariadeniach.
• Využívajte DevTools v prehliadači (F12) na ladenie HTML/CSS a overenie modelu boxov či responzívnych pravidiel.
• Verzionovanie kódu pomocou Git a hosting na GitHub Pages alebo Netlify umožní rýchle zdieľanie a spätné sledovanie zmien.
• Štýly oddeľujte do externých súborov a používajte postupy ako BEM (názvoslovie tried) pre čitateľný CSS.

Ako sa ďalej učiť

Začnite prakticky: vytvorte jednoduchú stránku, skúšajte meniť štýly a layouty, skúste Flexbox a Grid riešiť bežné rozloženia. Online zdroje (MDN Web Docs, freeCodeCamp, W3Schools) a interaktívne cvičenia pomôžu upevniť znalosti. Neskôr pridajte JavaScript pre interaktivitu.

Zhrnutie: HTML definuje obsah a štruktúru, CSS určuje vzhľad. Keď tieto dve technológie pochopíte a osvojíte si základné postupy (semantika, box model, responzívny dizajn), zvládnete vytvoriť funkčnú a estetickú webovú stránku a ľahko ju nasadiť online.