# 02 - HTML Pokročilé Elementy

## 🎯 Co se naučíte

V této lekci se naučíte pracovat s pokročilejšími HTML elementy a Emmet zkratkami.

## 📚 Témata lekce

- **Tabulky** (`<table>`, `<tr>`, `<td>`, `<th>`)
  - Struktura tabulek
  - Řádky (`<tr>`) a buňky (`<td>`)
  - Nadpisy tabulek (`<th>`)
  - Stylování pomocí inline CSS
- **Seznamy** (`<ul>`, `<ol>`, `<dl>`)
  - Nečíslované seznamy (`<ul>`)
  - Číslované seznamy (`<ol>`)
  - Definiční seznamy (`<dl>`, `<dt>`, `<dd>`)
- **Emmet zkratky** - rychlé psaní HTML
- **ALT + klikání** - multi-cursor editing

## 📂 Soubory v projektu

- `index.html` - hlavní soubor s ukázkami
- `formular.html` - příklad formuláře

## 💻 Ukázky z lekce

### Tabulka:
```html
<table style="border: 2px black solid;">
    <tr>
        <th>Jméno</th>
        <th>Částka</th>
        <th>Měna</th>
    </tr>
    <tr>
        <td>Martin</td>
        <td>50</td>
        <td>$</td>
    </tr>
</table>
```

### Seznamy:
```html
<!-- Nečíslovaný seznam -->
<ul>
    <li>První položka</li>
    <li>Druhá položka</li>
</ul>

<!-- Číslovaný seznam -->
<ol>
    <li>První krok</li>
    <li>Druhý krok</li>
</ol>

<!-- Definiční seznam -->
<dl>
    <dt>HTML</dt>
    <dd>- HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>- Cascading Style Sheets</dd>
</dl>
```

### Emmet zkratky:
```
ul>li*5>a          →  vytvoří <ul> s 5 <li>, každý obsahuje <a>
table>tr*3>td*4    →  vytvoří tabulku 3 řádky × 4 sloupce
p>a                →  vytvoří <p> s <a> uvnitř
html:5 nebo !      →  vytvoří HTML5 šablonu
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Prohlédněte si ukázky tabulek a seznamů
3. Zkuste vytvořit vlastní tabulku s více řádky a sloupci
4. Vyzkoušejte Emmet zkratky v editoru
5. Použijte **ALT + klikání** pro psaní na více místech najednou

## 💡 Tip pro studenty

### Struktura tabulky:
```
<table>           ← kontejner tabulky
  <tr>            ← řádek (Table Row)
    <th>          ← hlavička (Table Header)
    <td>          ← buňka (Table Data)
```

### Emmet zkratky - příklady:
- **`html:5`** nebo **`!`** - vytvoří HTML5 šablonu
- **`ul>li*5`** - vytvoří `<ul>` s 5 `<li>` elementy
- **`div.class#id`** - vytvoří `<div class="class" id="id">`
- **`table>tr*3>td*4`** - tabulka 3×4
- **`h1+p+p`** - `<h1>` a dva `<p>` za sebou

### Multi-cursor (ALT + klikání):
- Držte **ALT** a klikejte na různá místa
- Můžete psát text na více místech najednou
- Užitečné pro opakující se text

### Inline CSS:
```html
<!-- Inline CSS přímo v elementu -->
<h1 style="color: lime; background-color: purple;">Nadpis</h1>

<!-- Lepší je CSS v samostatném souboru (naučíte se v lekci 03) -->
```

## ⚠️ Důležité poznámky

- Tabulky se dnes používají **pouze pro tabulková data**, ne pro layout
- Pro layout použijte **CSS Grid** nebo **Flexbox** (naučíte se později)
- **Emmet** je součástí většiny editorů (VS Code, Sublime, Atom)
- Inline CSS je OK pro testování, ale pro produkci použijte externí CSS

## 🔗 Související lekce

- **Předchozí:** 01_uvod - základy HTML
- **Další:** 03_css_uvod - stylování pomocí CSS
- **Emmet dokumentace:** [Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/)