fbpx

HTML obrázek

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>
Hodnocení