Kuvien Käsittely HTML:ssä
Kuvat
Kuvat ovat keskeisessä roolissa verkkosivujen visuaalisen ilmeen parantamisessa ja tiedon välittämisessä. HTML:ssä kuvat lisätään käyttämällä <img>-tägiä.
Kuvien lisääminen
<img>-tägiä käytetään kuvien lisäämiseen HTML-dokumenttiin. Toisin kuin useimmilla HTML-tägeillä, <img>-tägillä ei ole sulkevaa tägiä, vaan se on itsestään sulkeutuva.
Esimerkki:
<img src="image.jpg" alt="Description of the image">
Yllä olevassa esimerkissä:
<img>-tägiä käytetään kuvan lisäämiseen;src-attribuutti määrittää kuvatiedoston lähteen (URL);alt-attribuutti tarjoaa vaihtoehtoisen tekstin kuvalle. Tämä teksti näytetään, jos kuvaa ei voida ladata tai saavutettavuuden vuoksi.
Ennen kuin tarkastellaan käytännön esimerkkiä, tutustutaan img-tunnisteen olennaisiin attribuutteihin ja siihen, miten ne vaikuttavat sisällön esittämiseen.
Kuvan attribuutit
src: Määrittää kuvatiedoston lähteen (URL-osoitteen). Tämä attribuutti on pakollinen, jotta<img>-tunniste näyttää kuvan;alt: Tarjoaa vaihtoehtoisen tekstin kuvalle.alt-attribuuttiin määritelty teksti näytetään, jos kuvaa ei voida ladata tai saavutettavuuden vuoksi. Tämä on tärkeää käyttäjille, jotka käyttävät ruudunlukuohjelmia, tai tilanteissa, joissa kuvaa ei voida näyttää;width: Määrittää kuvan leveyden pikseleinä tai prosentteina ylätason säiliöstä;height: Määrittää kuvan korkeuden pikseleinä tai prosentteina ylätason säiliöstä;title: Tarjoaa lisätietoa kuvasta. Usein näytetään työkaluvihjeenä, kun käyttäjä vie hiiren kuvan päälle.
Esimerkki:
index.html
Yllä olevassa esimerkissä:
<img>-elementti lisää kuvan verkkosivulle;src-attribuutti määrittää kuvatiedoston lähdeosoitteen;alt-attribuutti asettaa vaihtoehtoisen tekstin kuvalle;width-attribuutti määrittää kuvan leveyden;height-attribuutti määrittää kuvan korkeuden;title-attribuutti antaa lisätietoa kuvasta.
Videotutoriaali
1. Mitä elementtiä käytetään kuvien lisäämiseen HTML-dokumenttiin?
2. Mikä attribuutti on pakollinen, jotta <img>-elementti näyttää kuvan?
3. Mitä alt-attribuutti tarjoaa kuvalle?
4. Mitä tapahtuu, jos src-attribuutissa määriteltyä kuvaa ei voida ladata?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Awesome!
Completion rate improved to 3.13
Kuvien Käsittely HTML:ssä
Pyyhkäise näyttääksesi valikon
Kuvat
Kuvat ovat keskeisessä roolissa verkkosivujen visuaalisen ilmeen parantamisessa ja tiedon välittämisessä. HTML:ssä kuvat lisätään käyttämällä <img>-tägiä.
Kuvien lisääminen
<img>-tägiä käytetään kuvien lisäämiseen HTML-dokumenttiin. Toisin kuin useimmilla HTML-tägeillä, <img>-tägillä ei ole sulkevaa tägiä, vaan se on itsestään sulkeutuva.
Esimerkki:
<img src="image.jpg" alt="Description of the image">
Yllä olevassa esimerkissä:
<img>-tägiä käytetään kuvan lisäämiseen;src-attribuutti määrittää kuvatiedoston lähteen (URL);alt-attribuutti tarjoaa vaihtoehtoisen tekstin kuvalle. Tämä teksti näytetään, jos kuvaa ei voida ladata tai saavutettavuuden vuoksi.
Ennen kuin tarkastellaan käytännön esimerkkiä, tutustutaan img-tunnisteen olennaisiin attribuutteihin ja siihen, miten ne vaikuttavat sisällön esittämiseen.
Kuvan attribuutit
src: Määrittää kuvatiedoston lähteen (URL-osoitteen). Tämä attribuutti on pakollinen, jotta<img>-tunniste näyttää kuvan;alt: Tarjoaa vaihtoehtoisen tekstin kuvalle.alt-attribuuttiin määritelty teksti näytetään, jos kuvaa ei voida ladata tai saavutettavuuden vuoksi. Tämä on tärkeää käyttäjille, jotka käyttävät ruudunlukuohjelmia, tai tilanteissa, joissa kuvaa ei voida näyttää;width: Määrittää kuvan leveyden pikseleinä tai prosentteina ylätason säiliöstä;height: Määrittää kuvan korkeuden pikseleinä tai prosentteina ylätason säiliöstä;title: Tarjoaa lisätietoa kuvasta. Usein näytetään työkaluvihjeenä, kun käyttäjä vie hiiren kuvan päälle.
Esimerkki:
index.html
Yllä olevassa esimerkissä:
<img>-elementti lisää kuvan verkkosivulle;src-attribuutti määrittää kuvatiedoston lähdeosoitteen;alt-attribuutti asettaa vaihtoehtoisen tekstin kuvalle;width-attribuutti määrittää kuvan leveyden;height-attribuutti määrittää kuvan korkeuden;title-attribuutti antaa lisätietoa kuvasta.
Videotutoriaali
1. Mitä elementtiä käytetään kuvien lisäämiseen HTML-dokumenttiin?
2. Mikä attribuutti on pakollinen, jotta <img>-elementti näyttää kuvan?
3. Mitä alt-attribuutti tarjoaa kuvalle?
4. Mitä tapahtuu, jos src-attribuutissa määriteltyä kuvaa ei voida ladata?
Kiitos palautteestasi!