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:

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

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