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

1. src: Määrittää kuvatiedoston lähteen (URL-osoitteen). Tämä attribuutti on pakollinen, jotta <img>-tunniste näyttää kuvan;
2. 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ää;
3. width: Määrittää kuvan leveyden pikseleinä tai prosentteina ylätason säiliöstä;
4. height: Määrittää kuvan korkeuden pikseleinä tai prosentteina ylätason säiliöstä;
5. title: Tarjoaa lisätietoa kuvasta. Usein näytetään työkaluvihjeenä, kun käyttäjä vie hiiren kuvan päälle.
   Esimerkki:

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