Kurz HTML – fakta o obrázcích

1. prosince 1999

•

Šestý díl kurzu o HTML, který přináší vše o obrázcích na www stránkách – jak a čím se obrázky definují, parametry, základní pravidla pro jejich používání apod.

Obrázky jsou v dnešní době takřka nepostradatelnou součástí webu. Používají se jako podklad pro www stránku, někde nahrazují klasické textové odkazy, vytváří se pomocí nich layout celého webu apod. Každý tvůrce www stránek proto musí umět pracovat s obrázky, znát možnosti, pokud nechce tvořit značně neatraktivní textové stránky.

Tag IMG

Pro vkládání obrázků, který musí být již předem vytvořen (soubor GIF, JPEG nebo PNG) do www stránky se používá jediný nepárový tag IMG. Jeho základní syntaxe je velmi jednoduchá:

Pro umístnění samotného obrázku platí pravidla jako pro ostatní prvky webu – obrázek může být uveden přímo v daném adresáři s HTML stránkou, v takovém případě nemusíme uvádět cestu k němu, dále může být uveden v jiném adresáři – cestu k němu musíme pochopitelně uvést a dále může být na jiném webovém serveru. Příklady použití cest:

<IMG SRC=“obrazek.gif“> – obrázek je ve stejném adresáři jako HTML stránka, kam byl tento HTML kód vložen

<IMG SRC=“images/obrazek.gif“> – obrázek se nachází v adresáři images

<IMG SRC=“http://www.interval.cz/images/obrazek.gif“> – obrázek se nachází na jiném serveru v adresáři images.

TIP: pokud chcete urychlit načítání www stránek, nevkládejte obrázky, které jsou umístněny na jiném webu než vašem – prohlížeč totiž musí tento server kontaktovat, čímž dochází ke zpoždění a může také nastat nepříjemná situace, že daný web, kde je umístněn obrázek, který požadujete zrovna neběží a obrázek by se vám tak ani nenačetl.

Parametry tagu IMG

Tag IMG má jako ostatní tagy spoustu doplňujících parametrů jako je například velikost obrázku, zarovnání, popisek apod.

Zarovnání – zarovnání obrázků vhledem k pozici textu se provádí parametrem ALIGN. Jeho hodnoty jsou uvedeny v tabulce:

ALIGN=“LEFT“ – zarovná obrázek na levý stránky, text jej obtéká z pravé strany.

ALIGN=“RIGHT“ – zarovná obrázek na pravý okraj stránky, text jej obtéká z levé strany

ALIGN=“TOP“ – zarovná horní okraj obrázku s nejvýše umístněným elementem (třeba textem)

ALIGN=“MIDDLE“ – zarovná první řádek textu s prostředkem obrázků, další řádky textu pokračují pod obrázkem

ALIGN=“ABSBOTTOM“ – zarovná spodní část obrázku se nejspodnějším okrajem písma

ALIGN=“BASELINE“ – zarovná spodní část obrázku se základnou textu

ALIGN=“BOTTOM“ – stejná funkčnost jako BASELINE

Velikost obrázku – v tagu IMG můžete definovat velikost obrázku (tj. jeho výšku a jeho šířku v pixelech). Velikost obrázku definujeme následujícími parametry

WIDTH=“cislo“ – definice šířky obrázku v pixelech

HEIGHT=“cislo“ – definice výšky obrázku v pixelech

Definice šířky a výšky obrázku není povinná, ale je silně doporučená – při načítání stránky se totiž obvykle objevuje první text a poté až samotné obrázky. Pokud definujete velikost obrázků, v textu stránky se objeví prázdné rámečky o rozměru definované velikosti, které značí, že zde bude vložen obrázek. Pokud tak nečiníte, stránka může být při načítání rozhozena a vše se spraví až poté, co se obrázek načte. Navíc, neuvedením velikosti obrázku v HTML stránce prodlužujete samotnou dobu načítání HTML stránky.

Co se týče poměrů šířky a výšky obrázku, vždy uvádějte v HTML skutečnou velikost obrázku, jinak bude obrázek pochopitelně deformován. HTML totiž umí obrázek zobrazit ve vámi požadovaných velikostech. Přizpůsobujte prostě velikost obrázku tomu, v jaké velikosti jej chcete použít a nikdy naopak!

Alternativní text – v tagu IMG můžete dále doplnit tag pro alternativní text. Jeho syntaxe je následující:

ALT=“samotný alternativní text“

Alternativní text se zobrazuje v případě, že stránka obsahuje obrázky, které ještě nejsou načteny, dále v případě, že nad obrázkem podržíte kurzor myši a objeví se vám žlutý rámeček s tímto textem nebo v případě, že máte v prohlížeči vypnuto načítání obrázků nebo v případě, když se obrázek z libovolných důvodů nenačte. Alternativní popisky obrázku v každém případě používejte

Doporučuji u obrázku parametr BORDER pokaždé uvádět, i když žádné orámování nechcete – některé prohlížeče (např. NN) mají tendenci v případě neuvedení hodnoty BORDER vytvořit kolem obrázku neviditelné orámovaní o velikosti dvou pixelů! Barva orámování je obvykle černá, pokud je obrázek současně odkazem, obrázek je orámován modře.

Volný prostor u obrázků – poslední dva parametry, které se často používají slouží k určený volného prostoru okolo obrázků. Syntaxe těchto parametrů je následující:

VSPACE=“cislo“ – definice volného prostoru nalevo a napravo od obrázku v pixelech

HSPACE=“cislo“ – definice volného prostoru nad obrázkem a pod obrázkem v pixelech

Není možné definovat rozdílnou velikost prázdného prostoru na levé a pravé části obrázku, či rozdílnou velikost nad obrázkem a pod obrázkem. Tyto dva parametry nejsou povinné, většina prohlížečů dokáže obrázek od textu automaticky trošku odsadit.

Obrázky na www stránce jsou dnes neodmyslitelnou součástí webu. Definují se nepárovým tagem IMG. Povinné je uvádění velikosti obrázku a alternativní text, případně velikost orámování obrázku. Pokud má být obrázek obtékán textem, nezapomeňte definovat zarovnání obrázku parametrem ALIGN. Pokud definujete v IMG tagu velikost obrázku, dbejte na to, aby nastavené hodnoty odpovídaly skutečné velikost obrázku, pokud uvedete hodnoty jiné, obrázek bude na www stránce zkreslený. Pokud se vám zdá, že text je na obrázek příliš moc nalepen, použijte v IMG parametry VSPACE a HSPACE pro definici volného prostoru kolem obrázku. A nakonec – pamatujte, že stránky, které obsahují příliš mnoho obrázků (zvláště animovaných GIFů) nejenom, že nejsou hezké, ale také se dlouze načítají…

Předchozí článek Myší události - základní syntaxe

Další článek Macromedia FLASH 4 - popis programu