HTML img-tag brukes til å vise bilde på nettsiden. HTML img tag er en tom tag som kun inneholder attributter, avsluttende tags brukes ikke i HTML bildeelement.

La oss se et eksempel på HTML-bilde.

kunstig nevrale nettverk

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

Produksjon:

Attributter til HTML img tag

src og alt er viktige attributter for HTML img tag. Alle attributtene til HTML-bildekoden er gitt nedenfor.

1) src

Det er en nødvendig egenskap som beskriver kilden eller banen til bildet. Den instruerer nettleseren hvor den skal lete etter bildet på serveren.

Plasseringen av bildet kan være i samme katalog eller en annen server.

2) alt

Alt-attributtet definerer en alternativ tekst for bildet, hvis den ikke kan vises. Verdien av alt-attributtet beskriver bildet med ord. Alt-attributtet anses som bra for SEO potensielle.

3) bredde

Det er et valgfritt attributt som brukes til å spesifisere bredden for å vise bildet. Det anbefales ikke nå. Du bør bruke CSS i stedet for width-attributtet.

4) høyde

Det h3 høyden på bildet. HTML-høyde-attributtet støtter også iframe-, bilde- og objektelementer. Det anbefales ikke nå. Du bør bruke CSS i stedet for høydeattributt.

Bruk av høyde- og breddeattributt med img-tag

Du har lært om hvordan du setter inn et bilde på nettsiden din, nå hvis vi ønsker å gi litt høyde og bredde for å vise bildet i henhold til vårt krav, så kan vi angi det med høyde- og breddeattributter til bildet.

Eksempel:

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

Produksjon:

Merk: Prøv alltid å sette inn bildet med høyde og bredde, ellers kan det flimre mens det vises på nettsiden.

Bruk av alt-attributt

Vi kan bruke alt-attributt med stikkord. Den vil vise en alternativ tekst i tilfelle bildet ikke kan vises i nettleseren. Følgende er eksempelet for alt-attributt:

konverter strengdato

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

Produksjon:

Hvordan får jeg et bilde fra en annen katalog/mappe?

For å sette inn et bilde på nettet, må det bildet være til stede i den samme mappen der du har lagt HTML-filen. Men hvis bildet i noen tilfeller er tilgjengelig i en annen katalog, kan du få tilgang til bildet slik:

I setningen ovenfor har vi lagt bildet i lokal disk E------>images folder------>img/html-tutorial/39/html-image-2.webp.

Merk: Hvis src URL vil være feil eller feilstave, vil det ikke vise bildet ditt på nettsiden, så prøv å angi riktig URL.

Bruk tag som en lenke

Vi kan også koble et bilde til en annen side, eller vi kan bruke et bilde som en link. For å gjøre dette, sett tag inne i stikkord.

Eksempel:

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

Produksjon:

Støtter nettlesere

Element	Chrome	DVS	Firefox	Opera	Safari
	Ja	Ja	Ja	Ja	Ja