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>).
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.
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 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).
Barvy
V jazyce HTML lze nastavit motiv pozadí celého HTML dokumentu pomocí
atributu BACKGROUND u návěští <BODY>. Tomuto
atributu je přiřazena URL adresa grafiky, ze které je pak poskládán
podklad stránky tak, že těsně na jeden obrázek navazuje další.
Pokud je motiv zvolen chytře, lze pomocí jednoho malého obrázku
vytvořit velmi působivé pozadí. Při výběru pozadí dokumentu je však
nutné mít stále na paměti, že musí být voleno tak, aby nepůsobilo
rušivě, a aby text stránky byl dobře čitelný.
Vůbec nejideálnější případ je, když obrázek tvořící pozadí působí
po sesazení jednolitým dojmem. Takovéto plochy lze vytvořit například
využitím "Kai's Power Tools" filtrů pro program Adobe
Photoshop.
V novějších verzích prohlížečů lze definovat barvy pozadí i písma.
Barvu je nutné zadat ve formátu šestimístného kódu hexadecimálních
číslic. Vždy dva po sobě jdoucí znaky definují odstín jedné ze
tří základních barev modelu RGB (R - red, G - green, B - blue
= červená, zelená, modrá). Hodnoty odstínů barev je tedy možné ukládat
v rozmezí 0 - 255 (! převedených do hexadecimálního kódu !) ve tvaru
RRGGBB, před který se přidá znak "#".
Tento způsob zápisu je již na první pohled velmi nepohodlný. Z tohoto
důvodu zavedl Netscape běžné názvy pro barvy, například:
"yellow", "blue", ... Používat toto zjednodušení
se však nedoporučuje, neboť ostatní prohlížeče neznají toto rozšíření
a zmíněné barvy přečíst nedokáží. Například barva "red"
způsobí v Exploreru modré zabarvení pozadí.
V některých HTML editorech jsou implementovány také šikovné funkce
pro volbu barev. Příkladem těchto editorů mohou být například Kenn
Nesbitt's Web Edit a HTML Assistant Pro.
V Netscape Navigatoru lze v rámci příkazu <BODY> definovat
atributy: BACKGROUND, BGCOLOR, TEXT, LINK, VLINK, ALINK.
Příklad
Napište zdrojový program v jazyce HTML, jehož výsledkem bude
následujících 15 řádek :
Toto je sparťanské a slávistické logo.
SLAVIA - SPARTA
1 : 1 (1:1)
Branky : 5. Vágner - 11. Siegl
Rozhodčí : Krondl
Žluté karty : Lerch, Vlček, Řehák, Horváth, P. Novotný - Z. Svoboda, V. Svoboda, Siegl,
Votava, Hašek
Diváků : 12.123
SPARTA : Čaloun - Votava - Horňák, Novotný
- V. Svoboda (79. Jarošík), Z. Svoboda, Hašek, Frýdek (58. Gabriel), Čížek
- Siegl, Lokvenc
SLAVIA : Stejskal - Ašanin - Vlček, Řehák
- Pěnička, P.Novotný (85. Vávra), Lerch (63. Jindráček), Horváth, Ulich - Vágner, Vácha
Jedno z možných řešení najdete zde
Testování
- zde si můžete vyzkoušet, jak jste danou látku zvládli
|