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ář.
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.
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.
Obrázky a CSS Obr. 1 Obr. 2 Obr. 3
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
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?
Použité zdroje BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, BLÁBOLIL, R. Informační a komunikační technologie. 3. rozšířené vydání. České Budějovice: KOPP, BLÁBOLIL, Roman. Podpora výuky: „Tvorba www stránek“ [online]. 7. února :30. Dostupný z WWW: Použité obrázky: Vlastní