HTML img -tunniste käytetään kuvan näyttämiseen verkkosivulla. HTML img -tunniste on tyhjä tagi, joka sisältää vain attribuutteja, sulkevia tunnisteita ei käytetä HTML-kuvaelementissä.

Katsotaanpa esimerkki HTML-kuvasta.

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

Lähtö:

HTML img -tunnisteen attribuutit

src ja alt ovat tärkeitä HTML img -tunnisteen määritteitä. Kaikki HTML-kuvatunnisteen attribuutit on annettu alla.

1) src

Se on välttämätön attribuutti, joka kuvaa kuvan lähdettä tai polkua. Se neuvoo selaimen, mistä palvelimella olevaa kuvaa etsitään.

Kuvan sijainti voi olla samassa hakemistossa tai toisessa palvelimessa.

2) kaikki

Alt-attribuutti määrittää kuvalle vaihtoehtoisen tekstin, jos sitä ei voida näyttää. Alt-attribuutin arvo kuvaa kuvaa sanoin. Alt-attribuutin katsotaan olevan hyvä hakukoneoptimoijalle.

3) leveys

Se on valinnainen attribuutti, jota käytetään määrittämään kuvan näyttöleveys. Sitä ei suositella nyt. Sinun tulee käyttää CSS:ää leveysattribuutin sijaan.

4) korkeus

Se on h3 kuvan korkeus. HTML-korkeusattribuutti tukee myös iframe-, kuva- ja objektielementtejä. Sitä ei suositella nyt. Sinun tulee käyttää CSS:ää height-attribuutin sijaan.

Korkeus- ja leveysattribuutin käyttö img-tunnisteen kanssa

Olet oppinut lisäämään kuvan Web-sivullesi, nyt jos haluamme antaa näytettävälle kuvalle jonkin verran korkeutta ja leveyttä vaatimuksemme mukaan, voimme asettaa sen kuvan korkeus- ja leveysmääritteillä.

Esimerkki:

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

Lähtö:

Huomautus: Yritä aina lisätä kuva korkeudella ja leveydellä, muuten se voi välkkyä verkkosivulla näytettäessä.

Alt-attribuutin käyttö

Voimme käyttää alt-attribuuttia kanssa tag. Se näyttää vaihtoehtoisen tekstin, jos kuvaa ei voida näyttää selaimessa. Seuraavassa on esimerkki alt-attribuutista:

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

Lähtö:

Kuinka saada kuva toisesta hakemistosta/kansiosta?

Jotta voit lisätä kuvan verkkoosi, kuvan on oltava samassa kansiossasi, johon olet sijoittanut HTML-tiedoston. Mutta jos jossain tapauksessa kuva on saatavilla jossain muussa hakemistossa, voit käyttää kuvaa seuraavasti:

Yllä olevassa lausunnossa olemme laittaneet kuvan paikalliselle levylle E------>images-kansioon------>img/html-tutorial/39/html-image-2.webp.

Huomautus: Jos src-osoite on virheellinen tai kirjoitettu väärin, se ei näytä kuvaasi verkkosivulla, joten yritä laittaa oikea URL-osoite.

Käyttää tagi linkiksi

Voimme myös linkittää kuvan toiselle sivulle tai käyttää kuvaa linkkinä. Voit tehdä tämän laittamalla tagin sisällä tag.

Esimerkki:

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

Lähtö:

Tuetut selaimet

Elementti	Kromi	IE	Firefox	Ooppera	Safari
	Joo	Joo	Joo	Joo	Joo