HTML obrázky
Obrázky mohou zlepšit design a vzhled webové stránky.
Příklad
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Příklad
<img src="img_girl.jpg"
alt="Girl in a jacket">
Příklad
<img src="img_chania.jpg"
alt="Flowers in Chania">
Syntaxe obrázků HTML
HTML <img>tag se používá k vložení obrázku do webové stránky.
Obrázky se do webové stránky technicky nevkládají; obrázky jsou propojeny s webovými stránkami. Značka <img>vytváří úložný prostor pro odkazovaný obrázek.
Značka <img>je prázdná, obsahuje pouze atributy a nemá uzavírací značku.
Značka <img>má dva povinné atributy:
- src - Určuje cestu k obrázku
- alt – Určuje alternativní text pro obrázek
Syntax
<img src="url" alt="alternatetext">
Atribut src
Povinný srcatribut určuje cestu (URL) k obrázku.
Poznámka: Když se webová stránka načte, je to prohlížeč, který v tu chvíli získá obrázek z webového serveru a vloží jej na stránku. Dbejte proto na to, aby obrázek skutečně zůstal na stejném místě vzhledem k webové stránce, jinak vaši návštěvníci získají ikonu nefunkčního odkazu. altPokud prohlížeč nemůže najít obrázek, zobrazí se ikona nefunkčního odkazu a text.
Příklad
<img src="img_chania.jpg" alt="Flowers
in Chania">
Atribut alt
Požadovaný altatribut poskytuje alternativní text pro obrázek, pokud jej uživatel z nějakého důvodu nemůže zobrazit (z důvodu pomalého připojení, chyby v atributu src nebo pokud uživatel používá čtečku obrazovky).
Hodnota altatributu by měla popisovat obrázek:
Příklad
<img src="img_chania.jpg" alt="Flowers
in Chania">
Pokud prohlížeč nemůže najít obrázek, zobrazí hodnotu alt
atributu:
Příklad
<img src="wrongname.gif" alt="Flowers
in Chania">
Tip: Čtečka obrazovky je softwarový program, který čte kód HTML a umožňuje uživateli „naslouchat“ obsahu. Čtečky obrazovky jsou užitečné pro lidi se zrakovým postižením nebo s poruchou učení.
Velikost obrázku – šířka a výška
Atribut můžete použít stylek určení šířky a výšky obrázku.
Příklad
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Případně můžete použít atributy widtha :height
Příklad
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Atributy widtha heightvždy definují šířku a výšku obrázku v pixelech.
Poznámka: Vždy určete šířku a výšku obrázku. Pokud šířka a výška nejsou zadány, webová stránka může při načítání obrázku blikat.
Šířka a výška, nebo styl?
Všechny atributy width, heighta stylejsou platné v HTML.
Doporučujeme však použít styleatribut. Zabraňuje listům stylů ve změně velikosti obrázků:
Příklad
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Obrázky v jiné složce
Pokud máte obrázky v podsložce, musíte do srcatributu zahrnout název složky:
Příklad
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Obrázky na jiném serveru/webu
Některé webové stránky odkazují na obrázek na jiném serveru.
Chcete-li odkazovat na obrázek na jiném serveru, musíte v srcatributu zadat absolutní (úplnou) adresu URL:
Příklad
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Poznámky k externím obrázkům: Externí obrázky mohou být chráněny autorským právem. Pokud nezískáte povolení k jeho použití, můžete se dopustit porušení autorských práv. Kromě toho nemůžete ovládat externí obrazy; může být náhle odstraněn nebo změněn.
Animované obrázky
HTML umožňuje animované GIFy:
Příklad
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Obrázek jako odkaz
Chcete-li použít obrázek jako odkaz, vložte <img>značku do <a>
značky:
Příklad
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Plovoucí obrázek
Pomocí vlastnosti CSS floatmůžete nechat obrázek plavat napravo nebo nalevo od textu:
Příklad
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
Tip: Chcete-li se o CSS Float dozvědět více, přečtěte si náš návod CSS Float .
Běžné formáty obrázků
Zde jsou nejběžnější typy souborů obrázků, které jsou podporovány ve všech prohlížečích (Chrome, Edge, Firefox, Safari, Opera):
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Shrnutí kapitoly
- Pomocí elementu HTML
<img>definujte obrázek srcPomocí atributu HTML definujte adresu URL obrázku- Atribut HTML použijte
altk definování alternativního textu pro obrázek, pokud jej nelze zobrazit -
K definování velikosti obrázku použijte HTML
widthaheightatributy nebo CSSwidtha vlastnostiheight - Pomocí vlastnosti CSS
floatnechte obrázek plavat doleva nebo doprava
Poznámka: Načítání velkých obrázků nějakou dobu trvá a může zpomalit vaši webovou stránku. Obrázky používejte opatrně.
HTML cvičení
HTML značky obrázků
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .