HTML img tag sa používa na zobrazenie obrázka na webovej stránke. HTML img tag je prázdny tag, ktorý obsahuje iba atribúty, uzatváracie tagy sa nepoužívajú v HTML elemente obrázka.

Pozrime sa na príklad HTML obrázka.

 <h2>HTML Image Example</h2> <img src="//techcodeview.com/img/html-tutorial/39/html-image.webp" alt="Good Morning Friends"> 

Výkon:

Atribúty HTML značky img

Src a alt sú dôležité atribúty HTML img tagu. Všetky atribúty obrázkovej značky HTML sú uvedené nižšie.

1) src

Je to nevyhnutný atribút, ktorý popisuje zdroj alebo cestu obrázka. Inštruuje prehliadač, kde má hľadať obrázok na serveri.

Umiestnenie obrázka môže byť v rovnakom adresári alebo na inom serveri.

2) všetko

Atribút alt definuje alternatívny text pre obrázok, ak ho nemožno zobraziť. Hodnota atribútu alt popisuje obrázok slovami. Atribút alt sa považuje za dobrý pre potenciálnych SEO.

vytvorenie oracle tabuľky

3) šírka

Je to voliteľný atribút, ktorý sa používa na určenie šírky zobrazenia obrázka. Teraz sa to neodporúča. Namiesto atribútu width by ste mali použiť CSS.

4) výška

Je to h3 výška obrázka. Atribút výška HTML podporuje aj prvky iframe, image a object. Teraz sa to neodporúča. Namiesto atribútu výšky by ste mali použiť CSS.

Použitie atribútov výška a šírka s tagom img

Naučili ste sa, ako vložiť obrázok na vašu webovú stránku, ak teraz chceme dať určitú výšku a šírku na zobrazenie obrázku podľa našej požiadavky, potom môžeme nastaviť atribúty výšky a šírky obrázka.

Príklad:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Výkon:

Poznámka: Vždy sa snažte vložiť obrázok s výškou a šírkou, inak môže pri zobrazovaní na webovej stránke blikať.

Použitie atribútu alt

Môžeme použiť atribút alt s tag. Ak sa obrázok nedá zobraziť v prehliadači, zobrazí sa alternatívny text. Nasleduje príklad atribútu alt:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp" alt="animal image"> 

Výkon:

Ako získať obrázok z iného adresára/priečinka?

Ak chcete vložiť obrázok na web, tento obrázok sa musí nachádzať v rovnakom priečinku, do ktorého ste vložili súbor HTML. Ak je však v niektorých prípadoch obrázok dostupný v inom adresári, môžete k nemu pristupovať takto:

Vo vyššie uvedenom vyhlásení sme umiestnili obrázok na lokálny disk E------>priečinok obrázky------>img/html-tutorial/39/html-image-2.webp.

Poznámka: Ak bude adresa URL src nesprávna alebo nesprávne napísaná, nezobrazí sa váš obrázok na webovej stránke, preto skúste zadať správnu adresu URL.

Použite označiť ako odkaz

Môžeme tiež prepojiť obrázok s inou stránkou alebo môžeme použiť obrázok ako odkaz. Ak to chcete urobiť, položte tag vo vnútri tag.

Príklad:

 <img src="//techcodeview.com/img/html-tutorial/39/html-image-2.webp"> 

Výkon:

Podporné prehliadače

Element	Chrome	IE	Firefox	Opera	Safari
	Áno	Áno	Áno	Áno	Áno