6. lekce 2. část - vložení obrázku na stránku
Takže bychom si měli umět připravit obrázky, které chceme na stránce použít a znovu připomínám - šetřete na objemu dat, mnoho obrázků ve velké kvalitě = nenavštěvovaná stránka, protože se pomalu načítá! Pro vložení obrázku na stránku je potřeba další tag:
Obrázek se na stránku vloží nepárovým tagem (do html)
<img src > jehož jedním parametrem je název obrázku (opět případně s cestou - viz později, zatím mějme všechny soubory v jedné složce), například:
<img src = "foto.jpg" >
Pozor na správný název i příponu, často se v nich chybuje, potom se místo obrázku zobrazí jen křížek! Pokud název obsahuje například mezeru, je nutné uzavřít jej do uvozovek (jinak povinné nejsou, ale kdo bude chtít pokračovat v XHTML používejte je všude):
<img src = "foto z hor.jpg" >
Pomocí parametrů width, height lze určit rozměry obrázku pro zobrazení na stránce, pokud je určený jen jeden z nich, prohlížeč druhý sám dopočítá tak, aby byl zachovaný poměr stran. Ale pozor! Tyto parametry mění jen "lupu" pohledu, nemění skutečné rozměry obrázku! Obrázek se načítá ve skutečné velikosti, zmenšení pomocí těchto parametrů načítání obrázku neurychlí (spíše naopak, prohlížeč musí načíst skutečný obrázek a ještě jej "přepočítat" na uvedenou velikost):
<img src = "foto.jpg" width=200 >
Další parametr, který je vhodné uvádět je alt - obsahuje text, který se zobrazí, pokud nejdojde k zobrazení obrázku, ve čtecích zařízeních a podobně:
<img src = "foto.jpg" width=200 alt="Foto Sněžky">
Poslední parametr, který ještě přidáme, je align - slouží k zarovnání obrázku na levý nebo pravý okraj stránky, text potom "teče" vedle obrázku:
<img src = "foto.jpg" width=200 alt="Foto Sněžky" align=right>
Parametr align může mít hodnoty right a left, ale také top, middle, bottom - méně používané hodnoty pro speciální zarovnání textu vzhledem k obrázku (či obráceně :-)).
Pro takto vložený obrázek na stránce vpravo od textu, je potřeba ve zdroji:
(použitý obrázek: http://vtipy.netroof.eu/item/931/blondyna-na-pousti/)
Úkoly:
Úkol (2 body):
Do stránky autor.html vlož obrázek (třeba svoje zmenšené foto) tak, aby byl zarovnaný vedle textu.
Úkol (3 body):
Vytvoř novou stránku s titulkem a nadpisem Kreslené vtipy, která bude obsahovat tři obrázky kreslených vtipů, které jste zmenšovali v předcházejících úkolech. Do indexu přidejte odkaz na tuto novou stránku.
