HTML Začátečník – Část 2: Jdeme dál!

Kapitola 1 📦

Tag <div> — skříňka na obsah

Jak rozdělovat stránku do bloků

📦 Co je <div>?

<div> je jako průhledná krabička. Sám o sobě nic nevidíš — ale můžeš do něj zabalit části stránky a pak celou krabičku nastylovat pomocí CSS.

Díky <div> umístíš obsah přesně tam, kam chceš: navigaci nahoru, postranní panel vpravo, patičku dolů.

🪆 Dívky zanořené v dívkách (vnořování tagů)

Tagy mohou být uvnitř jiných tagů — jako matrjošky:

<body>

<h1> Název mé stránky

<p> Tady je text stránky...

💡

Vnořování tagů je jako složka uvnitř složky na počítači. Každý tag musíš správně zavřít předtím, než zavřeš jeho „rodiče"!

🆔 Atributy id a class

Každému <div> můžeš dát jméno, aby na něj šlo odkazovat z CSS:

HTML + CSS

/* CSS — nastyluje pouze div s id="hlavicka" */
#hlavicka {
  background-color: darkblue;
  color: white;
  padding: 20px;
}

/* .cerveny nastyluje VŠECHNY elementy s class="cerveny" */
.cerveny {
  color: red;
}

🔑

#id je unikátní jméno — každé ID smí být na stránce jen jednou. .třída (class) může mít víc prvků najednou.

Editor č. 1 — Div a CSS třídy ⚡ Živý

📝 Kód

👁️ Výsledek

🧠 Otázka č. 1

Co dělá tag <div>?

Kapitola 2 🎭

Tag <span> — styling uvnitř textu

Jak obarvit jedno slovo nebo část věty

🎭 Div vs. Span — jaký je rozdíl?

<div> zabírá celý řádek — je to blokový element.
<span> se vejde přímo do textu — je to řádkový element.

Toto je normální věta. A toto slovo je <span style="color:orange">oranžové</span> a zbytek pokračuje normálně dál.

💡

Použij <span> kdykoliv chceš nastylovat jen část textu bez zalomení na nový řádek.

🖌️ Inline styly

CSS lze psát přímo do HTML tagu pomocí atributu style="". Říkáme tomu inline styl:

HTML

<p>
  Mám rád <span style="color:green; font-weight:bold;">minecraft</span>
  a taky <span style="color:red; font-size:20px;">fotbal</span>.
</p>

⚠️

Inline styly jsou praktické pro rychlé zkoušení, ale pro větší stránky je lepší používat <style> v hlavičce — kód bude přehlednější.

Editor č. 2 — Span a inline styly ⚡ Živý

📝 Kód

👁️ Výsledek

Kapitola 3 📊

Tabulky

Jak zobrazit data v řádcích a sloupcích

🏗️ Struktura tabulky

Tabulka se skládá ze tří druhů tagů:

<table> — celá tabulka
<tr> — jeden řádek (table row)
<th> — záhlaví (tučný nadpis sloupce)
<td> — jedna buňka s daty (table data)

Hráč	Body	Úroveň
Tomáš	1 240	🥇 Zlatý
Lukáš	980	🥈 Stříbrný
Eliška	760	🥉 Bronzový

Editor č. 3 — Moje tabulka ⚡ Živý

📝 Kód

👁️ Výsledek

🧠 Otázka č. 2

Jaký tag použiješ pro JEDEN ŘÁDEK v tabulce?

Kapitola 4 📝

Formuláře — kde uživatel píše

Textová pole, tlačítka a výběry

📝 Prvky formuláře

Formuláře slouží k zadávání dat — přihlášení, vyhledávání, kontaktní formulář. Základní tagy:

<input type="text">

Textové pole na jednom řádku

<input type="number">

Pole pro číslo

<input type="color">

Výběr barvy

<textarea>

Víceřádkové textové pole

<select> + <option>

Rozbalovací seznam

<button>

Klikací tlačítko

⭐

Každé pole by mělo mít <label> — popis, který říká uživateli, co má vyplnit.

Editor č. 4 — Můj formulář ⚡ Živý

📝 Kód

👁️ Výsledek

Kapitola 5 ✨

CSS Animace

Jak rozhýbat prvky na stránce

🎬 Jak funguje animace v CSS?

Animaci vytvoříš ve dvou krocích:

1. Definuješ pohyb pomocí @keyframes — řekneš, jak vypadá začátek a konec
2. Přiřadíš animaci k elementu pomocí vlastnosti animation

CSS

/* 1. Definice pohybu */
@keyframes poskakovat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

/* 2. Přiřazení k elementu */
h1 {
  animation: poskakovat 1s ease infinite;
  /*           název  čas rychlost opakování */
}

🎮 Galerie animací — klikni a sleduj!

💗

Pulsování

scale()

⚙️

Točení

rotate()

🏀

Skákání

translateY()

📳

Třesení

translateX()

⭐

Záře

box-shadow

👻

Mizení

opacity

Editor č. 5 — Animuj to! ⚡ Živý

📝 Kód

👁️ Výsledek

🧠 Otázka č. 3

Jak se jmenuje CSS pravidlo, ve kterém definuješ průběh animace?

Kapitola 6 🏗️

Layout — rozmístění bloků

Jak dát obsah vedle sebe pomocí Flexbox

📐 Normálně je vše pod sebou

Ve výchozím stavu HTML se <div> bloky řadí pod sebe. Ale co když chceme sloupce vedle sebe?

🪄

Stačí přidat na rodičovský div display: flex; — a najednou jsou jeho děti vedle sebe! Říkáme tomu Flexbox.

⚡ Nejdůležitější Flexbox vlastnosti

display: flex

Zapne Flexbox na rodiči

gap: 16px

Mezera mezi prvky

justify-content

Zarovnání vodorovně

align-items

Zarovnání svisle

flex-wrap: wrap

Zalamování na více řádků

flex: 1

Prvek roste, aby zaplnil místo

Editor č. 6 — Flexbox layout ⚡ Živý

📝 Kód

👁️ Výsledek

🧠 Otázka č. 4

Jakou CSS vlastnost zapneš na rodiči, aby se jeho děti seřadily vedle sebe?

Kapitola 7 🏆

Finální projekt: Moje osobní stránka

Použij vše, co ses naučil/a!

🏆 Můj finální projekt! ✨ Vytvoř svou stránku

📝 Tvůj kód

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <title>Moje osobní stránka</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial; background: #f5f5f5; }

/* Navigace */
    nav {
      background: #1a1a2e;
      display: flex;
      gap: 20px;
      padding: 14px 24px;
      align-items: center;
    }
    nav .logo {
      color: #e94560;
      font-weight: bold;
      font-size: 18px;
      margin-right: auto;
    }
    nav a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      font-size: 14px;
    }
    nav a:hover { color: #e94560; }

/* Hero sekce */
    .hero {
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      color: white;
      padding: 60px 24px;
      text-align: center;
    }
    @keyframes vyskoc {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }
    .hero-emoji {
      font-size: 80px;
      animation: vyskoc 2s ease infinite;
      display: block;
      margin-bottom: 16px;
    }
    .hero h1 { font-size: 36px; margin-bottom: 10px; }
    .hero p  { font-size: 18px; opacity: 0.8; }

/* Obsah */
    .obsah {
      max-width: 700px;
      margin: 30px auto;
      padding: 0 20px;
    }
    .card {
      background: white;
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 20px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    .card h2 { margin-bottom: 12px; color: #1a1a2e; }

/* Tabulka */
    table { width: 100%; border-collapse: collapse; }
    th { background: #1a1a2e; color: white; padding: 8px 12px; }
    td { border: 1px solid #ddd; padding: 8px 12px; }

/* Formulář */
    label { display: block; font-weight: bold; margin-top: 10px; }
    input, textarea {
      width: 100%; padding: 8px; margin-top: 4px;
      border: 2px solid #ddd; border-radius: 6px; font-size: 14px;
    }
    button {
      margin-top: 12px; padding: 10px 22px;
      background: #e94560; color: white;
      border: none; border-radius: 6px;
      font-size: 15px; font-weight: bold; cursor: pointer;
    }

/* Patička */
    footer {
      text-align: center;
      padding: 20px;
      background: #1a1a2e;
      color: rgba(255,255,255,0.5);
      font-size: 13px;
    }
  </style>
</head>
<body>

<nav>
    <span class="logo">✨ Moje stránka</span>
    <a href="#">O mně</a>
    <a href="#">Zájmy</a>
    <a href="#">Kontakt</a>
  </nav>

<div class="hero">
    <span class="hero-emoji">👋</span>
    <h1>Ahoj! Jsem [tvoje jméno]</h1>
    <p>Toto je moje první vlastní webová stránka!</p>
  </div>

<div class="card">
      <h2>👤 O mně</h2>
      <p>Je mi [věk] let a bydlím v [město].
      Rád/a [co děláš ve volném čase].</p>
    </div>

<div class="card">
      <h2>⭐ Moje top 3 věci</h2>
      <table>
        <tr><th>Věc</th><th>Proč ji miluju</th></tr>
        <tr><td>🎮 [hra]</td><td>Protože...</td></tr>
        <tr><td>🐾 [zvíře]</td><td>Protože...</td></tr>
        <tr><td>🍕 [jídlo]</td><td>Protože...</td></tr>
      </table>
    </div>

<div class="card">
      <h2>📬 Napiš mi</h2>
      <label>Tvoje jméno:</label>
      <input type="text" placeholder="Napiš jméno...">
      <label>Zpráva:</label>
      <textarea rows="3" placeholder="Napiš zprávu...">

👁️ Tvůj výsledek

🏅 Odznaky Části 2

📦

Div Mistr

🎭

Span Guru

📊

Tabulkář

📝

Formulářák

✨

Animátor

🏗️

Layoutér

🏆

Web Vývojář

Taháček 2 📖

Taháček Části 2

Přehled nových tagů a vlastností

🏷️ Nové HTML tagy

<div>

Blokový kontejner

<span>

Řádkový kontejner

<table>

Tabulka

<tr>

Řádek tabulky

<th>

Záhlaví buňky

<td>

Datová buňka

<form>

Formulář

<input>

Vstupní pole

<label>

Popis pole

Tlačítko

Rozbalovací seznam

Víceřádkové pole

🎨 Nové CSS vlastnosti

display: flex

Flexbox layout

gap

Mezera mezi prvky

animation

Přiřazení animace

@keyframes

Definice animace

transform

Pohyb, otočení, zvětšení

opacity

Průhlednost (0–1)

border-radius

Zaoblené rohy

box-shadow

Stín prvku

cursor: pointer

Ručička na prvku

transition

Plynulá změna stylu

Jdeme na vyšší level!

Tag <div> — skříňka na obsah

📦 Co je <div>?

🪆 Dívky zanořené v dívkách (vnořování tagů)

🆔 Atributy id a class

Tag <span> — styling uvnitř textu

🎭 Div vs. Span — jaký je rozdíl?

🖌️ Inline styly

Tabulky

🏗️ Struktura tabulky

Formuláře — kde uživatel píše

📝 Prvky formuláře

CSS Animace

🎬 Jak funguje animace v CSS?

🎮 Galerie animací — klikni a sleduj!

Layout — rozmístění bloků

📐 Normálně je vše pod sebou

⚡ Nejdůležitější Flexbox vlastnosti

Finální projekt: Moje osobní stránka

🎯 Tvůj úkol

🏅 Odznaky Části 2

Taháček Části 2

🏷️ Nové HTML tagy

🎨 Nové CSS vlastnosti

🚀 Co dál?