Rychlá příručka - HTML - Obrázky

Tag <img> - vložení obrázku na webovou stránku

Na webovou stránku jazyka HTML jste se doposud učili vkládat pouze nějaký text, lze ale vkládat i obrázky, ty jsou pro kvalitní weby velmi důležité. Obrázek lze vložit pomocí tagu <img>, který vychází z anglického slova image, což znamená česky obraz, podívejte se. Tento tag je jeden z mála nepárový, neexistuje tedy jeho ukončení. Tag <img> sám v HTML kódu nic nedělá, vždy musí mít parametr src. Ten vychází ze slova source, v překladu zdroj, podívejte se. Do uvozovek parametru src se píše umístění obrázku. Jak přesně umístění psát se dozvíte v dalším článku na této stránce. Jako další parametry, které jsou ale již nepovinné, můžeme uvést align, alt, width a height. První z parametrů, parametr align, již znáte z předchozích článků, slouží pro zarovnání (v tomto případě obrázku) doleva (v uvozovkách parametru bude left), doprostřed (center) nebo doprava (right). Parametr alt bude mít v uvozovkách nějaký vámi vymyšlený text. Tento text bude alternativním textem obrázku a zobrazí se místo obrázku, když má někdo velmi malé připojení k internetu nebo zařízení, které nepodporuje obrázky určitého typu, dnes už je alternativní text ale téměř zbytečný. Poslední dvojice uvedených nepovinných parametrů, kterou tvoří width a height, mění velikost obrázku. Obrázek by měl být ale téměř povinně vždy upraven a dán do určité jeho velikosti v nějakém obrázkovém editoru, aby se jeho velikost už nemusela měnit v HTML kódu, je to lepší. Parametr width má v uvozovkách hodnotu, která vyjadřuje velikost šířky obrázku, protože width znamená anglicky šířka, podívejte se. Parametr height má v uvozovkách hodnotu, která vyjadřuje velikost výšky obrázku, protože height znamená anglicky výška, podívejte se.

Jak psát cestu k obrázku, který chci vložit na webovou stránku

Psát cesty k obrázkům je někdy složité, proto mají některé placené editory (např. Adobe Dreamweaver) funkci, kde vyberete obrázek a program k němu sám napíše cestu. Nejjednodušší je, když máte obrázek uložený ve stejné složce, kde máte uložený i soubor jazyka HTML, do kterého vložíte právě tento obrázek. V tomto případě se do uvozovek parametru src napíše pouze název obrázku s příponou (tedy např. foto1.jpg nebo obr1.png). Poté je důležité si pamatovat, že pokud chceme vstoupit do nějaké složky, napíše se její název a lomítko. Pokud chceme vystoupit z nějaké složky, napíší se dvě tečky a lomítko. Nakonec každé cesty musí být název obrázku, který chceme vložit, vždy s příponou, kterou mohou být .jpg (ta je nejčastěji u fotografií), .png (ta je často u klasických obrázků), .gif (ta je nejčastěji u animovaných pohyblivých obrázků), ale existuje i mnoho dalších přípon pro obrázky.

© 2013 Petr Lhotský - petrlhotsky@windowslive.com