| Výuka > Tvorba WWW stránek > Obrázky |

Obrázky

Obrázek je objekt, kterým se upravuje grafická stránka celé WWW stránky. Do HTML se vkládá nepárovou značkou <img>, která má jeden povinný parametr src=" ". Pro správný zápis cest k obrázkům (stejně tak i k hypertextovým odkazům, o nichž bude psáno dále) se používá relativních zápisů. Pro lepší pochopení takového zápisu se podívejte na pravidlo potápěče. Tímto parametrem předáte prohlížeči URI adresu obrázku.

Syntaxe značky pro vložení obrázku je následující:

<img src="URI_obrázku" alt="alternativní text"
     width="šířka_obrázku" height="výška_obrázku"
     border="počet_bodů" align="zarovnání"
     hspace="počet_bodů" vspace="počet_bodů">

Parametry width=" " a height=" " definují šířku a výšku prostoru, do kterého bude obrázek zobrazen. Striktní HTML 4.01 tyto dva parametry považuje za povinné, ovšem nejen proto je vhodné je používat. Značně se tím zrychlí načítání celé WWW stránky. Pokud totiž tyto dva parametry nejsou u obrázku definovány, do prohlížeče je načítán text a v místě, kde má být obrázek se vytvoří tzv. zástupný symbol za tento obrázek. Pokračuje načítání zbylého textu a až je načten začnou se načítat obrázky. V tom okamžiku si musí prohlížeč nejprve zjistit fyzické rozměry pro obrázek, pak mu vyčlení prostor (čímž se celý text začne posouvat a to není zrovna příjemné, neboť to ruší při čtení) a až nakonec dojde k postupnému zobrazování obrázku.

V případě, že tyto dva parametry jsou v definici obrázku uvedeny, prohlížeč při načítání stránky zobrazí text, narazí na definici obrázku a ihned vyčlení prostor pro vložení obrázku, pokračuje dále v zobrazování textu a pak je již na řadě zobrazování obrázku. Prohlížeč již nemusí zjišťovat fyzické rozměry obrázku, což zabere nějaký ten čas.

Pokud zadáte rozměry větší nebo menší než jsou skutečné rozměry obrázku, prohlížeč si takovýto prostor vyčlení a do něj rozprostře obrázek. Na Vás to pak může působit tak, že se obrázek zvětší nebo zmenší. Je to ovšem klamný pocit. Obrázek má stále svoji velikost (i kapacitu). U začátečníků se proto můžete často setkat s tím, že obrázek "zmenší" prostřednictvím těchto dvou parametrů, ovšem obrázek má ve skutečnosti obrovské rozměry. Do prohlížeče se beztak musí načíst celý obrázek (např. 400 kB).

Výhodnější tedy je obrázek fyzicky zmenšit (jeho rozměry a zároveň i jeho kapacitu - obvykle se pro fotografie umístěné do textu používají obrázky do 40 kB) a vkládat již takto modifikovaný obrázek.

Ještě se můžete setkat s jedním trikem, kdy opravdu velký obrázek rozřežete na menší dílky, které umístíte do tabulky (o tabulkách bude psáno dále). Tabulka pak poskládá jednotlivé kousky tak, že opět vytvoří původní (velký) obrázek. Zobrazování bude trvat opět rychleji.

Parametrem border=" " nastavíte kolem obrázku černý rámeček, který bude mít takovou šířku v bodech, kterou zadáte. S výhodou se nastavuje tato šířka na nulovou hodnotu tehdy, pokud má obrázek sloužit např. jako obrázkový hypertextový odkaz.

Parametry hspace=" " a vspace=" " vytvoří v horizontálním a vertikálním směru kolem obrázku oblast s barvou pozadí od které se začne vypisovat text (vzdálenost textu od obrázku).

Parametrem align=" " definujete zarovnání textu a obrázku na stránce. Tento parametr může mít několik hodnot, které jsou shrnuty v následující tabulce i s ukázkami.

parametr s hodnotou ukázka
align="left" Obrázek

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam augue. Maecenas pharetra ultrices tellus. Maecenas rhoncus elementum sapien. Nunc pretium, odio quis vestibulum pretium, augue mauris iaculis lectus, a placerat nibh ipsum at est. Donec venenatis mi. Vestibulum congue convallis.

align="right" Obrázek

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam augue. Maecenas pharetra ultrices tellus. Maecenas rhoncus elementum sapien. Nunc pretium, odio quis vestibulum pretium, augue mauris iaculis lectus, a placerat nibh ipsum at est. Donec venenatis mi. Vestibulum congue convallis.

align="top" Obrázek Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam augue. Maecenas pharetra ultrices tellus. Maecenas rhoncus elementum sapien. Nunc pretium, odio quis vestibulum.
align="middle" Obrázek Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam augue. Maecenas pharetra ultrices tellus. Maecenas rhoncus elementum sapien. Nunc pretium, odio quis vestibulum.
align="bottom" Obrázek Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam augue. Maecenas pharetra ultrices tellus. Maecenas rhoncus elementum sapien. Nunc pretium, odio quis vestibulum.

Při použití hodnot top, middle a bottom nesmí za definicí obrázku následovat odstavec nebo nadpis! V XHTML již parametr align=" " není podporován.

30.08.2007, 19:37 vytvořil Administrator