7.Díl: Obrázky
26. 8. 2009
Obrázky
Web bez grafických motivů není příliš atraktivní, bílé stránky velmi často odradí návštěvníky, proto v tomto díle si něco řekneme o vkládání a manipulaci s obrázky pro náš web. Hlavním tagem pro tento díl bude: <img src="...">
Předtím než si ukážeme jak zacházet s obrázky, tak si sežeňte jakýkoliv obrázek a vytvořte si *.html soubor, třeba obrazek.html nebo klidně index.html.
7.1 Zobrazení obrázku
Řekněme, že už máme obrázek, který pojmenujeme obrazek.jpg i připravený soubor. Oba soubory dejte do stejného adresáře. Do html souboru vložte tento tag:
<img src="obrazek.jpg">
Odměnou pro nás bude toto:
Někdy je dobré mít obrázky v jednom adresáři, aby to bylo přehledné. Řekněme, že bychom měli takto umístěný obrázek:
Tag <img src="obrazek.jpg"> je pro tento případ nepoužitelný a ohlásí, že nemůže najít obrázek, proto musíme upravit náš takto:
<img src="adresar/obrazek.jpg">.
7.2 Parametry v obrázcích
Zatím jsme si ukázali jak zobrazit obrázek. Nyní si nadefinujeme několik parametru, které nám vylepší obrázek.
7.2.1 Popisek u obrázku
Určitě jste si všimli, že když najedete na obrázek a objeví se jeho popisek, jak na to? Lehce. Přidáme parametr alt="...", mezi uvozovkami napíšeme text, který chceme zobrazit po najetí myši.
<img src="obrazek.jpg" alt="Zvonek">
Výsledek:
7.2.2 Rozměry obrázku
V HTML můžeme bez problému měnit velikost obrázku, avšak musíme počítat při menším/větším rozlišení na ztrátu kvality obrázku.
Přidáme si další parametr do našeho tagu:
<img src="obrazek.jpg" width="..." height="...">
width="..." - nám určuje šířku obrázku
height="..." - nám určuje výšku obrázku
Příklad: <img src="obrazek.jpg" width="180" height="180">
Daný obrázek bude mít rozměry 180 na výšku a 180 na šířku. Míry jsou v pixelech. Rozměry můžeme libovolně měnit, takže si můžeme nastavit obrázek dle potřeb.
Zvětšený obrázek - Originál - Zmenšený obrázek
7.2.3 Okolní prostředí obrázku
Rámování
Někdy chceme mít orámovaný obrázek, takže přidáme další parametr:
<img src="obrazek.jpg" border="...">
border="..." - určuje nám tloušťku rámu od 1...6.
Příklad:
<img src="obrazek.jpg" border="2">
Mezery okolo obrázku
Podobně na tom bude i mezery okolo obrázku.
<img src="obrazek.jpg" hspace="..." vspace="..." >
hspace="..." - udává nám mezery v pixelech v horizontální rovině
vspace="..." - udává nám mezery v pixelech v vertikální rovině
Zarovnání obrázku
Příklad:
<img src="obrazek.gif" align="left" border="2">
Další parametry:
TOP - obrázek se zarovná s horní řádkou textu
MIDDLE - obrázek je vzhledem k řádce vertikálně vycentrován
BOTTOM - obrázek se zarovná s dolní řádkou textu
LEFT - obrázek je umístěn u levého okraje stránky a je obtékán textem
RIGHT - obrázek je umístěn u pravého okraje stránky a je obtékán textem
7.3 Odkaz v obrázku
Ve 4. díle jsme si již řekli jak se odkazuje za pomoci obrázku, teďka si to zopakujeme.
<a href="http://www.cheater.cz"> <img src="obrazek.jpg"> </a>
Po kliknuti na obrázek nás přesměruje ke stránkám Scorpion cheateru.
Po najetí myši pak můžeme na liště vidět kam po kliknutí obrázek přesměruje.