Kuvat

Kaekki on kaanista ku vuan silimä tottuu.

WWW-sivujen kuvat ovat erillisissä tiedostoissa. Kuva lisätään sivulle <img>-komennolla. Tarkenne src kertoo kuvatiedoston polun ja nimen, height ja width kuvan korkeuden ja leveyden kuvapisteinä. Tarkenne alt määrittelee tekstin, joka näytetään silloin, kun selain ei näytä kuvaa (alt=alternate). Joissakin selaimissa alt-teksti näkyy, kun hiirtä pidetään jonkin aikaa kuvan päällä. Tarkenne border määrittelee kuvan reunaviivan paksuuden ja align kuvan kohdistuksen tekstiin nähden.

Suositeltavimmat tiedostomuodot kuvien esittämiseen WWW-sivuilla ovat JPEG (tunnus .jpg tai .jpeg) valokuville ja maalauksille sekä PNG (tunnus .png) piirroksille.

Kuvan leveys ja korkeus kannattaa ilmoittaa, jos ne vain suinkin ovat tiedossa. Selaimet varaavat silloin kuvalle sopivan tilan jo ennen lataamista eikä sivun asettelu muutu, kun kuva latautuu. Kuvien asetteluun tekstin suhteen voi tarvittaessa käyttää lohkoja.

Kuvan varaama tila muistissa ja siirtonopeus tietoverkossa eivät pienene vaikka määrittelisit HTML-koodissa kuvan alkuperäistä pienemmäksi. Muokkaa kuva sopivan kokoiseksi kuvankäsittelyohjelmalla ja pane muistiin sen koko kuvapisteinä.

Esimerkki:

<p><img src="kuvat/naama.png" width="80"height="93" border=0 align="top" alt="Rane edestä"> Rane etupuolelta.</p>

Rane etupuolelta.

Mitä tarkoittaa align="top"? Mitä muita vaihtoehtoja tasaukselle on?

Tekstin saa kiertämään kuvaa lisäämällä tyyliarkkiin määrityksen float. Laita tyyliarkkiin esimerkiksi rivi

img.oikea{float:right}

ja html-koodiin kuvan määritys

(Pää ja lamput sumussa on tehty PovRay-ohjelmalla, jolla voi luoda kolmeulotteisia kappaleita esittäviä rasterikuvia.)

Tehtävä

Selvitä, miten tiedostomuodot PNG ja JPEG eroavat toisistaan ja millaisten kuvien esitykseen ne sopivat parhaiten.
Miten kuvan ominaisuudet vaikuttavat kuvan latautumisaikaan? Miten niihin voi vaikuttaa?
Kuvaa itsesi digitaalikameralla. Muokkaa kuvaa niin, ettei sen koko ylitä viittä kilotavua.