5.1 Vložení obrázku

Vložení obrázku

Obrázky se na stránku vkládají pomocí nepárového tagu <img>.

K tagu <img> musíme přidat minimálně parametr src, který popisuje cestu k obrázku a název obrázku:

obecný příklad: <img src="cesta/název.přípona"> 

V názvu obrázku musíme napsat správně příponu obrázku, nesmíme zapomenout na = a obě uvozovky:

<img src="fotky/foto001.jpg"> 
Prohlížeč zobrazí fotku s názvem foto001.jpg, která se nachází ve složce fotky. 

a) Vložení obrázku, který je uložený v počítači

Je vhodné, aby všechny obrázky, které chceme vložit do webové stránky, byly uloženy v jedné společné složce např. s názvem obr, img, fotky apod. 

Velmi záleží na tom, kde se složka s obrázky nachází a jak se jmenuje, protože k (názvu) obrázku musíme vždy přidat cestu, kde se daný obrázek nachází.

Nejjednodušší případ je ten, že soubory stránek .html a obrázky jsou společně v jedné složce, pak není třeba cestu nastavovat. Obsah společné složky pak ale bývá nepřehledný. 

Jednoduchou možností je obrázky umisit do složky, která je ve složce se soubory stránek (do podsložky). Pak cestu k obrázkům popíšeme názvem složky s obrázky. Tuto možnost budeme využívat.

Obrázky se na stránku na stránku vloží pomocí výše popsaného příkazu:
<img src="cesta/název.přípona">
<img src="obr/auto.gif">  Prohlížeč zobrazí obrázek auto.gif z podsložky obr.

Pokud se obrázek nezobrazil (po uložení souboru se stránkou a znovunačtení stránky prohlížečem), hledej tyto nejčastější chyby: 

Zkontroluj správnost syntaxe tagu img: "zobáčky", uvozovky, rovnítko, mezera mezi img a src,...

Mám správně napsaný název podsložky? Existuje tato podsložka?
Je obrázek auto.gif ve složce obr? 

Jmenuje se soubor s obrázkem tak, jak jsem to napsal? Mám správně napsanou příponu obrázku? (Záleží i na velikosti písmen.) 

Nemám v popisu cesty a názvu obrázku uvedenou mezeru, která tam nemá být?

b) Vložení obrázku odněkud z internetu

Pokud na své stránce chceme použít obrázek, který uvidíme někde na internetu, máme dvě možnosti: 

a) Obrázek stáhneme a uložíme do svého počítače - viz bod a)

b) Vytvoříme odkaz přímo na obrázek umístěný na internetu. Potřebujeme však zjistit cestu k obrázku, tj. internetovou adresu obrázku. 

Internetovou adresu obrázku zjistíme po kliknutí pravým tlačítkem na obrázek a výběrem možnosti: Kopírovat adresu obrázku. Poté se nám adresa k obrázku uloží do schránky (paměti).

Pak můžeme tuto adresu ze schránky vložit do tagu img mezi uvozovky: 
<img src=""> 
vznikne něco takového:
<img src="http://zs.zsvsechovice.cz/sites/default/files/zs_logo_sova_0.gif">

a zobrazí se:   

c) kde se obrázek zobrazí

Obrázky se zobrazují podobně jako "písmenka na řádku". Pokud vložíme několik obrázků hned po sobě, naskládají se obrázky na řádku za sebou. Na nový řádek přeteče ten, který by se na řádek už nevešel.

Na nový řádek můžeme obrázek odsadit pomocí tagu <br> nebo <p> a </p>.

Výška řádku je dána výškou obrázku. Tuto vlastnost lze změnit pomocí nastaveného obtékání obrázku.