13. listopadu 2011 10:41

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:

<img src="http://www.vicko.cz/img/vicko.png" alt="Víčko.cz">

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"></p>
<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ů:

  1. Tento obrázek bude mít výchozí velikost.
  2. Tento obrázek bude široký 200 pixelů, výška se dopočítá.
  3. Tento obrázek bude vysoký 100 pixelů, šířka se dopočítá.
  4. Tento obrázek bude široký 200 pixelů a vysoký 100 pixelů - zdeformuje se.
  5. 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:

<body background="http://blogeri.vicko.cz/images/pozadi.jpg">
"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.

Hodnocení

Celkové hodnocení
9 hlasů
Vaše hodnocení
Vyberte počet hvězdiček

Komentáře

Jméno:
Předmět:
Komentář:
  :):-|:P:D;):(8)[evil][arrow][idea][?][!]
Kontrola:

21.11.2011 20:56:35 :D

Skvělej seriál,těšim se na další díly...:P

Thomm97
1
0
© 2011 - 2017 SuperMartas a Tomáš Hypeš