Home >> HTML návod >> HTML Obrázky

HTML Obrázky

V této lekci si řekneme něco o obrázcívh v HTML. Naučíme se vkládat obrázky na stránku, zarovnávat obrázek vůči textu a naučíme se také používat obrázek jako odkaz.

Pro vložení obrázku na stránku se používá tag <img> ve spojení s atributem src, jehož hodnotou je URL obrázku - tedy adresa umístění obrázku. Dále se používá atribut alt pro zobrazení alternativního textu v případě, že obrázek nelze zobrazit.

Doporučujeme používat tyto formáty: .gif, .jpg nebo .png.

Příklad:


<img src="http://www.klikzone.cz/obrazky/kruh.gif" alt="Kruh">

Výsledek:

Atributy

Seznam atributů pro HTML tag img:

Atribut	Popis	Hodnoty
height	Definuje výšku obrázku	px %
width	Definuje šířku obrázku	px %
src	Definuje URL obrázku, který se má zobrazit	URL
align	Definuje zarovnání obrázku	left right top middle bottom
alt	Alternativní popisek, který se zobrazí, pokud nelze obrázek zobrazit	text
border	Definuje rámeček obrázku	px
vspace	Velikost odsazení obrázku shora a zdola	px
hspace	Velikost odsazení obrázku zleva a zprava	px
usemap	Definuje, která mapa se má použít pro obrázek	#jmeno_mapy
style	Inline CSS styl	CSS vlastnosti
id	Identifikace pomocí CSS id	název id
class	Identifikace pomocí CSS třídy	název třídy

Zarovnání obrázku

Pomocí atributu align lze definovat zarovnání obrázku. Obrázek bude zarovnán vůči textu - bude tedy obtékán.

Příklad:


<img src="http://www.klikzone.cz/obrazky/kruh.gif" alt="Kruh" align="right">

Výsledek:

Obrázek jako odkaz

Obrázky se také velmi často používají také jako odkazy. Vytvoří se velmi snadno pomocí klasického odkazu:


<a href="http://www.klikzone.cz"><img src="http://www.klikzone.cz/obrazky/kruh.gif" alt="Kruh"></a>

Výsledek:

Odstranění rámečku

Pokud nechceme,aby se při použití odkazu, zobrazil okolo obrázku rámeček, můžeme jej jednoduše odstranit pomocí atributu border="0".

Příklad:


<a href="http://www.klikzone.cz">
<img src="http://www.klikzone.cz/obrazky/kruh.gif" 
 alt="Kruh" border="0" >
</a>

Výsledek:

Další lekce >>

<< Předchozí lekce