Úvod do HTML a CSS - lekce 3

Podklady ke stažení

Pokračuj s kódem, který sis v minulé lekci vytvořila u sebe na počítači.

Nemáš-li z nějakého důvodu kód k dispozici, zde je ke stažení kód, jak jsem ho ve videu dokončil já v minulé lekci: https://czchts.cz/htmlcss03

Přidáváme obrázky

Obrázky do stránky přidáváme pomocí značky <img>. Jedná se o nepárovou značku, takže má pouze první polovinu značky. Žádné </img> neexistuje a nikde ho neuvádíme.

Samotná značka však nestačí. Prohlížeči musíme dát vědět, jaký obrázek má do stránky vložit. To uděláme pomocí atributu src, do kterého jako hodnotu napíšeme cestu k obrázku.

Leží-li obrázek na stejné úrovni (ve stejné složce) jako náš index.html, stačí do atributu napsat pouze název obrázku, třeba src="foto.jpg". Máme-li obrázek umístěný v jiné složce, musíme do atributu src uvést i cestu k obrázku. Pokud mám soubor ve složce obrazky, uvedu src="obrazky/foto.jpg".

Obrázek má ještě jeden povinný atribut a to je alt. Do atributu alt uvádíme stručný popis obrázku. Tento popis slouží pro asistenční technologie (např. čtečky obsahu pro slepce, apod.), prohlížeč text zobrazí i v případě, že nemůže obrázek načíst. A hlavně tento text použijí i vyhledávače jako je např. Google. Atribut alt proto vždy vyplňujeme (i když se nám nechce!).

Kód pro správné vložení obrázku tedy vypadá třeba takto:

    <img src="obrazky/foto.jpg" alt="Adéla Maříková">

Tabulky

Tabulky v HTML jsou tvořeny sérií několika vnořených značek. Každou tabulku tvoří hlavní značka <table>. Do ní jsou vnořeny značky <tr> pro řádky tabulky (table row). Uvnitř každého řádku pak máme jednotlivé buňky tabulky <td> (table data), neboli sloupce.

Chceme-li v tabulce vytvořit záhlaví, použijeme pro buňky záhlaví místo <td> značku <th> (table header).

Celá tabulka pak bude v kódu vypadat třeba takto:

    <table>
         <tr>
               <th>Jméno</th>
               <th>Datum narození</th>
         </tr>
         <tr>
               <td>Jana Novotná</td>
               <td>6.4.1996</td>
         </tr>
         <tr>
               <td>Alena Hanzlíková</td>
               <td>27.11.2001</td>
         </tr>
    </table>

Kontrolní otázky

• Jakou značkou vkládáme do stránky obrázky?
• Má značka pro obrázek nějaké povinné atributy? Jaké?
• Jaká je skupina značek pro vkládání tabulky?
• Jak vytvořím tabulku se záhlavím?

‍