Kuvien liittäminen HTML-dokumenttiin

Osioissa 2. Sisältö on opiskeltu kuvan käsittelemistä sellaiseen muotoon, että se voidaan liittää kotisivulle. Tässä alakappaleessa opiskellaan miten kuva liitetään HTML-dokumenttiin.

Kuvan liittämisessä HTML-dokumenttiin käytetään img-elementtiä. Selain lataa kuvan img-elementin paikalle, eli siis siihen kohtaan HTML-dokumentin sisältöä, jossa img-elementtiä käytetään.

img-elementin kanssa käytetään src-, alt- ja title-attribuutteja:

  • src- attribuutti kertoo selaimelle paikan, jossa kuva sijaitsee.
  • alt- attribuutti määrittää tekstin, joka näytetään, jos kuvaa ei pystytä näyttämään tai sitä ei ole saatavilla. Tämä on pakollinen attribuutti tuotettaessa standardin mukaista HTML-dokumenttia.
  • title- attribuutti kertoo tarkemman sanallisen otsikon kuvalle. Sen saa näkyviin useimmissa selaimissa viemällä hiiren kursori kuvan päälle.

Esimerkiksi kuvan, jonka nimi on mina ja se on tallennettu jpg -muotoon sijoittaminen HTML-dokumenttiin:

<img src="mina.jpg" alt="minun kuva" title="mina uimassa" />