Značka img je jednou z nejdůležitějších a nejčastěji používaných značek v HTML. Umožňuje vkládat obrázky na webové stránky a činí je atraktivnějšími a informativnějšími. Pokud se teprve začínáte učit HTML, pak může vytváření a používání značky img představovat určitou složitost. V této příručce se podíváme na hlavní kroky k vytvoření značky img a uvedeme příklady jejího použití.
Hlavní atribut značky img-src-označuje cestu k souboru obrázku. Může být absolutní (úplná) nebo relativní. Absolutní cesta označuje úplné umístění souboru, počínaje kořenovým adresářem. Relativní cesta označuje umístění souboru vzhledem k aktuálnímu adresáři.
Pro vložení značky img do kódu HTML se používá následující syntaxe:
Atribut alt určuje alternativní text pro obrázek, který se zobrazí, pokud obrázek Nelze stáhnout nebo pokud uživatel používá čtečku obrazovky. Atribut width a height určuje šířku a výšku obrazu, respektive v pixelech.
Základy značky img
K vytvoření značky img je třeba použít následující syntaxi:
- Značka img:
- Atribut src označující cestu k obrázku: src="https://mksegment.ru/c/%D0%BF%D1%83%D1%82%D1%8C_%D0%BA_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8E"
- Volitelné atributy: width-šířka obrázku, height - Výška obrázku, alt - Alternativní text, který se zobrazí v případě nedostupnosti obrázku
- Uzavírací značka img: (i když je to volitelné, protože značka img nemá obsah)
Příklad použití značky img:
Při používání značky img je důležité zadat správnou cestu k obrázku, aby jej prohlížeč mohl správně zobrazit na webové stránce. Pokud není nalezen obrázek, místo obrázku se zobrazí atribut alt.
Syntaxe a atributy
K vytvoření značky v HTML se používá následující syntaxe:
- - cesta k obrázku je uvedena v atributu src a alternativní text, který se zobrazí v případě nemožnosti načíst obrázek, je uveden v atributu alt .
- - kromě toho můžete určit šířku a výšku obrázku v atributech width a height . Doporučuje se však zadat pouze jeden z těchto atributů a zbývající ponechat bez hodnoty, aby se obrázek zobrazoval úměrně.
V tagu lze také použít následující další atributy:
- title= "text_vyplňující se_vyprávění" - označuje text popisku, který se objeví, když najedete kurzorem na obrázek.
- třída= "název třídy" - přidává třídu pro další použití v CSS stylech.
- id= " id " - nastaví jedinečný identifikátor pro prvek, který lze použít v JavaScriptu.
- style= "styly" - umožňuje přidat vestavěné styly bez použití externích tabulek CSS.
Příklady použití
Tag velmi užitečné pro zobrazení obrázků na webových stránkách. Zde je několik příkladů použití:
1. Zobrazení obrázku pomocí absolutní cesty:
2. Zobrazení obrázku pomocí relativní cesty:
3. Zobrazení obrázku s uvedením šířky a výšky:
4. Zobrazení obrázku pomocí odkazu:
5. Zobrazení obrázku pomocí atributu srcset pro podporu různých zařízení:
Tag poskytuje velkou flexibilitu pro práci s obrázky na webových stránkách. K dosažení požadovaného výsledku použijte jeho různé atributy.
Jak nastavit cestu k obrázku
Když vytvoříte značku img v HTML, musíte zadat cestu k obrázku, aby jej prohlížeč našel a zobrazil na stránce. Existuje několik způsobů, jak určit cestu k obrázku:
Relativní cesta: Pokud je obrázek ve stejné složce jako váš soubor HTML, můžete zadat pouze název obrázku v atributu src značky img. Například, src="https://mksegment.ru/c/image.jpg". Pokud je obrázek v podsložce, můžete zadat cestu týkající se aktuální složky, například, src="https://mksegment.ru/c/images/image.jpg".
Absolutní cesta: Můžete zadat úplnou cestu k obrázku, počínaje kořenovým adresářem vašeho serveru nebo pomocí adresy URL. Například, src="https://mksegment.ru/images/image.jpg" nebo src="https://www.example.com/images/image.jpg".
Relativní URL cesta: Pokud je vaše stránka umístěna na jiném webu, můžete na tento web zadat relativní cestu. Například, src="https://mksegment.ru/images/image.jpg".
Uvedením správné cesty k obrázku zaručíte jeho úspěšné stažení a zobrazení na vaší webové stránce.
Absolutní cesta
Absolutní cesta v HTML se používá k zadání úplné cesty k obrázku. Obsahuje všechny potřebné informační prvky, od kořenové složky až po samotný obrázek.
Absolutní cesta se skládá z následujících částí:
- Protokol: na začátku cesty je uveden protokol jako " http://" nebo "https://". Protokol určuje způsob přenosu dat a používá se ke komunikaci se serverem.
- Název domény: po protokolu následuje název domény, který označuje server, kde je obrázek uložen. Například "www.example.com".
- Cesta ke složce: za názvem domény je uvedena cesta ke složce, ve které je obrázek umístěn. Například " / images/".
- Název souboru: na konci cesty je uveden název souboru obrázku a jeho přípona, například "image.jpg".
Například Absolutní cesta k obrazu " image.jpg "umístěné na serveru" www.example.com "ve složce "images" bude vypadat následovně:
Použití absolutní cesty je užitečné, když je třeba zadat obrázky umístěné na jiných serverech nebo v jiných složkách. Pokud je však obrázek ve stejné složce jako soubor HTML, lze použít relativní cestu, která je kratší a jednodušší na psaní.