<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
Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla