OBRÁZKY

V dnešní době ale už webové stránky nejsou jen o textu a odkazech. Podstatnou součástí stránek se stávají různé obrázky, ať již fotografie nebo nějaká úvodní animace. Jsou prakticky nepostradatelné. Aby ale vaše stránky nezabírali 20 MB a uživatelé na načtení jednoho úvodníku nečekali půl hodiny, je třeba umisťovat obrázky na stránky s rozvahou – je to totiž to největší co se tam vyskytuje a prakticky to jediné, co zásadně zpomaluje načítání. Aby byly obrázky co nejmenší, používají se ve formátu *.jpg pro fotografie a ve *.gif pro ostatní obrázky a animace. V poslední době je nejpopulárnější třetí formát: *.png. Narozíl od *.gif v něm ale nejdou ukládat animace. Lze používat i jiné, ale tyto tři formáty jsou jistým standardem. Rozhodně by nebylo dobré třeba přes celé pozadí dát obrázek ve formátu *.bmp. Snad každý uživatel bez extra rychlého připojení by po chvilce načítání usoudil, že vaše stránky za tu dobu, jakou se budou načítat, určitě nestojí.

povinné atributy

Obrázek dostanu na stránku pomocí nepárového elementu <img>:

<img src= "../obrazky/fotka.jpg" alt="Fotka z mé dovolené u moře" />

src (z angl. source) udává zdroj – tedy místo, kde se obrázek nachází. Zápis hodnoty je totožný jako u atributu href u odkazů.

Povinný atribut alt znamená alternativní text. Jeho obsah se uživateli vypíše, pokud interpret XHTML nemůže zobrazit požadovaný obrázek. To může být způsobeno chybou serveru, prohlížeče (např. vypnuté obrázky), ale i autora webu.

Aby jste se ve struktuře svého webu lépe vyznali, je dobré si udělat složku obrázky, kde je budete mít všechny pohromadě. Nebudou se vám tak plést mezi jednotlivými stránkami.

obrázek jako odkaz

Samozřejmě, že z obrázku lze udělat odkaz a to velice jednoduše:

<a href="./dalsi-kapitola.html">
 <img src="obrazky/odkaz-next.gif" alt="Odkaz na další kapitolu" />
</a>

Ovšem v tomto případě bude obrázek modře ohraničen (aby bylo jasné, že se jedná o odkaz).

Toho se dalo v HTML zbavit pomocí atributu border. Ten však striktní XHTML nepodporuje, a proto je nutné použít kaskádové styly.

popisky

I u elementu <img /> lze využít atribut title. Funguje stejně jako při použití v odkazech:

<img src="../obrazky/na_horach.jpg" title="To jsem já v Himalájích" />

Pokud tedy na takovýto obrázek najedete kurzorem, zobrazí se popisek To jsem já v Himalájích

rozměry

U každého obrázku jdou také předdefinovat rozměry. Dělá se to pomocí atributů width (šířka) a height (výška). Pokud nezadáte jiné jednotky, jsou obě hodnoty v pixelech. Další možností je zadat procenta.

<img src="../obrazky/na_horach.jpg" title="To jsem já v Himalájích"
 width="150" height="50%" />

V případě, že udáte jinou výšku a šířku než obrázek ve skutečnosti má, automaticky se přizpůsobí vámi zadaným hodnotám. To se ale v praxi nepoužívá, protože nejlepší je mít obrázek uložen již s potřebnými rozměry. Pokud by jste přesto tuto vlasnost chtěli využít, obsahují ji i CSS.

Zádavání rozměrů obrázku pomocí atributů width a height má přesto svůj význam. Pokud totiž uvedete skutečné rozměry obrázku, interpret XHTML si pro ně automaticky vyhradí místo a pokračuje ve stahování stránky. Když se totiž stránka načítá a jsou známé rozměry obrázků, text potom neskáče. Pokud však obrázek nemá zadané rozměry, stává se, že prohlížeč nejprve načte text a až později když načte obrázek. Text pak poskočí dolů a udělá obrázku místo. To je zejména pro uživatele s pomalejším připojením dost nepraktické – začte se do ještě ne kompletní stránky bez obrázků a najednou mu text doslova uteče před očima.

© 2006-2007 Petr Kuda - www.troska.cz