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.