Vložení obrázku do stránky není nijak složité, jak by si někdo mohl možná myslet. Nejdůležitější je znát URL obrázku, který chceme na své stránce zobrazit. Ideální je, pokud máte obrázek nahraný na svém "domovském" serveru (případně ještě někde zálohovaný), ale samozřejmě je možné vložit obrázek i z jiné stránky. Pro tuto možnost hovoří to, že ušetříte místo na svém serveru. Ovšem na druhou stranu je to trochu risk: stačí, aby si webmaster serveru, ze kterého si půjčujete obrázek, vzpomněl a přejmenoval soubor nebo ho dokonce smazal. V takovém případě se na vaší stránce zobrazí jen prázdný rámeček s popiskem obrázku, což jistě návštěvníka nepotěší. Další nevýhodou je to, že při načítání stránky se musí kontaktovat i další server, takže se doba natažení obrázku trochu prodlouží.

Pokud už jsme se rozhodli odkud budeme brát obrázky pro své stránky, můžeme začít psát kód pro vložení obrázku do stránky. Základem všeho je tag <img>, který je nepárový, a jeho nejdůležitější atribut je src="", kterým určíme umístění vkládaného obrázku. Hodnotou tohoto parametru může být buď absolutní nebo relativní URL obrázku. Relativní URL se zadává stejně jako v shellu, takže pokud máte v nadřazeném adresáři např. soubor logo.png zadejte pro jeho vložení do stránky tento kód:

<img src="../logo.png">

Dalším důležitým atributem je alt="". Tímto atributem předáváme prohlížeči alternativní popisek obrázku, tj. popisujeme co je na obrázku pro případ, že bude nedostupný nebo že bude návštěvník používat textový prohlížeč nebo aby se návštěvník rozhodl jestli ho vůbec chce stahovat. :) Každý obrázek by měl mít nastavený atribut (dokonce se to vyžaduje) alt="", aby byly stránky "plnohodnotné" i v textové formě. Jazyk, kterým je alternativí text napsán se určuje podle hodnoty atributu lang="".

POZOR: Teď bych rád trochu odbočil a upozornil na jednu z mnoha chyb jednoho zatím (bohužel) majoritního prohlížeče od nejmenované malé měkké firmy. Pokud použijete atribut alt="" a vynecháte atribut title="", který má pro obrázky stejný význam jako pro všechny ostatní tagy, co jsme dosud probrali, vezme si tento prohlížeč alternativní popisek obrázku i pro atribut title="", takže po najetí kurzoru na obrázek se objeví bublinka s alternativním popiskem. Pokud se tomu chcete vyhnout, použijte tento kód, není sice nijak elegntní, ale funguje (pokud někdo znáte lepší způsob napište mi prosím do diskuze nebo na mail):

<img src="../logo.png" alt="alternativní popisek" title="">

Dále by vás měly zajímat atributy width="" a height="", pomocí kterých dopředu sdělíte prohlížeči, jak velký obrázek se bude do stránky vkládat, a tím ušetříte prohlížeči práci s přeformátováváním stránky po načtení obrázku. Nyní jsou ale tyto atributy vytlačovány CSS - W3C consorcium se tak snaží očistit HTML od zbytečných tagů a atributů a vrátit mu jeho původní účel: vyznačení struktury dokumentů. Pokud jste v HTML nováčci, nedělejte si s tím zatím příliš hlavu, až si zažijete HTML, naučíte se CSS a stránky si přepíšete. :)

Jméno obrázku pro identifikaci ve scriptovacích jazycích můžete vytvořit dvojím způsobem: pomocí atributu name="" - tento atribut zůstává už jen kvůli zpětné kompatibilitě kódu; nebo přes modernější atribut id="".

Ve standardu HTML je také definován atribut longdesc="", kterým specifikujeme adresu podrobnějších informací o obrázku. Pokud je obrázek "klikací mapou" specifikuje tento atribut i informace o klikací mapě a její obsah.

Dalším speciálním atributem je usemap="", který specifikuje rozložení aktivních a pasivních oblastí na obrázku. Každá mapa má nějaké jméno, kterým se později volá. Vice o klikacích mapách se dozvíte v příštím díle.

Ostatní atributy si krátce představíme v tradiční tabulce:

Atribut	Hodnota	Význam
id	libovolný text	Hodnotou atributu je text (znakový řetězec), který je jednoznačným identifikátorem prvku v dokumentu. Tento atribut využijete třeba při oživování stránek pomocí JavaScriptu.
class	libovolný text	Hodnotou atributu je třída definovaná v tabulce prvků CSS, podle které se prvek zformátuje.
lang	zkratky označující jazyk, např.: en, cz, sk	Hodnotou atributu určujeme jazyk, kterým je psaný alternativní popisek. Podle zvoleného jazyka se aktivují různé konvence používané v konkrétních jazycích (např.: francouzské uvozovky).
dir	rtl	Určuje směr textu zprava doleva.
	ltr	Určuje směr textu zleva do prava.
title	libovolný text	Určuje titulek obrázku, který se v některých prohlížečích zobrazí jako bublinková nápověda po najetí kurzoru na obrázek.
style	příkazy jazyka CSS, např. color : red;	Pomocí tohoto atributu můžete nadefinovat, jak se má zobrazit určitý logický styl. Můžete využít všechny možnosti, které CSS nabízí.
align	bottom	Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je součástí řádky a jeho spodní linka je zarovnána s řádkou. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
	middle	Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je součástí řádky a je vzhledem k řádce vycentrován. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
	top	Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je součástí řádky a jeho horní linka je zarovnána s řádkou. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
	left	Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je u levého okraje stránky a je obtékán textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
	bottom	Pomocí tohoto atributu můžete nadefinovat zarovnání obrázku; obrázek je u pravého okraje stránky a je obtékán textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
border	rámeček okolo obrázku v pixelech	Nastavuje šířku rámečku okolo obrázku. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
hspace	odsazení textu zleva a zprava od obrázku v pixelech	Nastavuje velikost mezery mezi obrázkem a okolním textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.
vspace	odsazení textu shora a zdola od obrázku v pixelech	Nastavuje velikost mezery mezi obrázkem a okolním textem. Atribut by se už neměl používat, v novějších verzích nebude podporován - lze ho nahradit pomocí CSS.

Samozřejmě že i obrázky mají atributy využitelné ve spojení se scriptovacími jazyky.

Povolené atributy spojené s JS v logických stylech
Atribut	Význam
onclick	Příkazy zadané jako hodnota proběhnou při kliknutí na obrázek
ondblclick	Příkazy zadané jako hodnota proběhnou při dvojkliku na obrázek
onmousedown	Příkazy zadané jako hodnota proběhnou při stisku tlačítka myši na obrázku
onmouseup	Příkazy zadané jako hodnota proběhnou po stisku tlačítka myši (po uvolnění tlačítka) na obrázku
onmouseover	Příkazy zadané jako hodnota proběhnou při přejetí kurzoru nad obrázkem
onmousemove	Příkazy zadané jako hodnota proběhnou při pohybu kurzoru nad obrázkem
onmouseout	Příkazy zadané jako hodnota proběhnou poté, co kurzor opustí prostor nad obrázkem
onkeypress	Příkazy zadané jako hodnota proběhnou při stisku klávesy na klávesnici
onkeydown	Příkazy zadané jako hodnota proběhnou při pohybu klávesy dolů (událost nastane ještě před úplným stisknutím klávesy)
onkeyup	Příkazy zadané jako hodnota proběhnou při pohybu klávesy nahoru (událost nastane až při návratu klávesy do nestisknutého stavu)

V příštím díle dokončíme obrázky, probereme si klikací mapy.