Jazyk HTML umožňuje vkládat obrázky přímo do dokumentu prostřednictvím
příkazu <IMG>. Obrázky jsou na WWW stránkách používány ve
stále hojnější míře. V podstatě celý dokument se může skládat jen
z obrázků, ovšem doba přenosu takovéto stránky z jiného serveru na
Internetu může trvat i několik desítek minut.
Obrázky, které uvidíte v jakémkoliv dokumentu nejsou součástí
zdrojového kódu, ale jsou někde uloženy na WWW serveru, nejčastěji
v grafickém formátu GIF nebo JPEG. Název souboru s obrázem se do
dokumentu vkládá pomocí atributu SRC.
V tomto příkladu je použita relativní URL adresa obrázku. Tato
relativní adresa je vztažena k adresáři, v němž se nachází aktuální
HTML stránka. Stejně jako u hypertextových odkazů lze použít i
absolutní URL adresu. Příkaz <IMG> prohlížeč chápe
jako jakýkoliv jiný příkaz pro psaní textu. V praxi to znamená, že
obrázek není nijak odsazován, ani umístěn do nového odstavce.
Pokud následuje za sebou několik příkazů <IMG> tak,
že mezi nimi není žádné návěští <P> (nový odstavec) nebo
<BR> (vynucený přechod na novou řádku), prohlížeč zobrazí
odpovídající obrázky vedle sebe, ovšem za předpokladu, že je k
dispozici dostatek místa.
Obrázky lze centrovat buď pomocí příkazu <CENTER> nebo
jejich umístěním do vystředěného odstavce (<P ALIGN=center>).
| src | URL grafického objektu, který má být vložen do textu |
| lowsrc | URL konceptové grafiky (prohlížecí program přenese konceptový tvar grafiky, dokompletuje celý dokument a až poté začne přenášet plné verze grafiky zadané atributy src) |
| alt | alternativní text, který se vypisuje v případě, že prohlížecí program neumí (příp. nesmí) zobrazovat grafiku |
| align | umístění grafického objektu vůči okolí top horní okraj grafiky bude zarovnán s horním okrajem řádku midlle střed grafiky bude zarovnán na účaří řádku bottom dolní okraj grafiky bude zarovnán se spodním okrajem řádku left vodorovné umístění na levý okraj; text obtéká grafiku zprava right vodorovné umístění na pravý okraj; text obtéká grafiku zleva texttop horní okraj grafiky bude zarovnán s horním okrajem textu na řádku absmiddle střed grafiky bude zarovnán na střed řádku baseline dolní okraj grafiky bude zarovnán na účaří řádku absbottom dolní okraj grafiky bude zarovnán se spodním okrajem řádku |
| width | požadovaná šířka grafiky (prohlížecí program by měl grafiku zvětšit/zmenšit tak, aby její šířka při zobrazení byla rovna zadanému počtu bodů) |
| height | požadovaná výška grafiky |
| vspace | určuje, kolik místa bude vynecháno kolem grafiky ve svislém směru |
| hspace | určuje, kolik místa bude vynecháno kolem grafiky ve vodorovném směru |
| units | jednotka (implicitně pixely) |
| border | šířka rámečku vytvořeného kolem grafiky představující odkaz; border=0 nebude vykreslen žádný rámeček |
| ismap | označuje, že při stisknutí tlačítka myši v oblasti grafiky má prohlížecí program předat souřadnice této oblasti CGI skriptu kotvy |
| usemap | URL na definici citlivých ploch obrázku (prvek MAP) |
Podobně jako text mohou být v rámci kontejneru příkazu <A>
(hypertextové odkazy) umístěny i obrázky. V tomto případě se pak
jedná o tzv. "hypertextovou grafiku". Tímto způsobem
lze velice jednoduše realizovat grafická menu.
Všude tam, kde používáte jako hyperlinků grafiku, je výhodné zadávat
atribut ALT a do něj vepisovat text, který se zobrazí v
prohlížečích, které neumějí grafiku zpracovávat. Bez tohoto opatření
nelze hypertextovou grafiku v negrafických prohlížečích vůbec sledovat.
Dalším důvodem k používání atributu ALT je výpis alternativního
textu po celou dobu natahování obrázku. Díky tomu lze hyperlink
použít dříve, než se na obrazovce objeví obrázek.
Obrázky je možné umís»ovat v rámci řádku s textem. V tomto případě
je s obrázkem zacházeno jako s každým jiným znakem textu. Výška
obrázku například určuje výšku celého řádku a v normálním případě
není možné, aby vedle jednoho obrázku bylo umístěno více řádek textu.
K umís»ování obrázku vůči řádku textu se používá atribut ALIGN.
1. lekce 2. lekce 3. lekce
Pomocí nových hodnot atributu ALIGN "right" a
"left" lze překonat zastaralé umís»ování obrázků do textu
a obrázky vložit na stránku zcela nezávisle na textu buď vlevo nebo
vpravo - dochází k "obtékání" obrázku textem. Pomocí
atributů HSPACE a VSPACE lze zajistit, aby text nebyl
příliš blízko okraje obrázku.
Atributy WIDTH a HEIGHT umožňují měnit šířku a
výšku obrázku. Je-li zadán pouze jeden z nich, prohlížeč upraví
velikost druhé (nezadané) hodnoty tak, aby poměr stran zůstal
stále stejný jako v originále. Zvětšení obrázku zpravidla vede
ke ztrátě kvality. Naopak, pokud chcete zobrazovat obrázek menší,
je lépe vytvořit obrázek nový (v požadovaném měřítku), aby nebylo
nutné přenášet sítí velké množství dat. Zadání obou hodnot atributů
lze využít k různým efektům. Například obrázek tvořený jediným
barevným pixelem je možné použít jako oddělovač textu (viz. příklad).
V obrázcích lze k jedinečným efektům s úspěchem využít možností grafického
formátu GIF89a, který umožňuje vytvářet animované GIFy a používat
"transparentní" (průhlednou) barvu. Transparentní barvou
v obrázku prosvítá pozadí. Tohoto efektu je využito v tomto programu
k vytváření odstavce (odskok od levého okraje), kdy obrázek obsahující
jediný transparentní pixel je zdeformován na šířku 30 pixelů a výšku 1
pixel.
Nejlepším příkladem na transparentnost je zobrazení kruhového
objektu, jehož okolí je tvořeno průsvitnou barvou. Následující příklad
ukazuje rozdíly mezi "normálním" GIFem a použitím
transparentní barvy.
Grafický formát GIF89a umožňuje tvorbu tzv. "animovaných
GIFů", které oživují statické HTML stránky. K tvorbě těchto
animovaných obrázků je možné použít např. program Gif Construction
Set (pro systém Windows).
V případě obrázků na HTML stránkách je výhodné využívat možnosti, že
jednou natažený obrázek v normálním případě prohlížeč uloží do
vyrovnávací paměti, odkud je brán v případě, že je ze serveru
opětovaně požadován. Když například opatříte všechny své dokumenty
nějakým logem nebo stále se opakujícím grafickým symbolem, postačí
tento obrázek stáhnout ze serveru pouze jednou, a to i přesto, že se
vyskytuje všude.
Na HTML stránkách Internetu se často setkáte s obrázky, v jejichž
rámci jsou definovány různé "klikací" oblasti. Podle toho,
v jaké oblasti kliknete myší, provede se konkrétní akce (většinou
dojde k natažení určitého HTML dokumentu). Dříve tato funkce byla
implementována pomocí CGI scriptů, avšak nyní je zpracování
"klikacích" obrázků velmi jednoduché. Vše co o klikací
oblasti potřebujete znát, jsou souřadnice těchto oblastí. K jejich
určení existuje několik utilit (například sharewareový produkt
MapThis, který je volně přístupný na Internetu).
Ve zdrojovém textu dokumentu HTML musí být v rámci kontejneru
<MAP> oblastem přiřazeny zdroje (nejčasteji HTML
dokumenty), které jsou po odklepnutí myši nataženy prohlížečem.
To se provádí pomocí návěští <AREA>. K tomuto návěští
existují atributy SHAPE sloužící k označení "klikací"
oblasti, COORDS k zadání souřadnic a HREF k zadání
URL adresy, odkud bude požadovaný dokument natažen. Souřadnice se
zadávají v pixelech (pořadí u obdélníku: x-ová souřadnice levého
horního rohu, y-ová souřadnice levého horního rohu, x-ová souřadnice
pravého dolního rohu, y-ová souřadnice pravého dolního rohu).
Kontejneru příkazu <MAP> je přiřazen název, který
zajiš»uje spojení s obrázkem umístěným do dokumentu příkazem
<IMG>. Přiřazení příkazu <MAP> a obrázku
se děje pomocí atributu USEMAP příkazu <IMG>. Stejně
jako v případě použití lokální kotvy, i zde musí názvu oblastí
předcházet znak "#".
| name | jméno; vytváří v dokumentu návěští použitelné jako cíl atributu usemap uvedenému v prvku IMG; odkaz (URL) na toto návěští se zapisuje ve tvaru <IMG ...usemap="#jméno"...> |
| shape | definuje tvar oblasti obrázku default implicitní tvar circle kruh rect obdélník polygon obecný mnohoúhelník |
| coords | definuje souřadnice (rozměry) oblasti obrázku x,y,r souřadnice středu a poloměr kruhu xl,yl,xp,yp souřadnice levého horního a pravého dolního rohu pro obdélník x1,y1,x2,y2,... souřadnice jednotlivých vrcholů pro obecný mnohoúhelník |
| href | URL cíle odkazu |
| target | jméno okna, rámce nebo prohlížeče, ve kterém má být zobrazen dokument navázaný na tento odkaz |
| alt | alternativní text, kterým se nahrazuje grafika v případě, kdy prohlížecí program neumí nebo nesmí zobrazovat grafiku |