HTML pro začátečníky 3 - Obrázky

Zdroj: SOOM.cz [ISSN 1804-7270]
Autor: Tomigun
Datum: 14.4.2004
Hodnocení/Hlasovalo: 1.78/9

V této lekci si ukážeme vkládání a použití prvků, bez kterých se dnes žádná webová stránka neobejde, tedy obrázků. Teoretické informace o obrázcích jsou nad rámec tohoto článku, zmíním se jen krátce o jejich formátech...

V této lekci si ukážeme vkládání a použití prvků, bez kterých se dnes žádná webová stránka neobejde, tedy obrázků. Teoretické informace o obrázcích jsou nad rámec tohoto článku, zmíním se jen krátce o jejich formátech. Aby obrázky měly co nejmenší velikost a stránka se tak načetla co nejrychleji, používají se na internetových stránkách komprimované formáty, nejčastěji JPG a GIF. Zatímco JPG zobrazuje všechny barvy, avšak používá tzv. ztrátovou kompresi, formát GIF komprimuje bez ztráty dat, ale pouze 256 barev (při více barvách se tyto nahradí za jim nejbližší), a navíc může být průhledný či animovaný.

Vkládání obrázků

Obrázek se na stránku umisťuje nepárovou značkou <img>. Základní syntaxe je

<img src="obrázek">

přičemž hodnota parametru src je cesta k obrázku zadaná buď relativně nebo jako URL. Příklad:

<img src="obr.gif">

<img src="http://www.stranka.cz/obr.gif">

Zarovnání obrázku a textu

Základní zarovnání zajišťuje parametr align. Jeho hodnoty jsou:

• LEFT - Obrázek je umístěn zcela vlevo, text ho obtéká zprava.
• RIGHT - Obrázek je umístěn zcela vpravo, text ho obtéká zleva.
• TEXTTOP - Zarovná horní okraj obrázku s nejvyšším písmenem v řádku, u něhož je umístěn.
• TOP - Zarovná horní okraj obrázku s nejvyšším prvkem v řádku, u něhož je umístěn.
• MIDDLE - Zarovná linku, na níž je posazen text, na střed obrázku.
• ABSMIDDLE - Zarovná prostředek řádku na střed obrázku.
• BOTTOM - Zarovná spodní okraj obrázku s linkou textu
• ABSBOTTOM - Zarovná spodní okraj obrázku s nejspodnějším písmenem v textu.

Standardně je v prohlížeči nastaveno zarovnání BOTTOM, v praxi se používá nejčastěji LEFT nebo RIGHT.
Obrázek lze vycentrovat, bez použití parametru ALIGN, pomocí značky <center>, která má vliv na všechno, co je uvnitř ní umístěno. Příklad:

<center>
 <p>Značka CENTER má vliv na text i na obrázek</p>
 <img src="obr.gif">
</center>

Různé použití zarovnání si snadno můžete vyzkoušet sami.

Velikost obrázků

Pokud chcete obrázek zobrazit v jiné než skutečné velikosti, použijete ve značce IMG tyto parametry:

width="šířka v bodech"
height="výška v bodech"

Příklad:

<img src="obr.gif" width="50" height="100">

zobrazí obrázek o velikosti 50 × 100 bodů bez ohledu na jeho skutečné rozlišení. Výhodnější je proto zadávat pouze jeden z parametrů, druhý prohlížeč dopočítá ve správném poměru stran.

Další parametry obrázků

Parametr alt přiřadí obrázku popisku, která je využita v těchto případech:

• zobrazí se nad obrázkem ve formě bublinky, když na něj najedete myší
• zobrazí se na místě obrázku, pokud není načten

Použití:

<img src="obr.gif" alt="Toto je popiska obrázku">

Parametr border definuje v bodech šířku rámečku obrázku. Rámeček je černý, výjimku tvoří případ, kdy je obrázek odkazem. Implicitní nastavení je border="0".

Následující dva parametry, které uvedu, definují volný prostor mezi obrázkem a dalšími prvky, což přispěje ke zlepšení vzhledu vaší stránky.

• hspace="n" - nastaví velikost volného prostoru v bodech na levé a pravé straně
• vspace="n" - nastaví velikost volného prostoru v bodech nad a pod obrázkem

Použití:

<img src="obr.gif" align="left" hspace="20">
Obrázek má nastaven volný prostor ze stran o velikosti 20 bodů, což odsadí nejen text po straně, ale i obrázek samotný od okraje.

<img src="obr.gif" align="left" hspace="30" vspace="30">
Obrázek má nastaven okolo sebe volný prostor o velikosti 30 bodů.

Obrázky na pozadí stránky

Obrázek, který bude použit jako pozadí, se definuje ve značce BODY parametrem background="obrázek". Cesta se zadává podobně jako při vkládání obrázku značkou IMG. Pokud je obrázek menší než okno prohlížeče, bude naskládán vedle sebe, pokud je větší, bude patřičně ořezán.

Zajímavého efektu, kdy se obrázek na pozadí vzhledem k rolujícímu obsahu stránky nehýbe, docílíme použitím parametru bgproperties="fixed" ve značce BODY.

Tolik k základní práci s obrázky, v příští lekci se podíváme na odkazy.

Tomigun