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