Jste zde

6.1 HTML - vkládání obrázků (studijní text)

  • obrázky se vkládání do HTML souboru pomocí nepárové značky <IMG>
  • značka má velké množství atributů, avšak používá se jich jen několik

<IMG>

SRC

  • povinný atribut určující cestu k obrázku (musí být definován pokaždé)
  • cesta může být relativní nebo absolutní (např. webová adresa)
  • značka <IMG> podporuje typy obrázků s příponami *.jpg, *.gif, *.png
<img src="obrazek.gif">

Příklad ukazuje vložení obrázku, který je umístěný ve stejné složce, jako je upravovaný HTML soubor.

<img src="img/obrazek.jpg">

Příklad ukazuje vložení obrázku, který je umístěný ve složce "img", která je umístěna spolu s upravovaným HTML souborem.

<img src="http://www.seznam.cz/logo.png">

Příklad ukazuje vložení obrázku, který je umístěn na serveru www.seznam.cz (vždy se musí uvést protokol http://).

ALT

  • povinný atribut, který definuje alternativní popisek obrázku
  • definuje se proto, aby v případě chybného načtení obrázku (špatná cesta, obrázek vymazán), se zobrazil alespoň popisek
  • tento atribut též využívají čtečky textu a obrázků pro slabozraké
<img src="obrazek.gif" alt="jakýkoliv text">

TITLE

  • nepovinný atribut definuje titulek obrázku (zobrazí se ve žluté bublině po najetí na obrázek
  • není povinný, ale doporučuje se pro přehlednost používat
<img src="obrazek.gif" alt="jakýkoliv text" title="jakýkoliv text">

WIDTH, HEIGHT

  • atributy definující šířku (width) a výšku (height) obrázku
  • šířku a výšku lze definovat i pomocí CSS, ale není chybou, pokud použijete atribut v HTML
  • hodnota se udává číslovkou vyjadřující příslušný rozměr v pixelech
  • pokud chcete zachovat poměr mezi šířkou a výškou obrázku, zadejte pouze jeden rozměr (druhý rozměr se automaticky přizpůsobí)
<img src="obrazek.gif" width="200" alt="jakýkoliv text" title="jakýkoliv text">
<img src="obrazek.jpg" height="100" alt="jakýkoliv text" title="jakýkoliv text">