Obrázky jsou snad na každém webu, v dnešní době, kdy je internetové připojení už relativně „rychlé“ si každý, kdo vytváří webové stránky může dopřát poměrně slušné grafiky. Způsobů odkud vzít obrázek a jak jej vložit do Vaší stránky je několik. Asi každého napadne vložit konkrétní obrázek přímo do nějakého adresáře na serveru, Váš obrázek je tak načten ze stejného serveru, jako Vaše webová stránka.
Další způsob, jak se dá vložit obrázek je z jiného serveru, zde stejně jako v předchozím případě platí, že musíte znát jeho adresu. Tento způsob má své výhody a nevýhody, asi hlavní výhoda je fakt, že pokud máte malý prostor na serveru, bude Vám to šetřit místo ovšem nevýhody jsou horší. V případě, že odkazujete na nějaký obrázek na jiném serveru a na tom serveru dojde ke smazání či přejmenování, popřípadě vložení na jiné místo (do jiné složky na webu), u Vás na stránce obrázek nebude viditelný, bude místo něj jen prázdné místo, což jistě není příjemné. Další co jistě nelze přehlédnout je fakt, že při načítání obrázku z jiných serverů se čeká na odpověď ještě dalšího serveru, což značně prodlužuje dobu načítání webové stránky. Stránky co se načítají vždy pomalu nejsou příliš oblíbené, protože mnoho lidí s rychlým internetovým připojením nerado čeká.
Nyní si ukážeme, jak vložit obrázek do Vašeho webu:
<img src="./obrazek.jpg">
</body>
Obrázek se do webové stránky vkládá pomocí tagu IMG, který není párový a jeho atribut SRC značí cestu, kde je obrázek uložen.
Asi jste se všimli, že před „obrázek.jpg“ jsou vloženy i další znaky, tyto znaky naznačují adresář, ve kterém je daný obrázek uložen, může to být tedy toto:
| ./ | Obrázek je vložen v tomto adresáři |
| ../ | obrázek je vložen v nadřazeném adresáři |
Další, s čím jistě budete mít ze začátku asi trochu problém je přípona souboru, protože .jpg a .JPG není to samé a na webu se obrázek prostě nezobrazí, další na co dávejte pozor, je, že ne každý obrázek musí být JPG, můžete narazit i na GIF a PNG, je jich samozřejmě více, ale tyto tři jsou asi nejčastější.
Nyní si povíme něco k atributům pro tag IMG. Asi nejdůležitějším atributem je ALT, ten značí alternativní popisek daného obrázku, je to z důvodu, že by se obrázek nenačetl a slouží pro informace, co na daném obrázku je, tedy popis nemusí být stručný.
Nicméně i zde se objevují chyby v některých prohlížečích, konkrétně v jednom nejmenovaném :-D. Pokud vytvoříte popis obrázku přes ALT, daný prohlížeč jeho obsah zobrazí jako bublinkovou nápovědu, což určitě není příjemné.
Dříve jsme si řekli, že pokud chceme u něčeho bublinkovou nápovědu, použijeme pro to atribut TITLE, v tomto případě, aby se nám text nezobrazoval musíme provést něco takového
Tento způsob není úplně ideální, ale funguje.
Další atributy co nás jistě u obrázku budou zajímat jsou WIDTH a HEIGHT, jde o šířku a výšku. Tyto atributy můžou být zadány buď v pixelech a nebo v procentech, tedy takto:
<img src="./obrazek.jpg" width="640" height="480">
</body>
Tento obrázek bude mít na webu přesně tyto rozměry bez ohledu na to, jak je velký či malý. Zde upozorním na jednu důležitou věc, obrázek se nepřevede do této velikosti, bude mít pořád původní velikost, jen na stránce bude takto velký. To znamená, že pokud na Vaší digitální zrcadlovce uděláte fotku, která má třeba rozlišení 20 Mpix a na disku serveru zabírá 9 megabajtů, bude se přenášet takto velký obrázek. Stejně tak to platí i pro malé obrázky, pokud tedy máte obrázek, který má jen 320×240 pixelů a zvětšíte jej na dané pixely, bude obrázek nekvalitní, matný, prostě to nebude pěkné. Nyní se podíváme, jak je to s procenty:
<img src="./obrazek.jpg" width="90%" height="90%">
</body>
Tento obrázek je o trochu zmenšen, konkrétně o 10%. Opět platí to samé jako u pevné šířky v pixelech, obrázek se nepřevede na menší rozměr, pouze se zmenší.
Obrázky stejně jako třeba odstavce můžou mít několik atributů, již jsme si dříve říkali ID, CLASS, LANG, STYLE, tyto atributy jsou stejné a fungují stejně, nicméně existují i další. Asi nejdůležitějším atributem, který udává obtékání obrázku textem je atribut ALIGN a používá se takto:
Obrázek je v tomto případě umístěn nalevo a text jej obtéká zprava.
| Hodnota | Význam |
| left | Pokud použijeme tuto hodnotu atributu align, obrázek bude vlevo a text jej bude obtékat z pravé strany |
| right | Pokud použijeme tuto hodnotu atributu align, obrázek bude vpravo a text jej bude obtékat z levé strany |
| top | Pokud použijeme tuto hodnotu atributu align, obrázek bude nahoře a text jej bude pod ním |
| bottom | Pokud použijeme tuto hodnotu atributu align, obrázek bude dole a text bude nad ním |
Dalším atributem je BORDER, značí rámeček kolem obrázku v pixelech, použití je stejné jako u jiného atributu kde se zadává hodnota v pixelech.
Krom těchto všech atributů lze použít i ty, které jsme si ukázali u odstavců pro jazyk Javascript.
