L e k c e Φ. 3 - Obrßzky

Jazyk HTML umo₧≥uje vklßdat do strßnek i obrßzky, ty mohou b²t ulo₧eny v nejr∙zn∞jÜφch formßtech, p°iΦem₧ mezi nejvyu₧φvan∞jÜφ se °adφ GIF a JPEG, ale jsou i dalÜφ nap°. BMP, PNG Φi TIFF. Vyu₧itφm obrßzk∙ m∙₧eme dosßhnout velmi dobr²ch v²sledk∙ co se designu a grafiky v∙bec t²Φe.

  1. Zßkladnφ tag IMG
  2. Zßpis cesty k obrßzku
  3. V²Üka a Üφ°ka obrßzku
  4. OhraniΦenφ obrßzku
  5. Obrßzek jako hypertextov² odkaz
  6. ObtΘkßnφ zarovnanΘho obrßzku textem
  7. Zarovnßnφ textu k okraj∙m obrßzku
  8. Obrßzek jako souΦßst textu (nezarovnan²)
  9. Odsazenφ od obrßzku v horizontßlnφm i vertikßlnφm sm∞ru

StruΦn² p°ehled vÜech atribut∙ tΘto lekce:

  • SRC - nastavuje cestu k obrßzku
  • WIDTH - nastavuje Üφ°ku obrßzku
  • HEIGHT - nastavuje v²Üku obrßzku
  • BACKGROUND - nastavuje obrßzek na pozadφ tabulky, °ßdku a bu≥ky
  • BORDER - nastavuje velikost ohraniΦenφ obrßzku
  • CELLSPACING - nastavuje velikost rozestupu mezi jednotliv²mi bu≥kami
  • ALIGN - nastavuje zarovnßnφ obrßzku v∙Φi textu
  • VALIGN - nastavuje vertikßlnφ zarovnßnφ obsahu bu≥ky
  • HSPACE - nastavuje velikost odsazenφ textu i dalÜφch prvk∙ od obrßzku v horizontßlnφm sm∞ru
  • VSPACE - nastavuje velikost odsazenφ textu i dalÜφch prvk∙ od obrßzku ve vertikßlnφm sm∞ru

1. Zßkladnφ tag IMG

Zßkladnφm tagem uvozujφcφm obrßzek je <IMG>, kter² je nepßrov² a tudφ₧ nepou₧φvßme ukonΦovacφ tag </IMG>. Aby bylo mo₧nΘ obrßzek v∙bec pou₧φt musφme znßt jeho jmΘno a umφst∞nφ na disku (serveru) - toto potom v podob∞ cesty (relativnφ a nebo absolutnφ) zapφÜeme do atributu src="cesta k obrazku".

Obrßzek ve formßtu JPEG, kter² se nachßzφ ve stejnΘm adresß°i jako HTML soubor <IMG src="obr.jpg">

Vφce o daresovßnφ v textu jak si ud∞lat po°ßdek v souborech.

2. Zßpis cesty k obrßzku

Obrßzek se vÜak v₧dy nenachßzφ ve stejnΘm adresß°i jako HTML soubor a proto je nutnΘ nastavit k n∞mu sprßvnou cestu. Podφvejme se te∩ na situace, kterΘ mohou nastat.

  • <IMG src="obrazky/obr.jpg"> - Obrßzek, kter² se nachßzφ v podadresß°i OBRAZKY adresß°e, ve kterΘm se nachßzφ HTML soubor
  • <IMG src="../obrazy/obr.jpg"> - Obrßzek se nachßzφ v podadresß°i OBRAZY adresß°e nad°azenΘho adresß°i, ve kterΘm se nachßzφ HTML soubor
  • <IMG src="C:/Dokumenty/Moje_stranky/Obrazky/obr.jpg"> - Je rovn∞₧ mo₧nΘ nastavit absolutnφ cestu k obrßzku.

TakΘ m∙₧ete na sv²ch strßnkßch zobrazovat obrßzek, kter² se nachßzφ na ·pln∞ jinΘm serveru. Pak je nutnΘ uvΘst celou absolutnφ cestu k obrßzku i se zkratkou http. Tato zkratka informuje prohlφ₧eΦ o tom, ₧e mß k obrßzku p°istupovat pomocφ protokolu http.

  • <IMG src="http://www.galerie.cz/obrazky/obr.jpg"> - Obrßzek umφst∞n² na serveru www.galerie.cz ve slo₧ce "obrazky"

3. V²Üka a Üφ°ka obrßzku

Ka₧d² obrßzek mß urΦitΘ rozm∞ry - sφ°ku a v²Üku. V naÜem p°φpad∞ je obrßzek obr.jpg Üirok² 150 a vysok² 101 pixel∙. Pokud napφÜeme jen tag IMG a zdroj obrßzku, bude si muset Internetov² prohlφ₧eΦ vypoΦφtat jeho rozm∞ry, to mu dß trochu prßce a zabere chvilku Φasu. Proto je v²hodnΘ do tagu za°adit i atributy definujφcφ Üφ°ku (WIDTH) a v²Üku (HEIGHT) s odpovφdajφcφmi hodnotami. V naÜem p°φpad∞ bude zßpis vypadat nßsledovn∞.

Obrßzek s definovanou Üφ°kou a v²Ükou
<IMG src="obr.jpg" width="150" height="101">

Samoz°ejm∞ je mo₧nΘ v atributech nastavit jinΘ hodnoty, ne₧ jakΘ mß obrßzek ve skuteΦnosti. Internetov² prohlφ₧eΦ si je vypoΦφtß a zobrazφ obrßzek s odpovφdajφcφmi hodnotami, ten bude ale "deformovßn".

Obrßzek se zm∞n∞nou v²Ükou a Üφ°kou
<IMG src="obr.jpg" width="130" height="87">

Pokud nenastavφme Üφ°ku, ani v²Üku obrßzku a ten z n∞jakΘho d∙vodu nebude naΦten na strßnku, zobrazφ se mφsto n∞j malΘ pole, kterΘ nßm svou symbolikou °φkß, ₧e obrßzek neÜel naΦφst. Toto pole je vÜak menÜφ ne₧ velikost obrßzku a tato malß chyba nßm m∙₧e v designu strßnek velmi uÜkodit. Je proto lepÜφ definovat Üφ°ku a v²Üku obrßzk∙.

Nezobrazen² obrßzek s nedefinovanou Üφ°kou a v²Ükou
<IMG src="obr.jpg">

Nezobrazen² obrßzek s definovanou Üφ°kou a v²Ükou
<IMG src="obr.jpg" width="150" height="101">

4. OhraniΦenφ obrßzku

Je mo₧nΘ, ₧e se Vßm z n∞jak²ch d∙vod∙ bude hodit, aby m∞l obrßzek okraj. Toto provedeme pomocφ atributu BORDER s velikostφ ohraniΦenφ v pixelech.

Obrßzek s ohraniΦenφm o velikosti 5 pixel∙
<IMG src="obr.jpg" border="5">

5. Obrßzek jako hypertextov² odkaz

Kdy₧ chceme, aby byla u₧ivateli po kliknutφ na obrßzek zobrazena dalÜφ strßnka, provedeme to podobn∞ jako v p°φpad∞ klasickΘho textu - pouze mezi tagy <A> a </A> umφstφme mφsto textu obrßzek.

Obrßzek jako odkaz
<A href="stranka.html">
 <IMG src="obr.jpg">
</A>

V p°φpad∞ p°edchozφ ukßzky se vÜak kolem obrßzku zobrazφ ohraniΦenφ o velikosti 2 pixely a v barv∞, podle nastavenφ barvy odkaz∙ (standardn∞ tedy ve v²chozφm stavu bude ohraniΦenφ modrΘ a po kliknutφ fialovΘ). Tento "nedostatek" odstranφme pomocφ nßm ji₧ znßmΘho atributu BORDER.

Obrßzek jako odkaz (bez ohraniΦenφ)
<A href="stranka.html">
 <IMG src="obr.jpg" border="0">
</A>

Pokud ale chcete mφt kolem obrßzku barevnΘ ohraniΦenφ, ne vÜak velkΘ standardnφ 2 pixely, nastavφme toto zase pomocφ atributu BORDER.

Obrßzek jako odkaz (s ohraniΦenφm o velikosti 9 pixel∙)
<A href="stranka.html">
 <IMG src="obr.jpg" border="0">
</A>

Dßle m∙₧eme vytvo°it odkaz z obrßzku i textu zßrove≥.

Obrßzek a text jako odkaz souΦasn∞
<A href="stranka.html">
 <IMG src="obr.jpg" border="0">textov² odkaz
</A>

textov² odkaz

6. ObtΘkßnφ zarovnanΘho obrßzku textem

Jsou urΦitΘ p°φpady, kdy chceme nechat text obtΘkat kolem obrßzku. Tento ·kon provßdφme tagem ALIGN, jemu₧ p°i°azujeme r∙znΘ hodnoty - left, right. Obrßzek je pak zarovnßn nalevo, nebo napravo.

Text obtΘkajφcφ obrßzek zarovnan² nalevo: - align="left"

Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doleva = obrßzek vlevo a text vpravo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doleva = obrßzek vlevo a text vpravo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doleva = obrßzek vlevo a text vpravo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doleva = obrßzek vlevo a text vpravo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doleva = obrßzek vlevo a text vpravo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doleva = obrßzek vlevo a text vpravo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doleva = obrßzek vlevo a text vpravo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doleva = obrßzek vlevo a text vpravo.

Text obtΘkajφcφ obrßzek zarovnan² napravo: - align="right"

Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doprava = obrßzek vpravo a text vlevo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doprava = obrßzek vpravo a text vlevo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doprava = obrßzek vpravo a text vlevo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doprava = obrßzek vpravo a text vlevo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doprava = obrßzek vpravo a text vlevo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doprava = obrßzek vpravo a text vlevo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doprava = obrßzek vpravo a text vlevo. Text vlo₧en² na strßnku, je₧ obtΘkß obrßzek zarovnan² doprava = obrßzek vpravo a text vlevo.

7. Zarovnßnφ textu k okraj∙m obrßzku

DalÜφ mo₧nostφ jak zarovnßvat text ve spojenφ s obrßzkem, je jako hodnoty tagu ALIGN uvßd∞t hodnoty top (nahoru), middle (nast°ed), nebo bottom (naspod).

Text zarovnan² k hornφmu okraji obrßzku: - align="top"

N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku.

Text zarovnan² na st°ed obrßzku: - align="middle"

N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku.

Text zarovnan² k dolnφmu okraji obrßzku: - align="bottom"

N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku.

8. Obrßzek jako souΦßst textu (nezarovnan²)

Nynφ si uvedeme p°φklad obyΦejnΘho umφst∞nφ obrßzku v textu.

Obrßzek jako souΦßst textu:

N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku.

9. Odsazenφ od obrßzku v horizontßlnφm i vertikßlnφm sm∞ru

Chceme-li, aby se v urΦitΘ vzdßlenosti od obrßzku - v horizontßlnφm (HSPACE), nebo vertikßlnφm (VSPACE) sm∞ru - nemohl nachßzet dalÜφ objekt (jin² obrßzek, nebo text), musφme pou₧φt tyto dva tagy HSPACE a VSPACE. Oba nab²vajφ Φφseln²ch hodnot.

Obrßzek s odsazenφm v horizontßlnφm sm∞ru o 20 pixel∙ a ve vertikßlnφm o 10 pixel∙:
<IMG src="obr.jpg" hspace="20" vspace="10" border="0" align="left">

N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku. N∞jak² docela obyΦejn² Φi formßtovan² text pro ukßzku.