Nedílnou částí webových stránek jsou obrázky a další multimediální prvky. V následujícím textu se dozvíte základní informace o práci s obrázky v jazyce HTML.
Vložení obrázku
Obrázky jsou další možností, jak web může sdělovat informace uživatelům. Obrázky jsou také nedílnou součásti designu. Doplnění textu vysvětlujícím obrázkem je jeden z hlavních bodů, jak můžete udělat článek pro návštěvníky zajímavý. Následující kapitola vás naučí, jak vložit obrázek do stránky, zarovnat ho nebo nastavit vlastnosti pomocí stylů.
Ke vložení obrázku do stránky používejte nepárový tag <img> a jeho vlastnost src, která obsahuje cestu k obrázku na serveru:
<img src=“obrazek.jpg“>
V uvedeném příkladě je obrázek uložený ve stejné složce jako HTML soubor. Umístění všech HTML stránek a obrázků ve stejném adresáři je značně nepřehledné. Doporučuji pro obrázky vytvořit samostatný podadresář.
<img src=“obrazky/obrazek.jpg“>
V této ukázce se obrazek.jpg nachází v podsložce „obrazky“, která je umístěná stejně jako soubor HTML, ze kterého na obrázek odkazujete.
Dalším ze způsobů, jak vložit cestu k obrázku, je použití absolutní adresy.
<img src=“http://kurzygrafiky.cz/logo.jpg“>
Obrázek „logo.jpg“ se nachází v kořenovém adresáři webu kurzygrafiky.cz.
V prvních dvou případech se jedná o relativní zadání cesty, tedy závisle na umístění HTML souboru. Pokud soubor HTML přesunete, obrázky se nebudou zobrazovat. Třetí příklad ukazuje, že se použitý obrázek nachází na našem serveru a odkazujeme přímo na URL adresu obrázku. Třetího způsob můžete využít pro odkaz na obrázek, který je kdekoliv na internetu. Nebezpečí ale hrozí, pokud majitel stránek obrázek odstraní. V tom případě se přestane zobrazovat na všech propojených webech.
Vlastnosti obrázku
src = “cesta/nazev_obrazku.jpg“ – umístění obrázku relativně ke stránce
border = “5“ – rámeček obrázku, definován v pixelech
width = “900“ – šířka (v pixelech)
height= “50“ – výška (v pixelech)
Alternativní text
Dalším parametrem obrázku je ALT, neboli alternativní text. Tento textový popis se zobrazí v případě, že se obrázek nenačte, nebo nemůže být zobrazen (např. vypnuté obrázky v prohlížeči). Tento popis využívají roboti pro vyhledávání a indexování obrázků. Z těchto důvodů je použití parametru ALT povinné u každého obrázku. Pokud se jedná o prvek designu, kde je alternativní text zbytečný, ale zároveň chcete mít validní kód, můžete vložit popisek s nulovou hodnotou ( alt=““). Alternativní text se také zobrazuje při najetí kursorem myši na obrázek. Bohužel ne vždy, závisí to na prohlížeči, který používáte. Pokud chcete mít jistotu, že se popis zobrazí, přidejte parametr TITLE (ten není povinný, ale např. Google chrome ho zobrazuje).
<img src=“screenshot016.jpg“ alt=“Google pro správce webu“ title=“Google pro správce“ />
Formáty obrázků
O formátech obrázků jste již četli v kapitole zabývající se grafikou a webdesignem. Při psaní HTML kódu je důležité příponu obrázku psát jako součást cesty. Bez uvedené přípony se obrázek nezobrazí. Protože prohlížeče rozlišují velká a malá písmena, dávejte pozor, zdali je přesný název obrázku picture.jpg, nebo picture.JPG.
Nikdy nepoužívejte obrázky ve formátu BMP. Pro web jsou nevhodné, protože nepoužívají žádnou kompresi a jsou zbytečně objemné.
Při nahrávání obrázků dbejte na správnou velikost. Zbytečně velké obrázky výrazně zpomalují načítání stránky.