HTML/Obrázky

Dnes už si neumíme představit webovou stránku bez obrázku, takže tag <IMG> bude jeden z těch, které budete používat častěji.

Tag <IMG>

Obrázky se tvoří pomocí tagu <IMG> což je zkratka anglického slovíčka IMAGE(obrázek) Jelikož je to nepárový tag, proto neexistuje </img> což je hrubá chyba!

Při použití různých atributů to může vypadat takto:

<img src='nejaky_obrazek.gif' alt='Popis obrázku' width='100' height='100' border='1'>

Atributy

Jak je řečeno v Lekci 1 některé tagy mají atributy a IMG jich má hned několik které si představíme.

SRC

Atribut SRC označuje cestu k souboru a to jak absolutní tak i relativní Tento atribut je povinný bez něj prohlížeč nezobrazí obrázek.

<img src="nejaky_obrazek.gif">

ALT

Nastavuje text který se zobrazí v prohlížeči na kterém jsou vypnuty obrázky. Tento atribut je jeden z nejdůležitějších u obrázku protože Vyhledávače podle něho vyhledávají obrázky nebo počítače pro slepce ho předčítají.

<img src="http://upload.wikimedia.org/wikipedia/meta/2/2a/Nohat-logo-nowords-bgwhite-200px.jpg" alt="Logo wikipedie">

Rozměry

Pomocí atributů se dá obrázek zvětšit nebo zmenšit jak na šířku tak na výšku.
Zde doporučuji vždy zadávat oba atributy, protože když je nezadáte tak prohlížeč čeká než se obrázek načte protože nezná jeho velikost proto neví kolik míst ana webu si má pro něj rezervovat (toto neplatí pro prohlížeče založené na jádru GECKO )
jednotky jsou pixely a nebo procenta.

Width

Označuje šířku obrázku.

<img src="nejaky_obrazek.gif" alt="Zajímavý neznámy obrazec" width="100%">

Height

Označuje šířku obrázku.

<img src="nejaky_obrazek.gif" alt="Zajímavý neznámy obrazec" height="100%">

Align

Určuje umístění obrázku vzhledek k okolním prvkům. Zde přidávám tabulku různých možností.

Možnosti zarovnání

Název	Popis
left	Obrázek je nalevo a text je vedlo něj zprava
right	Obrázek je napravo a text je vedlo něj zpleva
top	Obrázek je zarovnán nahoru
baseline	Obrázek je zarovnán dolu
texttop	Obrázek je zarovnán nahoru ale maximálně na nejvyšši bod textu
bottom	Obrázek je zarovnán dolu ale maximálně na nejnižší bod textu
middle	Obrázek je zarovnán doprostřed
middle	Obrázek je zarovnán doprostřed
absmiddle	Obrázek je zarovnán doprostřed řádku
absbottom	Obrázek je zarovnán na spodek řádku

<img src="nejaky_obrazek.gif" alt="Zajímavý neznámy obrazec" height="100" height="100" align="top">

Border

Udává šířku rámečku obrázku. Udané číslo je v pixelech.

<img src="nejaky_obrazek.gif" alt="Zajímavý neznámy obrazec" height="100" height="100" border="10">

Style

Do atributu style se zadává CSS styl obrázku. Zde není naším úkolem naučit CSS -> Jakmile bude nějakej CSS návod dáme ho sem. Jen pro ukázku

<img src="nejaky_obrazek.gif" alt="Zajímavý neznámy obrazec" style="width: 100px; height= 100px;">

Map

Klikací mapa na obrázku. Využití je třeba pro obrázkové menu pokud nechcete rozřezávat na jednotlivé díly.

v TAGu <MAP> je atribut name který přiřazuje jednotlivou mapu k určitému obrázku. TAG <AREA> je se zapisuje pomocí souřadnic v pixelech oblast na kterou se dá klikat.
Ve tvaru -> (začátek-x),(začátek-y),(konec-x),(konec-y)

<map name="menu">
<area href="prvni.htm" shape="rect" coords="20, 20, 40, 40">
<area href="druha.htm" shape="rect" coords="50, 50, 70, 70">
</map>

<img src="obrazek.gif" usemap="#menu" width="150" height="150">