Obrázky lze definovat tagem <img>, přičemž je potřeba znát cestu k obrázku src=““ a doplnit ALT atribut, případně šířku a výšku. Stejným způsobem lze vkládat i animované obrázky, respektive GIFy.
<img src="https://www.smuton.cz/wp-content/uploads/2020/09/logo-smuton-cz.jpg" alt="Logo Smuton.cz" width="250" height="71" title="Logo Smuton.cz"> <img src="https://www.smuton.cz/wp-content/uploads/2020/09/logo-smuton-cz.jpg" alt="Logo Smuton.cz" style="width:250px; height:71px;">
Vložení obrázku není nutné doplňovat o požadované rozměry.
<img src="https://www.smuton.cz/wp-content/uploads/2020/09/logo-smuton-cz.jpg" alt="Logo Smuton.cz" title="Logo Smuton.cz">
Obrázek lze více přizpůsobit vložením tagu <style> do hlavičky dokumentu.
<head>
<style>
img {
width: 75%;
}
</style>
</head>
<body>
<img src="https://www.smuton.cz/wp-content/uploads/2020/09/logo-smuton-cz.jpg" alt="Logo Smuton.cz" width="250" height="71">
<img src="https://www.smuton.cz/wp-content/uploads/2020/09/logo-smuton-cz.jpg" alt="Logo Smuton.cz" style="width:250px; height:71px;">
</body>Vložení odkazu do obrázku v HTML lze přidáním tagu <a>.
<a href="https://www.smuton.cz/"> <img src="https://www.smuton.cz/wp-content/uploads/2020/09/logo-smuton-cz.jpg" alt="Logo Smuton.cz" style="width:250px;height:71px;"> </a>
Vložení HTML odstavce s plovoucím obrázkem.
<p><img src="https://www.smuton.cz/wp-content/uploads/2020/09/logo-smuton-cz.jpg" alt="Logo Smuton.cz" style="float:right;width:250px;height:71px;"> Toto je klasický odstavec a vedle vidíte plovoucí obrázek.</p> <p><img src="https://www.smuton.cz/wp-content/uploads/2020/09/logo-smuton-cz.jpg" alt="Logo Smuton.cz" style="float:left;width:250px;height:71px;"> Toto je klasický odstavec a vedle vidíte plovoucí obrázek.</p>
Jednoduchý zápis v rámci dokumentu HTML.
<!DOCTYPE html> <html> <body> <h2>HTML obrázek</h2> <p>Obrázek je definován pomocí tagu "img"</p> <img src="https://www.smuton.cz/wp-content/uploads/2020/09/logo-smuton-cz.jpg" alt="Logo Smuton.cz" width="250" height="71" title="Logo Smuton.cz"> <!-- img: Element obrázku. src: Cesta k obrázku. Může být jak lokální, tak na jiném počítači (viz. kód). alt: Popis obrázku. Důležité pro SEO. width a height: Rozměry obrázku v px title: Titulek obrázku / text, který bude vidět po najetí myší na obrázek. --> </body> </html>