Obrázky v HTML

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

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

Názor kocoura Ajčiho

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 zápis

<img src="nejaky_obrazek.gif">

do stránky vloží obrázek, který se jmenuje nejaky_obrazek.gif a je v témže adresáři jako ona stránka. Pokud bude v jiném adresáři (složce), přidá se adresářová cesta. Například

<img src="adresar/jiny_obrazek.gif">

Dá se použít i absolutní adresa, třeba

<img src="http://www.seznam.cz/logo.gif"> .

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

<img border="3" src="kote.gif" alt="koťátko" align="right" width="60" height="60">

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

Poznámka: pokud už teď vůbec netušíte, která bije, přečtěte si základy HTML.

Zadávání rozměrů

Doporučuji zadávat rozměry obrázků jako parametry tagu img. Například zápis

<img src="nejaky_obrazek.gif" width="60" height="100">

je lepší než zápis

<img src="nejaky_obrazek.gif">

Proč: Po natažení oba příklady vypadají stejně, rozdíl je při natahování.

Zjištění velikosti obrázku

Pokud nevíte, jak je přesně obrázek velký, dejte ho do stránky napřed bez rozměrů. Pak si stránku zobrazte v prohlížeči, naklikněte pravým tlačítkem vlastnosti obrázku a přečtěte si rozměry. Ty potom zadejte do kódu.

Ta čísla, kterými se udávají rozměry obrázků, je počet pixelů. Pixel je jeden obrazovkový bod.

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

Obrázkům ve stránkách se obvykle zadávají jejich skutečné rozměry. Pokud se 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á:

Pokud je třeba vložit obrázek jiné velikosti, doporučuji změnit rozměry natvrdo v nějakém grafickém programu. (Viz příprava obrázků.)

Zadávání procent

Šířku a výšku obrázku lze kromě pixelů zadat také jako procenta. Jako sto procent se bere šířka stránky a výška okna (šířka často také závisí na šířce okna prohlížeče). Při zadání obou parametrů se obrázek zdeformuje, a tak je dobré v případě procent zadávat rozměr jen jeden.  Umístíte-li obrázek do buňky tabulky nebo do něčeho, co má vlastní rozměr (typicky <div>), procenta se počítají ze šířky a výšky tohoto objektu, nikoliv z rozměrů okna.

Rozměry v CSS

Rozměry obrázku se dají zadávat též pomocí kaskádových stylů vlastnostmi width a height, je to rovnocenné.

Popis obrázku alt

Každý obrázek by měl v kódu obsahovat informaci o tom, co je na obrázku vidět. Tento text se dá zadat jako atribut tagu <img>, například:

<img src="runa.gif" alt="Yuhůova runa">

Tento text se na místě obrázku zobrazí, dokud není obrázek natažený (nebo když má někdo vypnuté zobrazování obrázků). V Exploreru se nad obrázkem, když se obrázek přejede myší, zobrazí světle žlutá bublina s textem (tuto funkčnost je možno přebít prázdným atributem title).

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

Někdo zadávání altu ignoruje. V příručkách se tvrdí, že se to nesmí a že je to moc špatně, ale já si myslím, že když nenapíšete alt, tak je to sice škoda, ale svět se nezboří.

Efektu žluté bubliny lze lépe dosáhnout pomocí atributu title, ten také zobrazuje bublinu. Pak jde dělat bublinu i u textu. Title má přednost, takže když má obrázek alt i title, bude v bublině title.

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é: 

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.

Aktualizováno 2004: atribut align se považuje za zastaralý. Obtékání se dělá CSS vlastností float, zarovnání na řádku CSS vlastností vertical-align.

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.

Aktualizováno 2004: atribut border se považuje za zastaralý (třebaže funguje) a doporučuje se nahradit jej CSS vlastností border.

Zrušení rámečku

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

Zmenšeniny, galerie

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" ..>).

Existují programy, které umějí takovou galerii udělat automaticky. Např. na každém cédéčku k foťáku se dodává nějaký takový soft. Já na tvorbu galerií nejraději používám Picasa, který ale neumí dělat popisky fotek s diakritikou. Mezi nejlepší programy na galerie patří Jalbum. FrontPage a podobné editory umějí také galerii udělat, ale dá to trochu více práce.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.