Tag | Význam | Párový | Výskyt |
---|---|---|---|
img | obrázek | ne | |
map | klikací mapa | ano | |
area | oblast v klikací mapě | ne | <map> |
Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného souboru. Tag <img> má kromě obecných atributů spoustu dalších:
Atribut | Význam | Hodnoty | Nahraďte CSS stylem |
---|---|---|---|
src | umístění souboru s obrázkem | URL | |
alt | alternativní popis | libovolný text | |
lowsrc | náhradní obrázek pro malé displeje | URL | |
width | šířka | délka nebo procento | width |
height | výška | délka nebo procento | height |
border | tloušťka rámečku | délka | border |
vspace | vertikální okraj | délka | margin |
hspace | horizontální okraj | délka | |
align | zarovnání obrázku | left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom |
float (left, right) vertical-align (ostatní hodnoty) |
usemap | použití klikací mapy | "#" + jméno mapy, nebo URL | |
ismap | přidání souřadnic kliknutí | bez hodnoty | |
longdesc | dlouhý popisek | text nebo URL |
Zdoj obrázku, prostě cesta k tomu souboru (angl. source = zdroj). Cesta k obrázku se udává jako klasické URL absolutně nebo relativně. Přípustné jsou soubory typu *.gif, *.jpg, v novějších prohlížečích také *.png a v Internet Exploreru *.bmp. (Jiné typy souborů se musejí vkládat jako objekty pomocí doplňku prohlížeče). Pokud soubor obrázku nebude nalezen, zobrazí se ve stránce zástupný symbol nenalezeného obrázku (nejčastěji červený křížek) se zástupným textem.
Příklad vložení obrázku strom.gif, který se nachází ve stejném adresáři (relativní cesta):
<img src="strom.gif" alt="strom">
Příklad vložení obrázku absolutní cestou:
<img src="http://www.jakpsatweb.cz/images/jakpw.gif" alt="Jak
psát web">
Pokud je src zadané špatně, objeví se místo obrázku červený křížek. (Jak řešit nefunkční obrázky.)
V nových prohlížečích (v IE až od verze 8) lze obrázek zapsat také přímo do HTML nebo CSS souboru pomocí schématu data:. Já sám to nepoužívám -- zajímá-li vás to, hledejte "data URI".
Zástupný text (alternative text). Zobrazuje se ve stránce v oblasti nenačteného obrázku.
Spousta lidí prochází web s vypnutými obrázky (třeba já kvůli slabému připojení), mnoho uživatelů webu je slabozrakých, slepci si nechávají stránky předčítat čtečkami nebo převádět do braila. Pro všechny tyto uživatele jsou obrázky neviditelné. Oni vědí, že na stránce je obrázek, ale nevědí, co na něm je. A proto (a nejen proto) se tam píše alt.
Příklad zástupného textu "strom":
<img src="strom.gif" alt="strom">
Dříve platilo, že se atribut alt zobrazoval ve žluté bublině při přejetí myší. (Tak zvaný tooltip.) Chcete-li udělat takovou žlutou bublinu, nepoužívejte na to alt (jak dodnes stojí v mnoha návodech), ale atribut title.
Zástupný obrázek pro malé displeje. Nikdy jsem neviděl použití. V mnoha návodech se uvádí, že se tento obrázek načítá před načtením vlastního src. To ale platí pouze pro starý Netscape, který už nikdo nepoužívá. Osobně doporučuji lowsrc nepoužívat.
Šířka (width) a výška (height) obrázku. Udává se v pixelech (normální číslo) nebo procentech. Pokud rozměry nejsou uvedeny, zobrazí se obrázek ve své normální velikosti. V praxi se doporučuje výšku a šířku u obrázku zadávat i v případě, že obrázek bude přirozeně veliký. To kvůli rychlejšímu a lepšímu načítání stránky.
Pokud se zadají jiné rozměry, než má obrázek ve skutečnosti, pak se ve výsledku obrázek zvětší, zmenší nebo zdeformuje. V případě, že je uveden jenom jeden rozměr (šířka nebo výška), upraví se druhý rozměr tak, aby obrázek zachovával proporce (takže může být jinak velký, ale nebude deformovaný).
Pozor na častou chybu přehazování písmenek t a h. Widht je špatně, správně je width. Heigth je špatně, správně je height.
Příklad: mám obrázek strom.gif o šířce 50 a výšce 100 pixelů. Nejlépe je zadat jej takto:
<img src="strom.gif" width="50" height="100" alt="strom">
V případě, že rozměry nezadám, obrázek se nakonec načte stejně velký. Jenomže při načítání si nevyhradí místo a způsobí, že dokument po načtení obrázku poskočí:
<img src="strom.gif" alt="strom">
Zadají-li se jiné rozměry, obrázek bude deformován, ale rozměry v dokumentu dodrží:
<img src="strom.gif" width="70" height="70" alt="deformovaný
strom">
V případě, že zadáte do width nebo height nulové hodnoty, Internet Explorer stejně vykreslí 1px velký obrázek. Chcete-li obrázek nulové velikosti, zadejte mu rozměry pomocí CSS stylů width a height.
Tloušťka rámečku. Lze zadat nula, pak nebude obrázek orámečkovaný. Různé prohlížeče se liší v tom, zda zobrazují rámeček u obrázku, u kterého border nebyl zadán. Proto komu záleží na přesném vzhledu, měl by border vždy zadávat. Poslední dobou se ale doporučuje rámeček spíše zadávat css stylem border.
Příklad nejčastějšího použití: je-li obrázek v odkazu, přirozeně se kolem něj tvoří barevný rámeček:
<a href="stranka.html"><img src="strom.gif"
alt="strom"></a>
Nejprostším řešením je zadat obrázku nulový okraj border="0":
<a href="stranka.html"><img src="strom.gif" alt="strom"
border="0"></a>
V moderní praxi se tento postup už doporučuje nahradit spíše globálním stylem:
<style>
a img {border-width: 0px;}
</style>
Další údaje o odkazech v HTML.
Vertikální a horizontální okraje, prostě prázdné místo okolo. Zadává se v pixelech (tedy bez hodnoty a znamená to pixely), nebo v procentech. Procenta se počítají z rozměru obrázku. V praxi se zastaralé atributy vspace a hspace nahrazují CSS stylem margin.
Zarovnání obrázku s okolím.
align= | Význam | Nahraďte CSS zápisem | |
---|---|---|---|
Obtékání obrázku | left | Obrázek je umístěn k levému okraji a obtékán zprava. | float: left; |
right | Obrázek je umístěn k pravému okraji a obtékán zleva. | float: right; | |
Vertikální umístění obrázku na řádku | top | Vršek obrázku je zarovnán s nejvyšším bodem libovolného objektu řádku. | vertical-align: top; |
texttop | Vršek obrázku je zarovnán s nejvyšším bodem textu (většinou je to totéž, co top). | vertical-align: text-top | |
middle | Střed obrázku je zarovnán s účařím písma řádku. | - | |
absmiddle | Střed obrázku je zarovnán se středem řádku. | vertical-align: middle; | |
baseline | Spodek obrázku je zarovnán na účaří. | vertical-align: text-bottom; | |
bottom | Spodek obrázku je zarovnán na spodek písma | - | |
absbottom | Spodek obrázku bude zarovnán na nejnižší místo řádku. | vertical-align: bottom; |
Osobně považuji sedm hodnot pro umístění na řádku za zbytečnost a nepoužívám je. Má to smysl pouze u malých obrázkových matematických vzorců. Velký obrázek se v praxi většinou nechává obtékat nebo umisťuje do samostatného odstavce.
Obtékané obrázky se vertikálně nacházejí pod řádkou, v níž jsou uvedeny (to je trochu nešikovné, ale logické). Jedinou výjimkou je, kdy obtékaným obrázkem řádka začíná - pak je vrchol obrázku v úrovni vrcholu řádky.
Atribut align se dá nahradit css stylem float (pro hodnoty obtékání right a left) a css stylem vertical-align (pro umístění na řádku).
Chcete-li obrázek umístit na střed, přes atribut align to nejde. Obalte obrázek nějakým blokovým prvkem (třeba tagem <div>) a zarovnání na střed zadejte tomuto obalovacímu prvku.
Všechny atributy kromě src, alt a usemap se dají nahradit CSS deklarací pomocí obecného atributu style.
Příklad: Následující dva obrázky se zobrazí stejně:
<img src="strom.gif" alt="strom" width="88" height="31"
border="2" hspace="10" align="right">
<img src="strom.gif" alt="strom" style="width: 88px; height:
31px; border: 2px solid; margin-left: 10px; margin-right: 10px; float:
right">
Přítomnost tohoto atributu dělá z obrázku klikací mapu. Hodnotou atributu je křížek # plus jméno mapy. Mapa je element vyznačený tagem <map> obsahující definici aktivních oblastí. Popis mapy je umístěn v tomtéž HTML dokumentu. Jméno mapy je určeno atributem name u tagu <map> . Příklad viz u popisu tagu <map>.
Pokud je obrázek v odkazu, při kliknutí se za adresu připojí otazník a souřadnice kliknutí oddělené čárkou. Umějí to zpracovávat některé serverové skripty. Atribut ismap je považován za zastaralý a v praxi se nepoužívá.
Dlouhý popisek se používá málo, protože na to autoři stránek kašlou, a tak na to kašlou i prohlížeče. Do tagu <img> se dá dát kromě atrubutu alt, který má obsahovat popisek obrázku, také atribut longdesc, který odkazuje na jiné URL, na kterém je obrázek popsán. Podporuje to Opera a některá rozšíření jiných prohlížečů (zobrazují možnost přechodu na to jiné URL v kontextovém menu).
Přidá-li se od html tagu <img> atribut galleryimg s hodnotou false (tedy <img ... galleryimg="false"), prohlížeč Internet Explorer nebude po přejetí obrázku myší zobrazovat takové ty tři hnusné ikonky (uložit vytisknout a ještě něco). Na Firefox ani jiné prohlížeče to vliv nemá.
Dalším nestandardním atributem je dynsrc. Pokud se v tagu <img> místo atributu src uvede tag dynsrc, jde o video. Jde pravděpodobně o velmi nestandardní rozšíření Internet Exploreru, většinou nefunguje.
Atribut | Význam | Hodnoty |
---|---|---|
dynsrc | adresa videa | URL |
loop | počet přehrávání | číslo nebo "infinite" |
loopdelay | prodleva mezi přehráváními | čas v milisekundách |
start | kdy se má začít přehrávat | "mouseover" -- při přejetí myši, jinak po natažení stránky |
controls | zobrazení ovládání | atribut bez hodnoty (Netscape nepodporuje) |
Prohlížeče podporují takové video formáty, na které mají v operačním systému kodeky. Trochu lepší podporu videa lze dosáhnout pomocí objektů.
Klikací mapa obrázku. V dokumentu se tento element nijak nezobrazuje, pouze způsobuje, že obrázek bude ně některých místech klikat jako odkaz. Mapa obsahuje popis aktivních oblastí, které jsou reprezentovány tagy <area>. Pomocí jména -- atributu name -- je mapa spojena s obrázkem (atribut usemap u <img>). Name může být libovolný název. Jedna mapa může být teoreticky přiřazena k více obrázkům, nenapadá mě ale situace, kdy je to užitečné.
Klikatelné oblasti jsou uvnitř mapy definovány pomocí tagů <area>.
Příklad:
<map name="ctverecky">
<area href="prvni.htm" shape="rect" coords="80, 80, 130, 130">
<area href="druha.htm" shape="rect" coords="20, 20, 50, 50">
</map>
<img src="obrazek.gif" usemap="#ctverecky"
width="150" height="150">
Aktivní oblast v mapě. Nepárový tag. Nezobrazuje se. Může se vyskytovat pouze v elementu <map>. Area vymezuje oblast obrázku, na kterou se dá kliknout jako na odkaz. V jednom elementu <map> může být neomezeně elemetů <area>, každá pro jednu aktivní oblast.
Atribut | Význam | Hodnoty |
---|---|---|
href | cíl odkazu | URL |
target | cílový rám | jméno rámu |
shape | tvar oblasti | rect, circle, polygon |
coords | souřadnice oblasti | čísla oddělená čárkami |
nohref | oblast není odkazem | bez hodnot |
alt | alternativní text | libovolný text |
Atributy href a target jsou stejné jako u odkazů. Z obecných atributů vypichuji atribut title, který v novějších prohlížečích zobrazuje u myši nad oblastí bublinu s textem. Atribut alt takto nefunguje, ten má význam pouze pro negrafické klienty.
Atrribut shape určuje tvar oblasti, podle toho se potom mění význam hodnot atributu coords. Ten obsahuje souřadnice v pixelech, přičemž počátek souřadnic je levý horní roh mapy (tedy obrázku) a y roste směrem dolů.
shape= | Význam | zadává se | coords="" |
---|---|---|---|
rect | obdélník | levý horní roh, pravý dolní roh | lh-x, lh-y, pd-x, pd-y |
circle | kruh | střed, poloměr | střed-x, střed-y, poloměr |
polygon | mnohoúhelník | souřadnice každého vrcholu za sebou | vrchol1-x, vrchol1-y, vrchol2-x, vrchol2-y, atd. |
Jsou možné i alternativní hodnoty circ, poly a rectangle se stejnou funkcí. Pokud se dvě oblasti překrývají, je ta pozdější jakoby vespod (dlouho jsem zde měl chybnou informaci, že je navrchu). Jinak řečeno v překrývaných kouscích vyhrává ta area, která je první.
Atribut nohref byl vymyšlen pro tvorbu tvarů, které nikam neklikají. To používá např. pro tvorbu klikacích mezikruží, kdy větší circle někam kliká. Uvnitř většího kruhu je menší (v kódu uvedený jako první) s atributem nohref.
HTML zápis klikacích map je poněkud složitý. Naštěstí některé HTML editory zvládají jejich zápis tak, že autorovi pouze stačí šoupat myší (FrontPage, Web Expression).
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.