Pridávanie obrázkov na stránky vašej webovej stránky ich môže často spríjemniť a sprostredkovať informácie lepšie ako samotný text. Tento proces sa vykonáva pomocou HTML kódu a obrazového súboru. Súbor môže byť z inej webovej stránky alebo uložený na webovom serveri.

Pomocou štítok

V kóde HTML webovej stránky môžete pridať obrázok pomocou tlačidla tag. V musíte určiť štyri atribúty:

• Src - Atribút zdroja označuje umiestnenie obrazu. Ak je obrázok na tom istom serveri ako vaša lokalita, môžete použiť relatívnu cestu, ale obrázky z inej lokality vyžadujú absolútne cesty.
• Alt - alternatívny textový atribút je písaný opis obrázka.
• Šírka - šírka obrázka.
• Výška - Výška obrázku.

Voliteľný atribút je Border ( Hranica), ktorý umožňuje určiť orámovanie okolo obrázka. Atribút border je definovaný v pixelovej veľkosti. Napríklad pomocou hraníc = 1 v znamená, že hranica okolo obrázka by mala byť 1 pixel široká.

Poznámka: Atribút Border bol v HTML5 zastaraný a nie je podporovaný.

Príklady

Nasledujúce príklady zobrazujú skutočný kód HTML použitý na pridanie obrázka v hornej časti tejto stránky. Môžu byť vložené kdekoľvek v tele stránky. Prvá má kratšiu adresu URL, pretože obrázok je uložený na našom serveri; druhá je spôsob, akým by ste odkazovali na náš obraz.

Príklad 1

Príklad dva

Aké formáty obrázkov môžem použiť na webovej stránke?

Najbežnejšie formáty obrázkov, ktoré sa majú použiť pre obrázky, fotografie, logá a iné obrázky, sú JPEG, GIF a PNG. Iné formáty obrázkov, ktoré nie sú široko podporované, ako napríklad BMP, nemusia fungovať vo všetkých prehliadačoch.

Potrebujem citácie okolo atribútov v značke img?

Áno. Hoci dnešné prehliadače môžu zvyčajne opraviť chyby s chýbajúcimi úvodzovkami okolo hodnoty atribútu, mali by ste mať vždy hodnoty okolo hodnoty atribútu, aby sa zabránilo chybám.