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.
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ř.
kó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.
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í.
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.
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ů.)
Šíř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 obrázku se dají zadávat též pomocí kaskádových stylů vlastnostmi width a height, je to rovnocenné.
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.
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.
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.
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.
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.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.