22. Tvorba webových stránek – odrážky, číslování a tabulky (21.4.2026)

Obsah hodiny

• Vrátili jsme se k úkolu z minula a zmínili problémy, na které jste narazili:
  • Problém s obrázky
    • Nenapsání přípony
    • Diakritika v názvu
  • Problém s archivem
    • I když archiv vypadá jako složka, nechová se tak
• Ukázali jsme si, jak do webové stránky vložím odrážky, číslovaný seznam a tabulku pomocí tagů UL, OL a TABLE.

  • <ul>
    <li>toto je 1. odrážka</li>
    <li>toto je 2. odrážka</li>
    <li>toto je 3. odrážka</li>
    </ul>
    
    <ol>
    <li>toto je 1. odrážka</li>
    <li>toto je 2. odrážka</li>
    <li>toto je 3. odrážka</li>
    </ol>
    
    
    <table>
    <tr>
    <th>buňka záhlaví</th>
    <th>buňka záhlaví</th>
    <th>buňka záhlaví</th>
    </tr>
    <tr>
    <td>buňka</td>
    <td>buňka</td>
    <td>buňka</td>
    </tr>
    <tr>
    <td>buňka</td>
    <td>buňka</td>
    <td>buňka</td>
    </tr>
    </table>

• Vše máte vysvětleno i v následujících videích:
  • Seznamy
  • Tabulky část 1
  • Tabulky část 2
• Připomenul jsem vám, abyste si na každý úkol vytvořili samostatnou složku. V dalších projektech začnou přibývat obrázky a další soubory a umístění všeho do jedné složky by bylo nepřehledné
• Připomínám celou sérii výukových videí
• Ukázal jsem vám, jak přidám tabulce okraje pomocí jazyka CSS – toto po vás ale zatím nepožaduji. Je to jen ukázka, kterou můžete případně dobrovolně použít pro naformátování tabulky v Receptu.

  <style>
  table, th, td {
    border: 1px solid black;
  }
  </style>
  

• Vše, co jsme si dnes říkali, máte zaznamenáno v záznamu hodiny.

Úkoly

• Vytvořte stránku “Recept” Stránka bude obsahovat:
  • Nadpis 1. úrovně – Název receptu. Vyberte si jakýkoliv pokrm (kromě triviálních typu “namaž a sněz”)
  • Ilustrační obrázek pokrmu
  • Nadpis 2. úrovně “Ingredience”
  • Seznam potřebných surovin pomocí odrážek
  • Tabulka množství a výživových hodnot jednotlivých surovin
  • Nadpis 2. úrovně “Příprava”
  • Postup přípravy pokrmu pomocí číslovaného seznamu
  • Volitelné přání dobré chuti
  • K vypracování budete potřebovat zejména videa:
    • Práce s textem
    • Obrázky
    • Seznamy
    • Tabulky část 1
    • Tabulky část 2
  • Ukázka vzorově vypracovaného úkolu (ve formě obrázku výsledné stránky). Řekli jsme si, že u tabulky budete mít “holou” podobu – bez dělících čar.
  • Úkol odevzdejte do Edookitu. Na vypracování máte dvě vyučovací hodiny. Při odevzdávání nezapomeňte odeslat i obrázek – zabalit html kód a obrázek do jednoho archivu .zip!

Zápisy