Obrázky jsou další cestou, kterou web může sdělovat informace.

Img

Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného souboru. Tag <img> má kromě obecných atributů spoustu dalších:

Tag <img>, atribut src

K zobrazení obrázku na stránce stačí nepárový tag <img> a jeho vlastnost src, která obsahuje cestu k fyzickému obrázku na serveru:

V našem případě je obrázek v té samé složce jako HTML soubor, taková situace ale nastane v praxi málokdy a proto HTML podporuje více možností, jak zadat cestu k obrázku:

V prvních třech případech se jedna o relativní zadání cesty k obrázku, tedy závisle na umístění HTML souboru. Pokud byste tento soubor přesunuli, obrázky by se už nezobrazily. Druhé dvě možnosti jsou zadány absolutně, tedy naprosto nezávisle na umístění daného HTML souboru.

Pátý příklad nám i ukazuje to, že použitý obrázek se nemusí nacházet na našem serveru, ale kdekoliv na internetu.

Nesmíte ale zapomenout, že pokud je součástí webové stránky nějaký váš obrázek, musíte ho nahrát na internet také. Obvykle se na obrázky vyčlení nějaká složka (třeba img nebo obrazky, je to jedno), do které se pak všechny obrázky ukládají. Ta se pak společně s ostatními soubory nahraje na internet.

Tag <img>, atribut alt

Dalším parametrem obrázku je ALT, neboli alternativní text. Tento text se zobrazí v případě, že se obrázek nenačte či nemůže být zobrazen (někdo používá pouze textový prohlížeč).

Z těchto všech důvodů je použití parametru ALT povinné u každého obrázku. Pokud se jedná pouze o prvek designu, kde je nějaký alternativní text zcela zbytečný, a zároveň chcete mít validní kód, vyhnete se tomu prostým alt=““. Alternativní text se také zobrazuje v bublině při najetí kursorem na obrázek, ovšem ne vždy, závisí to na prohlížeči. Pokud chcete mít takovou popsiku vždy, využijte parametr TITLE (ten není povinný).

Tag <img>, atribut width, height

Šířka (width) a výška (height) obrázku. Udává se v pixelech (normální číslo) nebo procentech. Pokud rozměry nejsou uvedeny, zobrazí se obrázek ve své normální velikosti. V praxi se doporučuje výšku a šířku u obrázku zadávat i v případě, že obrázek bude přirozeně veliký. To kvůli rychlejšímu a lepšímu načítání stránky.

Pokud se zadají jiné rozměry, než má obrázek ve skutečnosti, pak se ve výsledku obrázek zvětší, zmenší nebo zdeformuje. V případě, že je uveden jenom jeden rozměr (šířka nebo výška), upraví se druhý rozměr tak, aby obrázek zachovával proporce (takže může být jinak velký, ale nebude deformovaný).

Pozor na častou chybu přehazování písmenek t a h. Widht je špatně, správně je width. Heigth je špatně, správně je height.

Mám obrázek strom.gif o šířce 50 a výšce 100 pixelů. Nejlépe je zadat jej takto:

V případě, že rozměry nezadám, obrázek se nakonec načte stejně velký. Jenomže při načítání si nevyhradí místo a způsobí, že dokument po načtení obrázku poskočí:

Zadají-li se jiné rozměry, obrázek bude deformován, ale rozměry v dokumentu dodrží:

V případě, že zadáte do width nebo height nulové hodnoty, Internet Explorer stejně vykreslí 1px velký obrázek. Chcete-li obrázek nulové velikosti, zadejte mu rozměry pomocí CSS stylů width a height.

Tag <img>, atribut border

Tloušťka rámečku. Lze zadat nula, pak nebude obrázek orámečkovaný. Různé prohlížeče se liší v tom, zda zobrazují rámeček u obrázku, u kterého border nebyl zadán. Proto komu záleží na přesném vzhledu, měl by border vždy zadávat. Poslední dobou se ale doporučuje rámeček spíše zadávat css stylem border. Příklad nejčastějšího použití: je-li obrázek v odkazu, přirozeně se kolem něj tvoří barevný rámeček:

Nejprostším řešením je zadat obrázku nulový okraj border=“0″:

V moderní praxi se tento postup už doporučuje nahradit spíše globálním stylem:

Tag <img>, atribut vspace, hspace

Vertikální a horizontální okraje, prostě prázdné místo okolo. Zadává se v pixelech (tedy bez hodnoty a znamená to pixely), nebo v procentech. Procenta se počítají z rozměru obrázku. V praxi se zastaralé atributy vspace a hspace nahrazují CSS stylem margin.

Tag <img>, atribut align

Zarovnání obrázku s okolím.

Osobně považuji milión hodnot pro umístění na řádku za zbytečnost a nepoužívám je. Má to smysl pouze u malých obrázkových matematických vzorců. Velký obrázek se v praxi většinou nechává obtékat nebo umisťuje do samostatného odstavce.

Obtékané obrázky se vertikálně nacházejí pod řádkou, v níž jsou uvedeny (to je trochu nešikovné, ale logické). Jedinou výjimkou je, kdy obtékaným obrázkem řádka začíná – pak je vrchol obrázku v úrovni vrcholu řádky.

Atribut align se dá nahradit css stylem float (pro hodnoty obtékání right a left) a css stylem vertical-align.

Chcete-li obrázek umístit na střed, přes atribut align to nejde. Obalte obrázek nějakým blokovým prvkem (třeba tagem <div>) a zarovnání na střed zadejte tomuto obalovacímu prvku.

Obrázek na pozadí

Obrázek se dá také nastavit na pozadí stránky a to následujícím způsobem:

Pokud bude obrázek menší než celá stránka, bude se opakovat.

A když už jsme u toho, tak se dá nastavit i barva na pozadí stranky:

Pomocí CSS se toho dá ovlvnit co se týče pozadí mnohem více, ale tohle nám zatím stačí.