Jak se vkládají obrázky

Na stránky se vkládají obrázky ve formátech gif, jpg a png.

Img - obrázek

Obrázky se vkládají tagem img. Pomocí img bylo možné do stránek vložit také video, ale bylo nutné zaměnit atribut src za dynsrc.

Src - cesta k souboru

U obrázků je src nejdůležitější atribut. Jako jeho hodnota se uvádí cesta k souboru.

Alt - popis obrázku

Atribut alt slouží jako alternativní text. Zobrazuje se, pokud se obrázek nenačte, nebo po najetí na obrázek ve žluté bublině.

Width a height - šířka a výška

Width je šířka a height je výška. Pokud tyto atributy neuvedete, zobrazí se obrázek v plné velikosti.

Border - rámeček

Border nastavuje rámeček kolem obrázku. Jako jeho hodnota se uvádí číslo; pokud border neuvedete, rámeček se nezobrazí.

Vspace a hspace - vertikální a horizontální okraj

Atributy vspace a hspace určují svislý a vodorovný prázdný okraj kolem obrázku. Jako jejich hodnota se uvádějí pixely.

Align - zarovnání obrázku

Pomocí atributu align můžete nastavit zarovnání obrázku jako jeho hodnoty můžete použít left, right, top, texttop, middle, absmiddle, baseline, bottom a absbottom.

left = obrázek se zarovná na levou stranu a bude obtékán zprava
right = obrázek se zarovná doprava a bude obtékán zleva
top = horní okraj obrázku se zarovná s horním okrajem textu
texttop = horní okraj obrázku se zarovná s horním okrajem textu
middle = střed obrázku se zarovná na střed řádku
absmiddle = střed obrázku se zarovná se středem řádku
baseline = spodní okraj obrázku se zarovná na účaří
bottom = spodní okraj obrázku se zarovná se spodkem řádku
absbottom = spodní okraj obrázku se zarovná na nejnižší místo řádku

Usemap - použití klikací mapy

Usemap označí obrázek, který bude klikací mapou. Jako hodnota se uvádí jméno mapy ve tvaru #jmeno.

Ismap - souřadnice kliknutí

Ismap k adrese připojí souřadnice místa, na které se kliklo myší.

Příklad vložení obrázku

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Obrázky</title>
</head>
<body>
<p>
<img src="moje-moto.jpg" alt="Yamaha DT" align="left" border="1">
Obrázek je zarovnán vlevo a je zprava obtékán textem.</p>
</body>
</html>

zobrazit výsledek