3I_WTL_2025/02

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:

<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:

<!-- 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:

<!-- 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