Na vykreslenie obrázku sa v HTML používa tag <img>.
<img src=”adresa obrázku” alt=”popis čo je na obrázku”>
Tag <img> nemá zatvárací tag. Tam kde je v texte umiestnený tento tag tak tam bude aj obrázok.
Tento tag má dva atribúty src a alt. Atribút src odkazuje na link obrázku. Tento link vyzerá tak ako sme ukazovali v minulej lekcii akurát miesto na stránku odkazuje na obrázok. Atribút alt väčšinou človek ani nijak neuvidí. Ten slúži na to keď prehliadač nevie nájsť z nejakého dôvodu obrázok tak miesto neho tam vypíše to čo je v attribute alt. (alt atribút sa musí zadať vždy inak prehliadač obrázok nezobrazí ani keby ho našiel)
Jedna z najdôležitejších vecí pri obrázkoch je ich veľkosť. Tá sa samozrejme dá tiež nastaviť. To sa dá urobyť dvoma spôsobmi:
1) <img src=”link na obrázok” alt”opis obrázku” style=”width:500px;height:400px;”>
2) <img src=”link na obrázok” alt=”opis obrázku” width=”500px” height=”400px”>
(je veľmi potrebné nastaviť veľkosť obrázku inak to na každom display bude vyzerať inak)
Takto sa nedá zobráziť len obyčajný obrázok, ale aj gify. Obrázky sa dajú použiť takysto aj ako odkazy na iné stránky. To sa robí tak že tam kam sa dáva pri linke normálne text sa dá obrázok.
<a href=”adresa”>
<img src=”link na obrázok” alt=”opis” width=”500px” height=”400px” style=”border:0”>
</a>
(border 0 je tam kvôli tomu aby obrázok vyzeral normálne, linky totiž štandardne vyzerajú ináč ale na obrázkoch to väcčinou nechceme)
Obrázok ale väčšinou používame niekde pri texte a chceme aby to nebolo tak, že obrázok potom napravo od neho je veľká medzera a potom zase text. Na to aby tam tá veľká medzera nebola sa používa zarovnávanie. Vtedy sa obrázok dá normálne do textu ktorý je v paragrafoch a dá sa mu atribút style, kde sa určí, na ktorú stranu bude zarovnaný.
<p>
<img src=”link obrázku” alt=”popis obrázku” style=”float:right;”> Tuto nasleduje nejaký text
</p>
Zarovnávať sa dá aj do ľava vtedy sa miesto right dá left.
Niekedy chcete mať obrázok ako pozadie. To sa urobí takto:
Všimnite si, že teraz sa atribút style píše do tagu body. Tag body tam musí byť vždy ako sme si vysvetlili v prvej lekcii. Teraz sme mu akurát pridali atribút kde sme nastavili, že na pozadí bude takýto obrázok.