Obrázky

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:

Atribut Význam Hodnoty Nahraďte CSS stylem
src umístění souboru s obrázkem URL
alt alternativní popis libovolný text
lowsrc náhradní obrázek pro malé displeje URL
width šířka délka nebo procento width
height výška délka nebo procento height
border tloušťka rámečku délka border
vspace vertikální okraj délka margin
hspace horizontální okraj délka
align zarovnání obrázku left, right, top, texttop,
middle, absmiddle,
baseline, bottom, absbottom
float (left, right)
vertical-align (ostatní hodnoty)
usemap použití klikací mapy „#“ + jméno mapy, nebo URL
ismap přidání souřadnic kliknutí bez hodnoty
longdesc dlouhý popisek text nebo URL

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:

<img src=“obrazek.jpg“>

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:

<img src=“obrazky/obrazek.jpg“>
<!– obrazek.jpg se nachází ve složce obrazky, která je na tom samém místě jako soubor HTML –>
<img src=“../obrazek.jpg“>

<!– obrazek.jpg je o složku výš –>
<img src=“../../obrazek.jpg“>

<!– obrazek.jpg je o dvě složky výš –>
<img src=“C:/Windows/holly.bmp“>

<!– holly.bmp se nachází na disku C:/ ve složce Windows –>
<img src=“http://becvarova.com/logo.jpg“>

<!– logo.jpg se nachází v kořenovém adresáři webu becvarova.com –>

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ý).

<img src=“obrazek.jpg“ alt=“Můj obrázek“ width=“500″ height=“300″ title=“Můj obrázek“>

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:

<img src=“strom.gif“ width=“50″ height=“100″ alt=“strom“>

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čí:

<img  src=“strom.gif“ alt=“strom“>

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

<img src=“strom.gif“ width=“70″ height=“70″ alt=“deformovaný strom“>

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:

<a href=“stranka.html“><img  src=“strom.gif“ alt=“strom“></a>

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

<a href=“stranka.html“><img  src=“strom.gif“ alt=“strom“ border=“0″></a>

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

<style>
a img {border-width: 0px;}
</style>

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.

align= Význam Nahraďte CSS zápisem
Obtékání obrázku left Obrázek je umístěn k levému okraji a obtékán zprava. float: left;
right Obrázek je umístěn k pravému okraji a obtékán zleva. float: right;
Vertikální umístění obrázku na řádku top Vršek obrázku je zarovnán s nejvyšším bodem libovolného objektu řádku. vertical-align: top;
texttop Vršek obrázku je zarovnán s nejvyšším bodem textu (většinou je to totéž, co top). vertical-align: text-top
middle Střed obrázku je zarovnán s účařím písma řádku.
absmiddle Střed obrázku je zarovnán se středem řádku. vertical-align: middle;
baseline Spodek obrázku je zarovnán na účaří. vertical-align: text-bottom;
bottom Spodek obrázku je zarovnán na spodek písma
absbottom Spodek obrázku bude zarovnán na nejnižší místo řádku. vertical-align: bottom;

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:

<body background=“obrazek.jpg“>

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:

<body bgcolor=“red“>

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

V zásadě nepoužívejte obrázky ve formátu BMP, pro web se absolutně nehodí, nepoužívají žádnou kompresi a proto jsou zbytečně objemné. Nejrozšířenější jsou formáty JPG, GIF a PNG. U GIF a PNG se dá nastavit i průhledná barva, což dělá stránky zajímavější.Bohužel průhlednost PNG obrázků není ještě zcela ideálně podporována ze strany prohlížečů a GIF je zase omezený nízkym počtem podporovaných barev (256). Na druhou stranu, ve formátu GIF se dají vyrobit i animace. Na fotografie je zase jako stvořený formát JPG, který je kvalitní a přitom zabírá málo místa.