|
Grafické úpravy HTML dokumentov
Jazyk HTML umožňuje vkladať
obrázky priamo do HTML dokumentu pomocou príkazu
<IMG>. V podstate celá WWW stránka sa môže
skladať z obrázkov, samozrejme ale doba prenosu takejto
stránky môže trvať aj niekoľko minút. Obrázky, ktoré máte
možnosť vidieť v akomkoľvek dokumente nie sú súčasťou HTML
kódu, ale sú niekde uložené na WWW servri, v grafickom formáte
GIF nebo JPEG. Názov súboru s obrázkom sa do HTML dokumentu
vkladá pomocou atributu SRC.
Napr.:
| <IMG SRC="../pictures/me.jpg">
|
V tomto príklade je použitá
relatívna URL adresa obrázku. Táto relatívna URL adresa sa
vzťahuje na adresár, v ktorom sa nachádza aktuálna HTML
stránka. Obrázky je možné umiestňovať na stránke pomocou
príkazu
<P ALIGN=[right | left | center]>.
<IMG src="url"
alt="alternatívny text" align=[top
| bottom | right | left | width="šírka"
height="výška" units="jednotka
veľkosti" vspace="vertikálny okraj"
hspace="horizontálny okraj"
border="šírka rámčeku" ismap
usemap="url">
nepárová
značka, ktorá do HTML dokumentu zaraďuje grafický objekt
| src |
URL
grafického objektu |
| alt |
alternatívny text, ktorý sa zobrazí v
prípade, že prehliadač nevie (prípadne nesmie)
zobraziť grafické objekty |
| align |
umiestnenie grafického objektu zhľadom na
okolie
top horný okraj grafického
objektu bude zarovnaný s horným okrajom riadku
bottom dolný okraj grafického objektu
bude zarovnaný so spodným okrajom riadku
left vodorovné umiestnenie na ľavý
okraj aktuálneho okna; text obteká grafický objekt
z prava
right vodorovné umiestnenie na
pravý okraj aktuálneho okna; text obteká grafický
objekt z ľava |
| width |
požadovaná šírka grafického objektu,
prehliadač by mal grafický objekt upraviť tak, aby
sa šírka pri zobrazení zmenila na požadovanú šírku
( veľkosť sa udáva v počte bodov) |
| height |
požadovaná výška grafického objektu
|
| vspace |
určuje
koľko miesta bude vynechané okolo grafického
objektu vo vertikálnom smere |
| hspace |
určuje
koľko miesta bude vynechané okolo grafického
objektu v horizontálnom smere |
| units |
jednotka
veľkosti (udáva sa v percentách alebo v prixeloch
) |
| border |
šírka
rámčeku vytvoreného okolo grafického objektu;
BORDER=0 nezobrazí sa žiadny rámček |
| ismap |
označuje,
že pri stlačení tlačítka v určenej grafickej
oblasti grafického objektu má prehliadač poslať
súradnice tejto oblasti CGI skriptu |
| usemap |
URL na
definíciu citlivých oblastí grafického objektu
(podpríkaz MAP)
| |
Použitie grafických objektov ako hypertextové odkazy
Podobne ako text môžu byť v rámci
príkazu <A> použité aj grafické objekty
(obrázky). Týmto spôsobom je veľmi jednoduché realizovať
grafické menu.
Napr.:
<BODY>
<P ALIGN=CENTER>
<A HREF="MAILTO:peter@salamon.sk">
<IMG
SRC="../pictures/mail.jpg" BORDER=0 ALT="Mail">
</A>
</BODY>
Výsledok:
|
Všade tam, kde sa používajú
grafické objekty ako hypetextové odkazy, je výhodné zadávať
atribut ALT, aby sa zobrazil text, který sa zobrazí v
prehliadačoch, ktoré nevedia grafické objekty zobraozvať.
Umiestňovanie grafických objektov v
dokumente
Grafické objekty je možné
umiestňovať v rámci textu. V tomto prípade je s grafickým
objektom pracované ako s každým iným znakom textu. Výška
grafického objektu napríklad určuje výšku celého riadku. K
umiestňovaniu grafických objektov voči riadkom sa používa
atribut ALIGN.
Napr.:
<BODY>
<IMG
SRC="../pictures/mail.jpg" BORDER=0 ALIGN="center">
e-mail to Peter Mesároš
</A>
<BR>
<IMG SRC="../pictures/slmn_s.jpg"
BORDER=0 ALIGN="center">
e-mail to Salamon
</A>
<BR>
</BODY>
Výsledok:
e-mail to
Peter Mesároš
 e-mail to Salamon
|
Obtekanie grafického objektu textom
Pomocou atribútov príkazu
ALIGN "right" a "left" je možné umiestňovať grafické
objekty do textu a grafické objekty vložiť na stránku
nezávisle na texte buď vľavo alebo v pravo. Pomocou atribútov
HSPACE a VSPACE dokážeme zabezpečiť, aby text
nebol veľmi blízko pri grafickom objekte.
Napr.:
<BODY>
<FONT SIZE=2
FACE="ARIAL">
<B><I>Bruce
Boxleitner</I></B>
<BR>
<IMG SRC="../pictures/john.jpg" VSPACE=10
HSPACE=10 ALIGN=LEFT ALT="Bruce Boxleitner">
<BR>
V jeho televíznej kariére vyniká
postava šarmantného špióna Leeho Stetsona zo seriálu
Agentka so srdcom. Účinkoval aj v miniseriáloch, ako
napríklad Zoya (partnerkou mu bola manželka Melissa
Gilbertová), ako aj vo filmoch (Wyatt Earp: Návrat do
Tombstonu, Na východ od raja) a na filmovom plátne (Kuff
po boku Christiana Slatera, The Babe s Johnom
Goodmanom). K jeho najväčším úspechom nesporne patrí
ocenenie <B>Najlepší herec v televíznom
seriáli</B>.
</FONT>
</BODY>
Výsledok:
Bruce Boxleitner
V
jeho televíznej kariére vyniká postava šarmantného
špióna Leeho Stetsona zo seriálu Agentka so srdcom.
Účinkoval aj v miniseriáloch, ako napríklad Zoya
(partnerkou mu bola manželka Melissa Gilbertová), ako aj
vo filmoch (Wyatt Earp: Návrat do Tombstonu, Na východ
od raja) a na filmovom plátne (Kuff po boku Christiana
Slatera, The Babe s Johnom Goodmanom). K jeho najväčším
úspechom nesporne patrí ocenenie Najlepší herec v
televíznom seriáli.
|
Zmena
veľkosti grafických objektov
Atributy WIDTH a
HEIGHT umožňujú meniť šírku a výšku grafického objektu.
Ak je zadaný jeden z týchto atributov, prehliadač upraví
veľkosť druhej (nezadanej) hodnoty tak, aby pomer strán zostal
stále rovnaký ako v originále.
Hypertextové
odkazy v definovaných oblastiach grafických objektov (MAP)
Na HTML stránkách často narazíte
na grafické objekty, v ktorých sa nachádzajú preddefinované
rôzne hypertextové odkazy tzv. MAP. Podľa toho, v ktorej
oblasti grafického objektu sa nachádzate sa po stlačení myši,
vykoná konkrétna akcia (väčšinou dôjde k presunutiu na určitý
HTML dokumentu). Všetko čo potrebujete vedieť o MAP je poznať
súradnice oblastí, ktoré chcete použiť ako odkazy. V kóde HTML
dokumentu musia byť v rámci kontajnera <MAP>
priradené oblastiam zdroje, ktoré sú po kliknutí natiahnuté
prehliadačom. To sa prevedie príkazom <AREA>. K
tomuto príkazu existujú nasledujúce atribúty SHAPE
slúži k označeniu oblasti na, ktorú sa kliká, COORDS
slúži na zadanie súradníc a HREF slúži k zadaniu URL
adresy. Súradnice sa zadávajú v pixeloch (v poradí u
obdĺžnika: x-ová súradnica ľavého horného rohu, y-ová
súradnica ľavého horného rohu, x-ová súradnica pravého dolného
rohu, y-ová súradnica pravého dolného rohu). Ku kontajneru
<MAP> je priradený názov, ktorý zabezpečuje
spojenie s grafickým objektom umiesteným do dokumentu príkazom
<IMG>. Priradenie príkazu <MAP> a
grafického objektu sa robí pomocou atribútu USEMAP k
príkazu <IMG>.
Napr.:
Obrázok, na ktorá keď prídete s myšou tak sa
na jednotlivých kapsuliach zobrazí ručička.
<BODY>
<P ALIGN=CENTER>
<IMG SRC="../pictures/bar1.jpg" BORDER=0
USEMAP="#navbar" ALT="Navigačný pult">
<MAP
NAME="navbar">
<AREA SHAPE=RECT
COORDS="150,1,270,40 "A HREF="info.htm"
TARGET="_top">
<AREA SHAPE=RECT
COORDS="290,1,415,40" A HREF="pictures.htm"
TARGET="_top">
<AREA SHAPE=RECT
COORDS="430,1,611,40" A HREF="pictured.htm"
TARGET="_top">
</A>
</MAP>
</BODY>
Výsledok:
|
<MAP name= "názov grafického objektu
">
...vymedzenie citlivých oblastí
príkazom <AREA>...
</MAP>
párová značka,
ktorá umožňuje definovať "hypertextové odkazy" na
grafických objektoch
| name |
meno
vytvára v dokumente spojenie použité ako cieľ
atributu usemap spojené s príkazom IMG; odkaz
(URL) na toto spojenie sa zapisuje v tvare <IMG
usemap="#meno" >
|
<AREA shape= [
circle | rect | polygon] coords="súradnice
oblasti" href="url"
alt="alternativný text"
target="cieľové okno">
nepárová značka slúžiaca k
popisu jednej citlivej oblasti na grafickom objekte a k
špecifikácii hypertextového odkazu spojeného s touto
oblasťou
| shape |
definuje
tvar oblasti obrázku
circle
rect
polygon |
| coords |
definuje
súradnice oblasti grafického objektu
x,y,r súradnice stredu a polomeru kruhu
xl,yl,xp,yp súradnice ľavého horného a
pravého dolného rohu pre obdĺžnik
x1,y1,x2,y2,... súradnice jednotlivých
vrcholov pre mnohouhoľník |
| href |
URL (
dokumntu, ktorý sa má náčítať ) |
| target |
meno okna
alebo prehliadača, v ktorom sa má zobraziť
dokument spojený na tento odkaz |
| alt |
alternativný text
| | |
