Po nastudování této kapitoly dokážeme vložit obrázek na stránku přímo nebo jako odkaz. Dokážeme vysvětlit, k čemu slouží jednotlivé atributy u obrázků. Budeme znát, alespoň dva, na webu bezpečně podporované obrazové formáty.
Obrázek vložíme na stránku pomocí nepárového tagu <img>
Pomocí atributu src=““ (z anglického source = zdroj) zvolíme jeho umístění absolutním nebo relativním odkazem.
Ve složce svého webu mám „obrazek1.jpg“ – s relativní adresou bude kód vypadat takto
<img src="obrazek1.jpg">Aby byl kód validní, měli bychom u každého obrázku použít také atribut alt=““. Ten se postará o zobrazení alternativního popisku v případě, že by se obrázek z nějakého důvodu nezobrazil.
Vhodné je také nastavit obrázku šířku a výšku – při načítání obsahu stránky se obrázku vyhradí místo požadované velikosti ještě předtím, než se zobrazí samotný obrázek. Stránka se tak nebude při načítání deformovat.
Šířka - width="" a výška – height="" se zadávají v pixelech – px. Také lze zadat jen jeden rozměr a u druhého nastavit hodnotu "auto". Obrázek se tak nezdeformuje a původní poměr stran zůstane zachován.
<img src="obrazek1.jpg" alt="obrázek 1" width="640px" height="424px">Obrázek můžeme použít také jako odkaz. To se nám může hodit např. při vytváření fotogalerie, kde se po kliknutí na miniaturu obrázku zobrazí jeho plnohodnotná verze.
<a href="obrazek1.jpg" title="obrázek 1"><img src="obr1_mini.jpg"
alt="miniatura obrázku 1" width="100px" height="66px"></a>* V případě fotogalerie s malými náhledy je ideální mít ke každé originální fotografii její zmenšenou verzi. Urychlí se tím načítání webu.
| Atribut | Hodnota | Význam |
|---|---|---|
| title | libovolný text | Určuje titulek obrázku, který se v některých prohlížečích zobrazí jako bublinková nápověda po najetí kurzoru na obrázek. |
| alt | libovolný text | Alternativní popisek obrázku. Zobrazí se v případě, že se obrázek nenačte. |
| align | bottom | Zarovnání obrázku; obrázek je součástí řádky a jeho spodní linka je zarovnána s řádkou. |
| middle | Zarovnání obrázku; obrázek je součástí řádky a je vzhledem k řádce vycentrován. | |
| top | Zarovnání obrázku; obrázek je součástí řádky a jeho horní linka je zarovnána s řádkou. | |
| left | Zarovnání obrázku; obrázek je u levého okraje stránky a je obtékán textem. | |
| right | Zarovnání obrázku; obrázek je u pravého okraje stránky a je obtékán textem. |
Bezpečně podporované obrazové formáty na webu jsou: JPG(JPEG), GIF, PNG bez průhlednosti (ta může v některých verzích prohlížečů způsobit problém).
Naučili jsme se vložit obrázek na stránku, nastavit jeho rozměry a alternativní popisek. Umíme také použít obrázek, jako odkaz.
Poznali jsme tento nepárový tag: <img>
Poznali jsme tyto atributy: src="", alt="", width="", height=""
K původnímu úkolu přidej alespoň 4 miniatury obrázků, které budou sloužit jako odkazy na obrázky v originální velikosti. Obrázky ulož do své složky s webem. Šířku miniatur nastav na 200px a výšku nech zvolit automaticky.