HTML img oznaka se uporablja za prikaz slike na spletni strani. Oznaka img HTML je prazna oznaka, ki vsebuje samo atribute, zaključne oznake se ne uporabljajo v slikovnem elementu HTML.

Oglejmo si primer slike HTML.

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

Izhod:

Atributi oznake img HTML

Src in alt sta pomembna atributa oznake img HTML. Vsi atributi slikovne oznake HTML so navedeni spodaj.

1) src

Je nujen atribut, ki opisuje izvor ali pot slike. Brskalniku naroči, kje naj išče sliko na strežniku.

Lokacija slike je lahko v istem imeniku ali drugem strežniku.

2) vse

Atribut alt določa nadomestno besedilo za sliko, če je ni mogoče prikazati. Vrednost atributa alt opisuje sliko z besedami. Atribut alt velja za dobrega za potencialne SEO.

3) širina

Je neobvezen atribut, ki se uporablja za določanje širine za prikaz slike. Zdaj ni priporočljivo. Namesto atributa širine bi morali uporabiti CSS.

4) višina

To je h3 višine slike. Atribut višine HTML podpira tudi iframe, slike in elemente predmetov. Zdaj ni priporočljivo. Namesto atributa višine morate uporabiti CSS.

Uporaba atributa višine in širine z oznako img

Naučili ste se, kako vstaviti sliko na vašo spletno stran. Zdaj, če želimo dati nekaj višine in širine za prikaz slike v skladu z našimi zahtevami, jo lahko nastavimo z atributoma višine in širine slike.

primer:

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

Izhod:

Opomba: vedno poskusite vstaviti sliko z višino in širino, sicer lahko med prikazom na spletni strani utripa.

Uporaba atributa alt

Z atributom alt lahko uporabimo oznaka. Prikazalo bo alternativno besedilo, če slike ni mogoče prikazati v brskalniku. Sledi primer atributa alt:

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

Izhod:

Kako dobiti sliko iz drugega imenika/mape?

Če želite v svoj splet vstaviti sliko, mora biti ta slika prisotna v vaši isti mapi, v katero ste vstavili datoteko HTML. Če pa je v nekem primeru slika na voljo v kakšnem drugem imeniku, lahko do slike dostopate takole:

V zgornji izjavi smo postavili sliko na lokalni disk E------>images mapa------>img/html-tutorial/39/html-image-2.webp.

Opomba: Če bo src URL napačen ali napačno črkovan, potem ne bo prikazal vaše slike na spletni strani, zato poskusite vnesti pravilen URL.

Uporaba označite kot povezavo

Sliko lahko tudi povežemo z drugo stranjo ali pa sliko uporabimo kot povezavo. Če želite to narediti, postavite oznako znotraj oznaka.

primer:

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

Izhod:

Podprti brskalniki

Element	Chrome	IE	Firefox	Opera	Safari
	ja	ja	ja	ja	ja