MENU

<img>

Tato značka vkládá obrázek do HTML kódu. Jedná se o nepárovou značku. Používá se v HTML 4.01, XHTML i HTML5.

Pozor! Pokud používáte-li nepárové značky v XHTML, tak je musíte ukončovat lomítkem, viz ukázka:

<img ... />

V případě použití nepárové značky v HTML 4.01 a HTML5 platí zápisy uvedené v příkladech. 

Atributy značky <img>

Atribut: src

Atribut [src] určuje, cestu vedoucí k místu uložení obrázku. Je logicky povinný, protože jinak by obrázek nemohl být do webové stránky vložen. Cesta k obrázkům umístěným na stejném serveru, jako je web, se většinou uvádí jako relativní, tedy není vypsána doména. Výhoda je v tom, že web je možné spustit i na jiném umístění (např. lokálně na svém PC) a stále funguje.

<img src="/obrazek.jpg">

Atribut: alt

Atribut [alt] je povinný byť v případě jeho vynechání není na první pohled nic vidět. Určuje totiž alternativní popis v případě, že se obrázek nezobrazí, což by se na dobrém webu nemělo stávat. Alt má však další důležitý význam. Krom toho, že jej čtou čtečky slepců, tak alternativní popis používají také vyhledávače k tomu, aby nalezli slovní obsah obrázku. Správné popsání obrázku má značný význam při optimalizaci pro vyhledávače tzv. SEO

<img src="/obrazek.jpg" alt="Popis obsahu obrázku">

Atribut: title

Atribut [title] je nepovinný a může se použít k většině HTML značek. K obrázkům se však používá častěji, než k jiným značkám. Jeho funkce se návštěvníkovi zobrazí v okamžiku, kdy ukáže kurzorem myši nad obrázek.

<img src="/obrazek.jpg" title="Text titulku">

Atribut: width a height

Tyto atributy určí konkrétní velikost obrázku. Standardně se obrázek zobrazí v plné velikosti, což u velkých obrázků nebývá žádoucí. Z toho důvodu můžete použít atribut pro určení šířky (width), případně výšky (height). Rozměry se uvádějí buď v číselné hodonotě, a pak je tím myslí pixely, ale je možné je zapsat i v procentech, např. width="50%"

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

Jaké CSS se nejčastěji používají k <img>

  • float: pomocí kterého je možné nechat ostatní obsah (třeba text) obtékat zleva nebo zprava.
  • margin: díky kterému zajistíte odsazení obsahu (třeba textu) do okraje obrázku
  • width a height: je báječná metoda, jak určit rozměry obrázků umístěných do předdefinovaných pozic
  • min-width: je dobré řešení u obrázků, které se zobrazují procentuálně k nadřazenému prvku
  • border: může orámovat obrázek pro lepší grafický efekt

Kam dál

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548