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">Testaa nyt
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">Testaa nyt
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">Testaa nyt
Lähtö:
Tuetut selaimet
| Elementti |  Kromi |  IE |  Firefox |  Ooppera |  Safari |
| | Joo | Joo | Joo | Joo | Joo |