Klíčová slova	Úvod a cíle

Vkládání obrázků

S problémem vkládání grafiky do WWW stránky souvisí problém výběru vhodného grafického formátu. Nejčastěji se používají formárty GIF, JPG a PNG. Obrázek vložíte na stránku pomocí nepárové značky <img> s atributem src, který určuje, kde se nachází soubor s obrázkem. Atribut align určuje polohu obrázku vůči okolí, může mimo jiné nabývat hodnoty left (right). Obrázek se umístí k levému (pravému) okraji stránky a stane se prakticky nezávislý na textu. Text potom obtéká obrázek zprava (zleva).

Ilustrace je na ukázce vlevo.

Atribut „align“

Atribut align může nabývat dalších hodnot, které ovlivňují vertikální polohu obrázku vůči okolí. Hodnoty jsou následující:

• top - Horní okraj obrázku bude zarovnán s horním okrajem řádku.
• middle - Střed obrázku bude zarovnán na účaří řádku.
• bottom - Dolní okraj obrázku bude zarovnán se spodním okrajem řádku.
• texttop - Horní okraj obrázku bude zarovnán s horním okrajem textu na řádku.
• absmiddle - Střed obrázku bude zarovnán na střed řádku.
• baseline - Dolní okraj obrázku bude zarovnán na účaří řádku.
• absbottom - Dolní okraj obrázku bude zarovnán se spodním okrajem řádku.

Výška a šířka obrázků

align a src nejsou jedinými atributy u značky <img>. Dalšími atributy jsou width a height, které určují šířku a výšku obrázku. Je-li zadán pouze jeden z nich, prohlížeč upraví velikost druhé (nezadané) hodnoty tak, aby poměr stran zůstal stejný jako v originále. Hodnoty zadávejte buď   v bodech, nebo v procentech. Procenta se vztahují k velikosti okna prohlížeče. To znamená, že pokud například napíšeme <img src="obrazek.jpg" width="50%">, bude šířka obrázku vždy polovina otevřeného okna. Pokud tyto hodnoty nezadáte, obrázek bude mít svoji originální velikost.

Odsazení obrázků

Další atributy, které jsou k dispozici u značky <img>, jsou vspace a hspace a definují, kolik místa bude vynecháno kolem obrázku ve svislém a vodorovném směru. Posledním atributem je border, který určuje šířku rámečku kolem obrázku. Šířka se udává v bodech a 0 znamená, že obrázek bude bez rámečku.

Popis obrázků

Posledním atributem je atribut alt. Jeho prostřednictvím se zadává alternativní text, který se zobrazí na místě obrázku v případě, že z nějakých důvodů nelze obrázek načíst. Tento text se také zobrazuje jako popisek obrázku v případě najetí ukazatelem myši na obrázek.

Animované GIFy

V článku Práce s se soubory různých formátů jsme si řekli, co to je GIF, v případě nejasností doporučuji kapitolu pročíst ještě jednou.

Animovaný obrázek GIF se v kódu stránky používá stejným způsobem jako normální GIF. Animované GIFy představují nejběžňejší typ multimédiálních souborů na internetu a jsou podporovány všemi moderními prohlížeči. Jediný soubor animovaného GIFu může obsahovat řadu obrázků a přehrávat je v sekvenci podobně jako film.

Vložení animovaného GIFu viz. ukázka