V této kapitole se naučíte, jak pracovat s obrázky. Prezentace informací v podobě obrázků je mnohdy nutná (grafy, zboží, fotografie, ...), někdy velmi vhodná (člověk si mnohem lépe pamatuje, co viděl, než četl).
Důležité je mít uložený obrázek ve správném formátu (GIF, JPEG, PNG). Obrázek je také nutné umístit tak, abyste mohli na něj odkázat relativním odkazem.
Ke vožení obrázku slouží tag <IMG>. Soubor s obrázkem zadáte pomocí atributu SRC, který slouží k zadání URL obrázku (obrázek může být uložen i na jiném serveru). Pokud byste chtěli vložit například obrázek kávy, udělali byste to takto:
<P><IMG SRC="kafe.gif"></P>
Pozn: Aby byl dokument dobře zformátován, zařadil jsem obrázek do samostatného odstavce.
Protože někteří uživatelé vypínají obrázky (aby se stránky načítaly rychleji), je vhodné pomocí atributu ALT zařadit popisek obrázku (obrázek se může načítat delší dobu a popisek tak vlastně informuje, co se načte). Zobrazení obrázku s kávou, bychom pak zapsali:
<P><IMG SRC="kafe.gif" ALT="Obrázek voňavé kávy"></P>
Obrázek také můžete použít jako odkaz na další stránku (soubor). Aby se tak stalo, stačí jako text odkazu uvést obrázek:
<A HREF="www.programator.cz"><IMG SRC="prog.gif" ALT="Navštivte stránky zajímavého projektu."></A>
Způsob zarovnání obrázku a okolního textu určuje atribut ALIGN, který vkládáme do tagu <IMG> následovně :
<IMG SRC="obrazek.gif" ALIGN="top/middle/bottom/left/right" ALT="text">
Atribut ALIGN může nabývat pěti hodnot:
TOP - zarovnává se s řádkou horní okraj obrázku MIDDLE - obrázek je vzhledem k řádce vertikálně vycentrován BOTTOM - zarovnává se s řádkou spodní okraj obrázku LEFT/RIGHT - obrázek je umístěn u levého nebo pravého okraje stránky a obtékán
<IMG SRC="obrazek.gif" WIDTH="x" HEIGHT="y">
Toto jsou důležité atributy, které využívejte při každém vložení obrázku na stránky. Atributy WIDTH a HEIGHT určují velikost obrázku v pixelech. Říkají prohlížeči, jak je obrázek velký, takže nedochází k deformaci a reformátování layoutu při načítání. Než obrázek na stránky vložíte, zjistěte si v nějakém grafickém editoru, jaké má přesné rozměry. Tyto atributy můžeme také používat ke zvětšování a zmenšování obrázků. Pokud zadáme větší rozměry obrázku, obrázek se sice zvětší, ale jeho kvalita je vůči jeho původní velikosti horší. Proto přenechejte zvětšování a zmenšování obrázků grafickým editorům.
Pomocí atributů HSPACE a VSPACE můžete zadat, kolik pixelů má být text odsazen od okolního textu.
HSPACE - velikost volného prostoru vpravo a vlevo VSPACE - velikost volného prostoru pod a nad obrázkem
Pokud do stránky vložíte obrázek tak, aby byl zprava obtékán textem, je vhodné zároveň u obrázku nastavit hodnotu HSPACE na 5-10, jinak bude text okolo obrázku vypsán příliš těsně.