Obrázky Obrázky se používají pro oživení stránek. Obrázky se používají pro oživení stránek. Obrázky se do stránek vkládají nepárovou značkou. To znamená,

Prezentace na téma: "Obrázky Obrázky se používají pro oživení stránek. Obrázky se používají pro oživení stránek. Obrázky se do stránek vkládají nepárovou značkou. To znamená,"— Transkript prezentace:

1 Obrázky Obrázky se používají pro oživení stránek. Obrázky se používají pro oživení stránek. Obrázky se do stránek vkládají nepárovou značkou. To znamená, že na konci značky s e musí udělat lomítko. Obrázky se do stránek vkládají nepárovou značkou. To znamená, že na konci značky s e musí udělat lomítko. Značka img má dva povinné atributy, src a alt. Značka img má dva povinné atributy, src a alt. Atribut src určuje cestu k danému obrázku. Atribut src určuje cestu k danému obrázku. Atributu alt určuje komentář. Atributu alt určuje komentář.

2 Obrázky Na stránkách WWW lze používat různé formáty obrázků. Nejčastěji se používají: Na stránkách WWW lze používat různé formáty obrázků. Nejčastěji se používají: *.JPG (komprimované obrázky – ztrátová komprese) *.JPG (komprimované obrázky – ztrátová komprese) *.GIF (animace, transparentní pozadí, komprimované obrázky – neztrátová komprese) *.GIF (animace, transparentní pozadí, komprimované obrázky – neztrátová komprese) *.PNG (obdoba jako GIF) *.PNG (obdoba jako GIF) - zobrazení obrázku s alternativním textem. - zobrazení obrázku s alternativním textem.

3 Obrázky a CSS Změna vlastností obrázku, obtékání textu, pozicování a podobně lze provést pomocí CSS. Změna vlastností obrázku, obtékání textu, pozicování a podobně lze provést pomocí CSS. Obtékání textu zajistíme pomocí plovoucího objektu Obtékání textu zajistíme pomocí plovoucího objektu float:left float:left float:right float:right float:none float:none Jiné způsoby zarovnání obrázku se dá provést například pomocí neviditelné tabulky. Jiné způsoby zarovnání obrázku se dá provést například pomocí neviditelné tabulky.

4 Obrázky a CSS Obr. 1 Obr. 2 Obr. 3

5 CSS vlastnosti pro obrázky VlastnostHodnotyVýznam widthjednotkyšířka prvku heightjednotkyvýška prvku border-widthjednotkyšířka ohraničení border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset styl ohraničení border-colorbarvabarva rámečku floatleft, right, noneplovoucí objekt clearnone, left, right, both skončení plovoucího objektu

6 Otázky k opakování 1. Jaká značka se používá pro vložení obrázku? 2. Jaké typy obrázků se mohou používat u webových stránek? 3. Jakým způsobem lze zajistit obtékání textu?

7 Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, 2011. BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, 2011. BLÁBOLIL, Roman. Www.blabik.cz: Podpora výuky: „Tvorba www stránek“ [online]. 7. února 2013 11:30. Dostupný z WWW: http://www.blabik.cz/vyuka/ict/35_Tvorba_WWW_stranek.pdf http://www.blabik.cz/vyuka/ict/35_Tvorba_WWW_stranek.pdf Použité obrázky: Vlastní