Obrázky jsou nepostradatelnou součástí webu. Používají se jako podklad pro www stránku, nahrazují klasické textové odkazy, z jejich pomocí se vytváří layout celého webu apod.
img
Pro vkládání obrázku do www stránky, (obrázek musí být již vytvořen a uložen - soubor GIF, JPEG nebo PNG), se používá nepárová značka img.
<img src="nazev_souboru">
Pro umístnění samotného obrázku platí pravidla jako pro ostatní prvky webu - obrázek může být uložen přímo ve složce s HTML stránkou, v takovém případě nemusíme uvádět cestu k němu, dále může být uveden v jiné složce - cestu k němu musíme uvést.
<img src="obrazek.jpg"> - obrázek je ve stejném adresáři jako HTML stránka, kam byl tento HTML kód vložen
<img src="images/obrazek.gif"> - obrázek se nachází v adresáři images
Úkol: Uložte libovolný obrázek do složky vaší www prezentace. Do souboru index.htm vložte kód pro vložení obrázku, např.: <img src="obrázek.jpg">. (POZOR na příponu souboru).
Parametry img
img má řadu doplňujících parametrů, jako je například velikost obrázku, zarovnání, popisek apod.
Zarovnání obrázků vhledem k pozici textu se provádí parametrem align. Jeho hodnoty jsou:
align="left" - zarovná obrázek na levý okraj stránky, text jej obtéká z pravé strany.
align="right" - zarovná obrázek na pravý okraj stránky, text jej obtéká z levé strany
align="top" - zarovná horní okraj obrázku s nejvýše umístěným elementem (třeba textem)
align="middle" - zarovná první řádek textu s prostředkem obrázků, další řádky textu pokračují pod obrázkem
Úkol: Za text <img src="obrazek.jpg"> umístěte text: Pro umístnění samotného obrázku platí pravidla jako pro ostatní prvky webu - obrázek může být uveden přímo v daném adresáři s HTML stránkou, v takovém případě nemusíme uvádět cestu k němu, dále může být uveden v jiném adresáři - cestu k němu musíme pochopitelně uvést. Doplněním parametru align do značky img <img align="right" src="obrazek.jpg"> změňte zarovnání obrázku. Vyzkoušejte rozdíl mezi zarovnáním left a middle.
Velikost obrázku (tj. jeho výšku a šířku v pixelech) definujeme parametry width="cislo1", height="cislo2".
Úkol: Zjistěte velikost obrázku, který jste vložili na stránku (pravé tlačítko, Vlastnosti). Zvětšete rozměry obrázku o 20 pixelů doplněním parametru width="cislo1", height="cislo2" do značky img <img align="right" width="480" height="640" src="obrazek.jpg">. (POZOR na deformace šířky a výšky původního obrázku.)
Alternativní text se zobrazuje v případě, že stránka obsahuje obrázky, které ještě nejsou načteny, dále v případě, že nad obrázkem podržíte kurzor myši a objeví se žlutý rámeček s tímto textem nebo v případě, že máte v prohlížeči vypnuto načítání obrázků nebo v případě, když se obrázek z libovolných důvodů nenačte.
alt="text vyjadřující popis obrázku"
Úkol: Obrázku přidejte alternativní text doplněním parametru alt="text vyjadřující popis obrázku" do značky img , např.: <img alt="Toto je obrázek" src="obrazek.jpg">.
Obrázek jako odkaz
Úkol: V programu Malování vytvořte obrázek tlačítka s textem VOŠ a SZeŠ Tábor. Uložte jej pod názvem vosszes.gif. Vložte odkaz na stránky www.szestabor.cz s využitím obrázku vosszes.gif <a href="http://www.szestabor.cz/"><img src="vosszes.gif"></a>. (Text jsme nahradili kódem pro vložení obrázku). Uložte. Zobrazte v prohlížeči. Vyzkoušejte, zda-li odkaz funguje.