Abychom mohli své stránky zkrášlit (nebo zkazit), povíme si, jak do stránek napasovat obrázky.
Obrázky se do HTML dávají pomocí následujícícho nepárového tagu.
| Tag | Význam tagu |
|---|---|
| img | Vložení obrázku do stránky |
Podobně jako u tagu pro odkaz, i pro tag img máme důležitý atribut, který udává cestu k obrázku, jenž se má na našich stránkách objevit.
| Atribut | Význam atributu |
|---|---|
| src | Cesta k obrázku; pozor na častý překlep scr, obrázek by se nezobrazil. |
Celý zápis vypadá takto:<img src="">
Mezi uvozovky pak napíšeme cestu k obrázku, stejně jako u odkazů.
Tento zápis na zobrazení obrázku stačí, ale chybí mu další důležité atributy:
| Atribut | Význam atributu |
|---|---|
| alt | Alternativní text; tento text se zobrazí na stránce, pokud z nějakého důvodu není obrázek zobrazen. |
| width | Šířka obrázku |
| height | Výška obrázku |
Než si ukážeme názorný příklad, řekneme si několik slov k jednotlivým atributům, nejprve k atributu alt.
Atribut alt – alternativní (zástupný) text pro případ, že obrázek není zobrazen. Důvodů může být více. Pokud pomineme nějaké chyby, tak i uživatel může obrázky vypnout. Pokud je třeba na pomalejším připojení k Internetu, urychlí tím načítaní stránky; případně může pracovat s prohlížečem, který nepodporuje grafiku. Alt však má velký význam i pro zrakově postižené, kterým tento text přečte hlasová čtečka. I když tedy obrázek nevidí, mají alespoň představu, co se na obrázku nachází. Proto bychom měli alt vyplnit rozumně, ne do něj napsat pouze Obrázek.
Ukázka:<img src="" alt="Stručný popis toho, co je na obrázku">
Pokud vyplníme alt a v Internet Exploreru na obrázek najedeme myší, zobrazí se nám znění altu v bublině. Je to však nestandardní chování, jelikož to má dělat atribut title. Viz níže.
Jak jste si již určitě všimli, atribut se zadávají tak, že napíšeme název atributu potom rovnítko a uvozovky. Mezi uvozovky pak napíšeme hodnotu atributu.
Atributy width a height nejsou výjimkou.
Atributy width a height určují jakou velikost na stránce bude zobrazovaný obrázek mít. Hodnota je v pixelech nebo v procentech. Pokud chceme hodnotu v pixelech, napíšeme číslo bez jednotky. Procenta se pak vypočítávají z velikosti okna prohlížeče (nadřazeného prvku) – velikost je tedy relativní. Pokud tedy zadáte velikost v procentech, zkuste si potom měnit velikost okna prohlížeče. Zadání velikosti v pixelech je přesné.
Obrázek se nastaví tak velký, jakou hodnotu zadáme. Budeme však zadávat takové hodnoty, jaké jsou skutečné rozměry obrázků. Pokud je obrázek moc velký, zmenšíme ho v nějakém grafickém editoru. Kdybychom ho totiž zmenšili pomocí atributů width a height, musel by se obrázek stejně celý přenést, změnšil by ho až prohlížeč. Navíc kvalita zmenšeného obrázku pomocí HTML není tak vysoká, jako když ho zmenšíme v nějakém grafickém editoru. Zmenšování obrázku pomocí HTML je prostě čunačina.
Atributy width a height jsou nepovinné, ale je lepší je zadat (obzvláště, pokud je na stránce obrázků více). Pokud se totiž obrázek ještě nenačetl, prohlížeč alespoň pro něj už vyhradí předem stanovené místo a stránka při načítaní obrázku neposkakuje – stránka se rychleji načítá. Neví-li však prohlížeč, jak bude obrázek velký, nacpe na jeho místo třeba text a jak se obrázek načítá, text odsunuje, aby se obrázek vešel, a to je to poskakování.
Takto vypadá nezobrazený obrázek s přednastavenou velikostí 160 × 160 px, pokud však používáte webový prohlížeč Firefox, vidíte pouze alt (alespoň verze 3.0.5 to dělá).
A co když velikost obrázku předem neznáme? Možností, jak to zjistit, je víc. Například ho můžeme otevřít v prohlížeči, kliknout na něj pravým tlačítkem myši a dát Vlastnosti.
Jak již bylo naznačeno výše, Firefox, pokud není obrázek načten, nastavené rozměry nebere v potaz, přizpůsobí se velikosti altu.
Někdy však je velikost obrázku malá a popis v atributu alt dlouhý. Pokud se obrázek nezobrazí, alt může být oříznut. V tomto případě je lepší šířku a výšku nezadávat, obrázek je totiž malý, a k nějakému nepříjemnému poskakování zřejmě nedojde; aneb ať zvítězí zdravý rozum.
Atribut alt se však dá ještě zjistit tak, že na obrázek, nebo na plochu, kde má obrázek být, klikneme pravým tlačítkém a vybereme Vlastnosti.
Pokud obrázek nenese informační hodnotu, ale pouze má dekorační charakter, atribut alt uvedeme, ale necháme ho prázdný; případně takový obrázek do stránky vkládáme pomocí CSS.
Uvedeme si ještě jeden atribut, a to
| Atribut | Význam atributu |
|---|---|
| title | Doplňující informace; objeví se po najetí na element v bublině. I v IE, kde v bublině přetluče alt. Atribut alt by jinak v bublině neměl být vůbec vidět. Jedná se totiž o alternativní text k obrázku, nikoli o doplňkovou informaci. Atribut title však nemusí být pouze u obrázků. Největší využítí najde u odkazů. |
Máme tedy atribut title u obrázků používat? Pokud není obrázek odkaz, není to nutné. Ono většinou do něj není co psát. Někteří lidé si však myslí, že když uvedou title, kde to jen jde, vylepší to pozici jejich stránek ve vyhledávačích. Možná jo, moc se v tom nevyznám, ale nevěřím tomu.
Obrázek jak má být
Nejvyšší čas vytvořit si stránku stránku s obrázkem.
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“ „http://www.w3.org/TR/html4/strict.dtd“>
<html lang=“cs“>
<head>
<meta http-equiv=“content-type“ content=“text/html; charset=utf-8″>
<title>Tropický motýl</title>
<meta name=“description“ content=“Foto tropického motýla z výstavy motýlů v Praze“>
<meta name=“robots“ content=“all,follow“>
</head>
<body>
<h1>Stránka s obrázkem motýla</h1>
<img src=“obrazky/tropicky-motyl.jpg“ width=“476″ height=“360″ alt=“Tropický motýl“>
</body>
</html>
Koukneme se na tu krásu v prohlížeči.
(Ve verzi HTML, kterou používáme v této šabloně (určuje ji první řádek), by neměl být tag img vložen přímo mezi body, ale měl by být ještě něčím „obalen“, prozatím se tím ale nemusíme trápit.)
Obrázek jako odkaz
I obrázek může být odkazem. To však pro nás už není nic těžkého. Zde pouze nástin:<a href=""><img src="" width="" height="" alt="" title=""></a>
Pokud bude obrázkem třeba opět motýl, můžeme do title například napsat: Kliknutím se dostanete na informace o motýlovi.
