
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>).
|
- <IMG src="url"
lowsrc="url"
alt="alternativnφ_text"
align=[top | middle | bottom | right | left |
texttop | absmidlle | baseline | absbottom]
width="Üφ°ka"
height="v²Üka"
units=jednotka
vspace="vertikßlnφ_odsazenφ"
hspace="horizontßlnφ_odsazenφ"
border="Üφ°ka_rßmeΦku"
ismap usemap="url">
-
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 |
|
|