🏆 Tvůj pokrok
Udělej každé cvičení a sleduj, jak tvůj pokrok roste! 📈
Co je vlastně HTML?
Kapitola 1 – Základy základů
🤔 Jak funguje internet?
Když otevřeš stránku jako youtube.com nebo google.com, tvůj počítač stáhne soubor — a ten soubor je napsaný v jazyce HTML. Prohlížeč (Chrome, Firefox...) si HTML přečte a zobrazí ti hezkou stránku s obrázky a textem.
🏗️ HTML je jako LEGO
Představ si, že HTML je jako stavebnice LEGO. Každý dílek má svou funkci:
- 🧱 Jeden dílek dělá nadpis
- 🧱 Druhý dílek dělá odstavec textu
- 🧱 Třetí dílek vloží obrázek
- 🧱 Čtvrtý dílek vytvoří odkaz
Tyto „dílky" se v HTML jmenují tagy nebo značky.
🎯 To nejdůležitější
HTML soubor je obyčejný textový soubor s příponou .html. Můžeš ho napsat v Poznámkovém bloku a spustit v prohlížeči. To je celé kouzlo!
🧠 Otázka 1
Tagy – stavební kameny HTML
Kapitola 2 – Jak tagy fungují
🔤 Jak vypadá tag?
Tag je napsaný v lomených závorkách < >. Každý tag má začátek a konec:
📚 Nejdůležitější tagy
✏️ Vyzkoušej si tagy – živý editor!
Napiš HTML kód vlevo a klikni na ▶ Spustit – vpravo uvidíš výsledek!
🧠 Otázka 2
Kostra HTML stránky
Kapitola 3 – Každá stránka začíná takhle
🦴 Základní kostra
Každá HTML stránka musí mít tuto strukturu. Bez ní prohlížeč neví, co si s ní má počít:
🔍 Co každý tag dělá?
<!DOCTYPE html>— Říká prohlížeči: „Hej, tohle je HTML stránka!"<html>— Začátek celé HTML stránky<head>— Záhlaví – tady jsou informace, které nevidíš na stránce (název stránky, nastavení)<title>— Název stránky – zobrazí se v záložce prohlížeče<body>— Tělo stránky – SEM píšeš vše, co chceš zobrazit!
<body>!Texty, nadpisy a odstavce
Kapitola 4 – Jak psát text na stránce
📐 Nadpisy – od největšího k nejmenšímu
HTML má 6 úrovní nadpisů. Podívej se na rozdíl:
h1 – Největší nadpis
h2 – Druhý nadpis
h3 – Třetí nadpis
h4 – Čtvrtý nadpis
h5 – Pátý nadpis
h6 – Nejmenší nadpis
Odkazy a obrázky
Kapitola 5 – Hypertextové spojení
🔗 Jak udělat odkaz?
Odkaz vytvoříš tagem <a>. Musíš mu říct, kam vede — to napíšeš do atributu href:
nazev="hodnota".🖼️ Jak vložit obrázek?
Obrázek vložíš tagem <img>. Tento tag nemá zavírací tag! Adresu obrázku dáš do atributu src:
alt je popis obrázku pro případ, že se obrázek nenačte. Vždy ho vyplňuj!CSS – barvy, velikosti a styl
Kapitola 6 – Udělej stránku hezkou!
🎨 Co je CSS?
HTML říká co je na stránce. CSS říká jak to vypadá — jakou má barvu, velikost, font...
CSS se píše do tagu <style>, který patří do <head>:
h1 {
color: red;
font-size: 40px;
}
</style>
🎮 Hraj si s CSS – měň styl textu!
Pohybuj posuvníky a koukej, jak se mění ukázkový text níže!
Seznamy
Kapitola 7 – Odrážky a číslování
📋 Dva druhy seznamů
<ul><li>...</li></ul>
- Jablko
- Banán
- Třešeň
<ol><li>...</li></ol>
- Jablko
- Banán
- Třešeň
🧠 Otázka 3
Závěrečná výzva!
Kapitola 8 – Vytvoř svou vlastní stránku
🎯 Tvůj úkol
Vytvoř stránku o svém oblíbeném tématu! Musí obsahovat: nadpis, odstavce, obrázek, seznam a alespoň jeden CSS styl.
💡 Nápady na témata
🏅 Tvoje odznaky
Splň cvičení v každé kapitole a získej odznak!
Taháček – přehled všech tagů
Kapitola 9 – Rychlý přehled
📋 HTML Tagy
🎨 CSS Vlastnosti
🚀 Co dál?
Zvládl jsi základy HTML a CSS! Teď si vyzkoušej: ulož svůj kód jako soubor index.html a otevři ho v prohlížeči. Máš svou první vlastní webovou stránku! 🎉