Obrázky v HTML

Tag IMG - Zadávání rozměrů - Popis obrázku - Obtékání a umístění - Rámeček - Zmenšeniny

Máte-li připravený obrázek, můžete ho umístit do stránky.

Tag IMG

V HTML se obrázky vkládají nepárovým tagem IMG, který má jeden povinný a mnoho nepovinných parametrů. Tím povinným je src, totiž umístění obrázku. Například
<img src="nejaky_obrazek.gif">
do stránky vloží obrázek, který se jmenuje se nejaky_obrazek.gif a je v témže adresáři jako ona stránka. Pokud bude v jiném adresáři, přidá se cesta. Dá se použít i absolutní adresa, třeba src="www.seznam.cz/logo.gif" .

Kromě src se zadávají další atributy obrázku. Např. kód

<img border="3" src="kote.gif" alt="kotě" align="right" width="60" height="60">

vloží do stránky obrázek kotěte zarovnaný doprava s popiskem kotě. O jednotlivých atributech pojednává další text.

Zadávání rozměrů

Zásadně se doporučuje zadávat rozměry obrázků jako parametry tagu img. Například
<img src="nejaky_obrazek.gif" width="60" height="100">
je lepší než
<img src="nejaky_obrazek.gif">
Po natažení oba příklady vypadají stejně, rozdíl je při natahování. Pokud se totiž u obrázku uvedou rozměry, prohlížeč pro obrázek vyhradí místo, přestože obrázek zatím není stažený. Pokud se rozměry neuvedou, místo se nevyhradí a po natažení obrázku text jakoby "poskočí", což může způsobit zmatek ve čtenářově orientaci, ale hlavně to vypadá hnusně. Největší problémy tak vznikají, pokud je obrázek v tabulce.

Zmenšování a zvětšování obrázků

Zpravidla se u obrázků zadávají skutečné rozměry v pixelech (pixel je jeden obrazovkový bod). Pokud se ale uvedou rozměry jiné, obrázek změní zobrazení. Takto se dají obrázky zmenšovat, zvětšovat a deformovat (dělá to až prohlížeč). Přesto se nic z toho v praxi příliš nepoužívá:

• Deformace je nevhodná z estetických důvodů.
• Zmenšování se nepoužívá, protože se obrázek nemusí vykreslit správně, ale hlavně se při tom zbytečně přenáší celý velký obrázek, z něhož se pak zobrazí jenom některé bity.
• Zvětšování se nepoužívá z toho důvodu, že výslednou grafiku to rozkreslí do hrubých čtverečků.

Pokud je třeba vložit obrázek jiné velikosti, doporučuji změnit rozměry natvrdo v nějakém grafickém programu.

Zadávání procent

Lze zadat šířku a výšku obrázku jako procenta ze šířky nebo výšky stránky (šířka většinou závisí na šířce okna prohlížeče). Místo počtu pixelů se prostě zadávají procenta. Při zadání obou parametrů se obrázek zdeformuje, a tak je dobré  zadávat jen jeden. Pozor, umístíte-li obrázek do buňky tabulky, procenta se počítají ze šířky a výšky této buňky! (Na závěr musím dodat, že zadávání procent u obrázku mám vyzkoušené pouze v IE 4.) 

Popis obrázku (alt)

Když se v prohlížeči přejede obrázek myší, obvykle se zobrazí světle žlutá bublina s textem. Stejný text se na místě obrázku zobrazí, dokud není obrázek natažený (nebo když má někdo vypnuté zobrazování obrázků). Tento text se dá zadat jako atribut tagu IMG, například:
<img src="runa.gif" alt="Yuhůova runa">

Někdo zadávání altu ignoruje. Potom se tam nezobrazí nic, nebo popis, který zadal automaticky editor. Takový automatický popis bývá pěkný paskvil: například ve FrontPage 98: alt="runa.gif (357 bytes)". Už jsem se setkal s lidmi, kteří si mysleli, že když se ten text změní, tak že to potom nebude fungovat. Funguje to, klidně to měňte.

Zásadní význam má alt pro alternativní média, například textové prohlížeče, indexovací roboty, zrakově postižené, hlasové výstupy. Takovým klientům poskytují zástupnou informaci o obrázku.  

V novějších prohlížečích se dá stejného efektu dosáhnout pomocí atributu title, ten také zobrazuje žlutou bublinu. Pak jde dělat bublinu i u textu. 

Obtékání a umístění

Atribut align tagu IMG umožňuje nastavit buďto obtékání obrázku textem, nebo jeho umístění na řádku. Je to poněkud nekoncepční, ale jednoduché: 

• hodnoty left a right nastavují obtékání, 
• všechny ostatní hodnoty určují umístění obrázku na řádku.

Příklad: <img src="runa.gif" align="left"> vloží do dokumentu obrázek, jehož horní okraj zarovná s dolním okrajem aktuálního řádku, levý okraj bude na levém okraji stránky a text bude obtékat.

Hodnoty pro umístění na řádku jsou align= top, textop, middle, absmiddle, baseline, bottom, absbottom, center. Jejich význam si vyzkoušejte, já tomu sám moc nerozumím, protože to považuji za nepoužitelné.

Rámeček

Atribut border vykreslí kolem obrázku rámeček. Zadává se šířka rámečku v pixelech.

<img src="obrazek.gif" border="3">

Rámeček bývá černý (barva písma), ale je-li obrázek v odkazu, tak modrý (barva odkazu).

Pokud border nezadáte, některé prohlížeče rámeček vykreslí, jiné ne.

Je-li obrázek v odkazu, prohlížeče jej obalují barevným rámečkem. Chcete-li se tomu vyhnout, zadejte border=0.

Zmenšeniny

Kdo vystavuje více obrázků (například kolekci fotografií), měl by použít klikací zmenšeniny, aby se to nestahovalo roky. Od každého obrázku je potřeba vytvořit si menší kopii (velikostně i datově), která se umístí třeba do stejné složky a vloží do stránky. Velký originál obrázku se do stránky nevkládá, ale nechá se na něj mířit odkaz:

<a href="obrazek1.jpg"><img src="obrazek1_zmensenina.jpg" width="80" height="50" alt="popis obrázku"></a>

Je dobrým zvykem dělat všechny zmenšeniny na stránce stejně vysoké nebo široké a umístit je do tabulky, aby zařezávaly. Dost často se obrázky nechávají zobrazovat v novém okně (<a target="_blank" ..>).

Předchozí: Příprava obrázku
Vizte též: zdokonalení odkazů (záměna obrázku). Pokud nezatracujete Internet Explorer, budou vás zajímat podporované grafické filtry.

O tvorbě, údržbě a zlepšování internetových stránek. Základy HTML CSS FrontPage JavaScript