Kuvat

HTML kuvat


HTML-sivuille voidaan lisätä kuvia.


Esimerkkejä

Insert images
Kuvan esittäminen Web-sivulla.

Insert images from different locations
Toisessa kansiossa tai toisella palvelimella sijaitsevan kuvan esittäminen Web-sivulla.

(Lisää esimerkkejä sivun alalaidassa.)


Image-tagi ja src-attribuutti

HTML:ssä kuvat määritetään <img>-tagilla.

<img> tagi on sisällötön, sillä on vain attribuutteja eikä lainkaan lopputagia.

Kuvan näyttämiseksi sivulla tarvitsee käyttää src-attribuuttia (source). Src-attribuutin arvoksi annetaan näytettävän kuvan URL-osoite.

Kuvan määrittämisen syntaksi on seuraava:

<img src="url">

URL ilmaisee kuvan sijannin. Jos kuvan nimi on "boat.gif" ja se sijaitsee hakemistossa "images" osoitteessa "www.w3cschools.com", tulee URLiksi:
http://www.w3schools.com/images/boat.gif.

Selain sijoittaa kuvan siihen kohtaa sivua, jossa <img>-tagi sijaitsee. Jos <img>-tagi sijoitetaan esimerkiksi kahden kappaleen väliin, näyttää selain ensiksi ensimmäisen kappaleen, sen jälkeen kuvan ja viimeiseksi toisen kappaleen.


Alt-attribuutti

Alt-attribuuttia käytetään määrittämään teksti joka näytetään mikäli kuvaa ei voida näyttää (kuva ei ole vaikkapa vielä latautunut). Sivun laatijan tulee antaa alt-attribuutille sopiva arvo, eli teksti joka näytetään:

<img src="boat.gif" alt="Big Boat">

Alt-attribuutti kertoo lukijalle mitä hän jää paitsi jos kuva ei ole näkyvissä. On hyvä käytäntö lisätä jokaiselle kuvalle alt-attribuutti esimerkiksi tekstiselainten takia.


Huomioita ja vinkkejä

Jos HTML-tiedosto sisältää kymmenen kuvaa tarvitaan sivua varten yksitoista tiedostoa. Kuvien latautuminen vie aikaa, joten niitä kannattaa käyttää harkiten.


Lisää esimerkkejä

Background image
Taustakuvan lisääminen HTML-sivulle.

Aligning images
Kuvien asemointi.

Let the image float
Kelluva (floating) kuva.

Adjust images to different sizes
Kuvan koon säätäminen.

Display an alternate text for an image
Alt-attribuutin käyttö.

Make a hyperlink of an image
Kuvan käyttö linkkinä.

Create an image map
Kuvakartan luominen. Kuvakartta sisältää alueita, jotka toimivat linkkeinä.

Turn an image into an image map
Kuvan muuttaminen kuvakartaksi.


Kuvatagit

Tagi Kuvaus
<img> Määrittää kuvan
<map> Määrittää kuvakartan
<area> Määrittää klikattavan alueen kuvakartan sisällä


 

AttachmentSize
11kuvaharjoituksia.doc39 KB