Obrázky a grafika

Obsah lekce:

Grafika v HTML dokumentech

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.

Příkladem může být například nadpis této lekce

<IMG SRC="images/grafika.gif">

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>).

nepárová značka, která do dokumentu zařazuje grafický objekt

`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)

Hypertextová grafika

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.

<BODY>
<A HREF="#obsah">
<IMG SRC="images/obsah.gif"></A>
<A HREF="#img">
<IMG SRC="images/img.gif"></A>
</BODY>

Výsledné zpracování:

Poznámka: Výraznějšího efektu dosáhneme vycentrováním tohoto menu a zakázáním rámečku kolem hypertextové grafiky (BORDER=0)

<BODY>
<CENTER>
<A HREF="#obsah">
<IMG SRC="images/obsah.gif" BORDER=0></A>
<A HREF="#img">
<IMG SRC="images/img.gif" BORDER=0></A>
</CENTER>
</BODY>

Výsledné zpracování:

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.

Umístění obrázků

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.

<BODY>
<A HREF="zaklady.htm">
<IMG SRC="images/sipka.gif" BORDER=0 ALIGN="bottom">
1. lekce</A><BR>
<A HREF="struktur.htm">
<IMG SRC="images/sipka.gif" BORDER=0 ALIGN="bottom">
2. lekce</A><BR>
<A HREF="format.htm">
<IMG SRC="images/sipka.gif" BORDER=0 ALIGN="bottom">
3. lekce</A><BR>
</BODY>

Výsledné zobrazení:

1. lekce

2. lekce

3. lekce

Obtékání obrázků textem

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.

<BODY>
<IMG SRC="images/pr09b.jpg" ALIGN="left" HSPACE=10 VSPACE=10>
<H2>PR 09/b</H2>
Bílá kostra. Mechanismus synchron HERKULES umožňuje plynulé nastavení sklonu sedáku s opěradlem nezávisle na sobě. Je možné nastavit přítlak celého mechanismu v rozsahu váhy sedícího človeka mezi 60 - 100 kg. Ovládání mechanismu probíhá jednou páčkou. Aretace polohy je možná kdykoliv v průběhu "houpání".
</BODY>

Výsledné zpracování:

PR 09/b

Bílá kostra. Mechanismus synchron HERKULES umožňuje plynulé nastavení sklonu sedáku s opěradlem nezávisle na sobě. Je možné nastavit přítlak celého mechanismu v rozsahu váhy sedícího človeka mezi 60 - 100 kg. Ovládání mechanismu probíhá jednou páčkou. Aretace polohy je možná kdykoliv v průběhu "houpání".

Ovlivnění velikosti obrázků

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).

<BODY>
<IMG SRC="images/fial_px.gif" WIDTH=500 HEIGHT=4>
</BODY>

Výsledné zobrazení:

Grafický formát GIF89a

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.

Ukázka rozdílu při použití 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).

Ukázka animovaného GIFu:

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.

Klikací mapy v obrázku

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 "#".

Obrázek s vyobrazením hodin, kde po odkliknutí dané hodiny dojde k natažení lekce s daným číslem do prohlížeče

<BODY>
<MAP NAME="hodiny">
<AREA SHAPE="rect" COORDS="118,49 147,78" HREF="zaklady.htm">
<AREA SHAPE="rect" COORDS="189,68 218,97" HREF="struktur.htm">
<AREA SHAPE="rect" COORDS="186,125 215,154" HREF="format.htm">
<AREA SHAPE="rect" COORDS="120,146 149,175" HREF="seznam.htm">
<AREA SHAPE="rect" COORDS="45,124 74,153" HREF="hyperlnk.htm">
<AREA SHAPE="rect" COORDS="45,69 74,98" HREF="grafika.htm">
</MAP>
<CENTER>
<IMG SRC="images/hodiny.gif" USEMAP="#hodiny" BORDER=0>
</CENTER>
</BODY>

Výsledné zpracování:

<MAP name="návěští">

...vymezení citlivých oblastí příkazem <AREA>...

</MAP>

párová značka, která umožňuje definovat "hypertextově citlivé plochy" obrázků

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=&quot#jméno"...>

<AREA shape=[default | circle | rect | polygon] coords="souřadnice_oblasti" href="url" alt="alternativní_text" target="cílové_okno">

nepárová značka sloužící k popisu jedné citlivé oblasti na grafickém objektu a specifikaci hypertextového odkazu svázaného s touto oblastí

`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