Obrázky

Dnes se podíváme na vkládání obrázků. Obrázky se v HTML vkládají pomocí tagu ''<img>''. Tento tag je nepárový, což znamená, že ho nemusíme ukončovat pomocí končícího tagu, který by v tomto případě vypadal zhruba takto: ''</img>''. Ale opakuji, koncový tag se v tomto případě nepoužívá.

Následující kód vloží do stránky obrázek:

<img src="http://www.czech-soldiers.wz.cz/Obrazky/DJF_small.jpg"
border="0" alt="Obrázek" title ="Obrázek" width="100" height="150"
align="right">

Výsledek:

První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec První odstavec

Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec Druhý odstavec

A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec A už snad poslední odstavec

Nyní si rozebereme jednotlivé použité atributy:

src

Asi nejdůležitější atribut. Je ho vždy nutné použít. Říká prohlížeči, kde má hledat obrázek, který chceme vložit do stránky.

Máme obrázek obrazek.jpg uložený zde: www.webovastran­ka.cz/soubory­/images/obrazek­.jpg a naši stránku do které chceme vložit obrázek, která je uložena na adrese: www.webovastran­ka.cz/soubory­/stranka.html. Cestu k obrázku lze zadat buďto relativně: images/obrazek­.jpg nebo absolutně www.webovastran­ka.cz/soubory­/images/obrazek­.jpg.

Při použití relativní cesty začínáte v adresáři, kde je uložena webová stránka, tady by to tedy byl adresář www.webovastran­ka.cz/soubory, pokud by se váš soubor nacházel v aresáři www.webovastran­ka.cz/obrazky nezoufejte. V tomto případě by odkaz byl ve tvaru ../obrazky/obra­zek.jpg, kde znaky ../ řeknou prohlížeči, že cesta k souboru začíná již o adresář výše.

border

Jeden z atributů, který lze nahradit pomocí stylové definice. Tento atribut určuje šířku rámečku kolem obrázku v pixelech. Rámeček samozřejmě nemusí kolem obrázku být. Toho ale nedocílíte vynecháním tohoto atributu, nýbrž jeho nastavením na hodnotu 0. Pokud tento atribut vynecháte, bude použita defaultní hodnota prohlížeče, což je většinou hodnota 1.

<img src="obrazek.jpg" border="0" alt"Žádný rámeček kolem obrázku">

alt

Povinný atribut, který se zobrazí uživatelům, jejichž prohlížeč nepodporuje zobrazování obrázků (textové prohlížeče) nebo mají obrázky vypnuté.

title

Určuje popisek obrázku, který se zobrazí v bublinové nápovědě, najedete-li myší na obrázek.

width

Povinný atribut určující šířku obrázku v pixelech.

height

Povinný atribut určující výšku obrázku v pixelech.

align

Atribut určující umístění obrázku v toku textu. Má mnoho různých hodnot:

• left
• right
• top
• texttop
• middle
• absmiddle
• baseline
• bottom
• absbottom

Přičemž asi nejdůležitější jsou left a right. Ostatní většinou nepoužívám. Pro lidi nevládnoucí anglicky domlňuji, že left způsobí umístění obrázku vlevo a text ho obtéká zprava a right způsobí přesný opak (obrázek vpravo a text ho obtéká zleva).

Další atributy

Dále u obrázku lze použít ještě atributy vspace a hspace, které určují okraje obrázku (vertikální a horizontální). Já osobně sem tyto atributy nikdy nepoužil.

Atribut lowsrc v dnešních prohlížečích vesměs nefunguje, dříve byl používán pro zobrazení zmenšeniny obrázku, než se originál načte.

Atributy usemap a ismap se používají, pokud je obrázek klikací mapou, ale o tom někdy jindy.

Hodnocení tutoriálu: 2.2 (hodnotilo 58 uživatelů)