Pokračujeme ve vytváření obsahu stránky. Přidáme obrázky a tabulku.

Ve třetí lekci přidáme do stránky obrázky a tabulku a dokončíme web po obsahové stránce.

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?

Zaujal Tě tento online kurz?

Přihlásit k newsletteru

Projekt online vzdělávání byl realizován v rámci Stipendia Czechitas v projektu: „Ženy do IT“ (reg.č. CZ.03.1.51/0.0/0.0/16_061/0003268), který je financován z prostředků Evropského sociálního fondu prostřednictvím Operačního programu Zaměstnanost.