9. díl - Obrázky
Minule jste se naučili tvořit tabulky. Dnes se naučíme další důležitou věc, a to vkládat do stránky obrázky.
Obrázek <img>
Obrázek se vkládá pomocí značky <img>, která je nepárová a řádková. Má dvě povinné vlastnosti, a to src a alt. Do vlastnosti src se vkládá adresa (URL) obrázku, který chcete zobrazit. Do vlastnosti alt se vkládá text, který se zobrazí místo obrázku, pokud při jeho načítání nastane chyba (chybná adresa obrázku, přerušení spojení se serverem apod.). V prohlížeči Internet Explorer se tento text navíc objeví po najetí myší.
Zkuste si následující příklad:
Tento HTML kód zobrazí obrázek loga mého webu. Pokud při načítání nastane chyba, zobrazí se text Víčko.cz. Chybu si můžete nasimulovat například chybou v zadané adrese.
Rozměry obrázku
Rozměry obrázku lze zadat pomocí vlasností width (šířka) a height (výška). Pokud tyto vlasnosti nezadáte, obrázek se zobrazí ve výchozí velikosti (jak jste mohli vidět v minulém příkladu). Když hodnoty zadáte, obrázek se roztáhne (případně zmenší) do zadaných rozměrů a přitom se může deformovat. Pokud se zadá pouze jeden rozměr, druhý se dopočítá automaticky tak, aby se zachoval poměr stran - obrázek nebude deformovaný. Rozměry obrázků se mohou zadávat buď v pixelech, nebo procentech (nedoporučuji). Při zadávaní v pixelech zadáte do vlastnosti pouze číslo, které bude určovat počet pixelů. Při procentuálním zadávání do vlastnosti zapíšete číslo od 0 do 100 a za něj dáte znak procenta %.
Vyzkoušejte si následující příklad:
<p><img src="http://www.vicko.cz/img/vicko.png" alt="Víčko.cz" width="200"></p>
<p><img src="http://www.vicko.cz/img/vicko.png" alt="Víčko.cz" height="100"></p>
<p><img src="http://www.vicko.cz/img/vicko.png" alt="Víčko.cz" width="200" height="100"></p>
<p><img src="http://www.vicko.cz/img/vicko.png" alt="Víčko.cz" width="50%"></p>
Zobrazí se 5 obrázků:
- Tento obrázek bude mít výchozí velikost.
- Tento obrázek bude široký 200 pixelů, výška se dopočítá.
- Tento obrázek bude vysoký 100 pixelů, šířka se dopočítá.
- Tento obrázek bude široký 200 pixelů a vysoký 100 pixelů - zdeformuje se.
- Tento obrázek bude široký přesně jako poloviční šířka okna prohlížeče. Při změně velikosti okna prohlížeče se změní velikost obrázku.
Okraje
Když k obrázku dáte nějaký text, tak obrázek bude nalepený na textu. Toho se lze vyvarovat nastavením vlastností hspace (horizontální odsazení) a vspace (vertikální odsazení). Kolem obrázku vznikne mezera, která se bude chovat jako součást obrázku, ale ve skutečnosti jí nebude.
Pozice obrázku
Pozici obrázku můžete nastavit pomocí vlastnosti align. Může obsahovat několik hodnot, které máte popsané v následující tabulce:
| Hodnota | Popis |
| left | Obrázek nebude v řádku, ale bude umístěn vlevo a text bude kolem něj obtékat. |
| right | Stejně jako left, ale vpravo. |
| top | Obrázek je v řádku co nejvýšše. |
| texttop | Horní okraj obrázku je ve stejné výšce, jako horní okraj textu. |
| middle | Střed obrázku je na účaří textu. |
| absmiddle | Obrázek je ve středu řádku. |
| baseline | Spodní okraj obrázku je na účaří textu. |
| bottom | Spodní okraj obrázku je na spodním okraji textu. |
| absbottom | Obrázek je co nejníže. |
Pro lepší pochopení si vyzkoušejte.
Obrázek na pozadí
Obrázek na pozadí se nastavuje ve značce <body> vlastností background do které zapíšete adresu obrázku. Obrázek se bude opakovat a to jak v ose x, tak v ose y. Můžete si vyzkoušet příklad:
"Přibité" pozadí
Tímto rozumějte pozadí, které se při rolování neposunuje, ale zůstává stále na jednom místě. Toto chování lze nastavit vlastností bgproperties, když k ní dáte hodnotu fixed. Hodnota scroll je výchozí - nemusíte nastavovat.
Co nás čeká příště
Dnes jsme si ukázali, jak do stránky vkládat obrázky. Příště si ukážeme, co to jsou rámy a jak s nimi pracovat.
