HTML/Obrázky

Z Wikiknih
Skočit na navigaci Skočit na vyhledávání

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>[editovat]

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[editovat]

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[editovat]

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[editovat]

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[editovat]

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[editovat]

Označuje šířku obrázku.

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

Height[editovat]

Označuje šířku obrázku.

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

Align[editovat]

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[editovat]

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[editovat]

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[editovat]

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">