HTML img oznaka koristi se za prikaz slike na web stranici. HTML img oznaka je prazna oznaka koja sadrži samo atribute, završne oznake se ne koriste u HTML elementu slike.

Pogledajmo primjer HTML slike.

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

Izlaz:

Atributi HTML img oznake

Src i alt su važni atributi HTML img oznake. Svi atributi HTML oznake slike navedeni su u nastavku.

1) src

To je neophodan atribut koji opisuje izvor ili put slike. Pregledniku daje upute gdje da traži sliku na poslužitelju.

Lokacija slike može biti u istom direktoriju ili drugom poslužitelju.

2) sve

Atribut alt definira alternativni tekst za sliku ako se ne može prikazati. Vrijednost alt atributa opisuje sliku riječima. Atribut alt smatra se dobrim za potencijalne SEO.

3) širina

To je izborni atribut koji se koristi za određivanje širine za prikaz slike. Sada se ne preporučuje. Trebali biste primijeniti CSS umjesto atributa širine.

4) visina

To je h3 visine slike. HTML atribut visine također podržava elemente iframe, slike i objekta. Sada se ne preporučuje. Trebali biste primijeniti CSS umjesto atributa visine.

Upotreba atributa visine i širine s img oznakom

Naučili ste kako umetnuti sliku na svoju web stranicu, sada ako želimo dati neku visinu i širinu za prikaz slike u skladu s našim zahtjevima, tada to možemo postaviti s atributima visine i širine slike.

Primjer:

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

Izlaz:

Napomena: Uvijek pokušajte umetnuti sliku s visinom i širinom, inače bi mogla treperiti dok se prikazuje na web stranici.

Upotreba atributa alt

Možemo koristiti atribut alt s označiti. Prikazat će alternativni tekst u slučaju da se slika ne može prikazati u pregledniku. Slijedi primjer za atribut alt:

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

Izlaz:

Kako dobiti sliku iz drugog direktorija/mape?

Da biste umetnuli sliku na web, ta slika mora biti prisutna u vašoj istoj mapi u koju ste stavili HTML datoteku. Ali ako je u nekom slučaju slika dostupna u nekom drugom direktoriju, tada možete pristupiti slici ovako:

U gornjoj izjavi stavili smo sliku na lokalni disk E------>images folder------>img/html-tutorial/39/html-image-2.webp.

Napomena: Ako je src URL netočan ili pogrešno napisan, tada neće prikazati vašu sliku na web stranici, stoga pokušajte staviti točan URL.

Koristiti oznaku kao vezu

Također možemo povezati sliku s drugom stranicom ili možemo koristiti sliku kao poveznicu. Da biste to učinili, stavite oznaka unutar označiti.

Primjer:

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

Izlaz:

Podržava preglednike

Element	Krom	tj	Firefox	Opera	Safari
	Da	Da	Da	Da	Da