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
<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
(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 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="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.
Poznámka: pokud teď vůbec netušíte, která bije, přečtěte si základy HTML.
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.
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, klikněte pravým tlačítkem vlastnosti obrázku a přečtěte si rozměry. Ty potom zadejte do kódu.
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á:
Pokud je třeba vložit obrázek jiné velikosti, doporučuji změnit rozměry natvrdo v nějakém grafickém programu.
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!
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. 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">
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í alty zástupnou informaci o obrázku.
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: 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.
Efektu bubliny lze dosáhnout pomocí atributu title
, ten také
zobrazuje žlutou 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é to umějí udělat automaticky. Myslím, že se to jmenuje Ulead, taky to umí FrontPage 2002 a určitě spousta jiných programů. Např. na každém cédéčku k foťáku se dodává nějaký takový soft.
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 13. února 2005.