Valikko:

Kuvan liittäminen dokumenttiin

Kuva liitetään dokumenttiin tagilla <img />. Jotta kuva näkyy, pitää tagiin kirjoittaa parametri src, joka kertoo mikä kuva pitää näyttää, esimerkiksi Nyt selain hakee html-tiedoston vierestä tiedostoa kuva.jpg, joka näytetään kuvana sivulla.

Sijaintipaikka voi olla myös esimerkiksi kuvat kansiossa. Tällöin kuvan nimeen pitää liittää kansion nimi, esimerkiksi

Nyt selain hakee html-tiedoston vierestä kuvat-kansiota ja sen sisältä tiedostoa kuva.jpg.

Viereinen kuva on saatu dokumenttiin kirjoittamaa tagi:

eli kuvat kansiossa on olemassa kuva gerbiili.jpg.

Käytettävät kuvamuodot

Selaimen täytyy tukea kuvan tallennusmuotoa, jotta se voitaisiin näyttää. Nykyään turvallisimmat kuvamuodot ovat jpg, gif ja png.

Kuvan parametrejä voi olla myös:

alignleft, rightVie kuvan vasemmalle tai oikealle ja mahdollistaa tekstin kierron
borderNumeerinen arvo (pikseleitä)Piirtää kuvalle kehyksen halutulla paksuudella
hspaceNumeerinen arvo (pikseleitä)Tekee horisontaalisen marginaalin kuvaan
vspaceNumeerinen arvo (pikseleitä)Tekee vertikaalisen marginaalin kuvaan
alt"merkkijono"Jos kuvaa ei löydy, tulee sen tilalle tämä teksti.
Tekee popup-kuvatekstin, jos selain tukee sitä (IE).
widthPikseleinä tai prosentteina (suhteessa ikkunan leveyteen) Kuvan leveys
heightPikseleinä tai prosentteina (suhteessa ikkunan leveyteen) Kuvan korkeus

Esimerkki

Viereinen gif animoitu kuva on saatu näkyviin seuraavalla html koodilla:

<img src="kuvat/anim.gif" width="200" align="left" border="1" hspace="20" vspace="10" />

Huomioitavaa

Kuvan korkeuden (height) ja leveyden (width) pakottaminen samaan aikaan saattaa vääristää kuvan suhteita.


Tekstin kierto voidaan keskeyttää rivinvaihdon parametrilla clear esimerkiksi: <br clear="left">

Jos haluaa välttämättä liittää isokokoisen (kuvatiedosto) kuvan sivuilleen, voidaan kuvasta tehdä kaksi versiota. Toinen kuva on kooltaan pienempi ja se näytetään sivuilla oletuksena. Toinen versio on kooltaan iso ja se avautuu sivun käyttäjälle esimerkiksi pienempää kuvaa klikkaamalla. Tästä enemmän linkkejä käsittelevässä osassa.

Taustakuva

Taustakuva määritellään body tagin parametrilla background, joka saa arvoksi taustakuvan sijainnin.
Esimerkiksi:

<body background="kuvat/taustakuva.jpg" >

Huomaa, että et kirjoita dokumenttiisi kahta body-osaa, vaan laitat olemassaolevan bodyn parametriksi background="...."

Taustakuvien kanssa kannatta olla varovainen. Ne tekevät usein sivuista levottomia. Vaikka ensisilmäyksellä hieno tausta voikin näyttää vaikuttavalta, taustakuvaan saattaa kyllästyä yllättävänkin nopeasti. Pääsääntönä on, että taustakuva ei saisi viedä huomiota sivun muusta sisällöstä, joten yleensä taustakuvat yritetään tehdä mahdollisimman vaaleiksi, jopa hailakoiksi.

Jos taustakuvan haluaa kiinnitetyksi paikalleen, ns. vesileimakuvaksi, taytyy taustakuvan lisäksi määritellä parametri bgProperties="fixed" eli esimerkiksi:

<body background="kuvat/taustakuva.jpg" bgProperties="fixed">

Link -kuva

Selaimen osoiteriville voit lisätä kuvan laittamalla seuraavanlaisen rivin head-osioon: <link rel="icon" href="kuvanpaikka/kuva.ico" />

Kuvan muotona on tällöin yleensä .ico , joka on Microsoft Windows icon -kuvamuoto. Tätä kuvamuotoa käytetään esimerkiksi ohjelmien tunnuksina ja ainakin Gimp-kuvankäsittelyohjelma osaa tallentaa kuvan tähän muotoon. Kuvan kooksi kannattaa valita mieluiten 16x16 pikseliä.

Esimerkki:
Tämän sivun head-osiossa on rivi:

<link rel="icon" href="kuvat/ikoni.ico" />

Esimerkkiympäristö

Kuvasta yleisesti ja kuvamuodoista

Kuvat voidaan jakaa kahteen luokkaan sen mukaan missä muodossa ne ovat tallennettu koneelle: bittikartta- tai vektorikuvana.

Vektorikuva

Vektorikuvassa kuva ajatellaan muodostuvan erilaisista graafisista muodoista, kuten viivoista, palloista jne. Tällöin esimerkiksi viivasta tarvitaan tallentaa vain viivan lähtöpiste, loppupiste, viivan paksuus ja väri. Pallosta voitaisiin tallentaa keskipiste, säde, viivan paksuus ja väri. Todellisuudessa ominaisuuksia on tietenkin enemmän.

Vektorikuvan hyötyjä on, että sitä voi suurentaa ja pinentää rajattomasti ilman että kuvan laatu kärsii. Huonoja puolia on, että kaikki www-selaimet eivät tue vektorigrafiikkakuvia, tai käyttäjä joutuu asentamaan selaimeen laajennoksia.

Bittikarttakuva

Bittikarttakuvassa kuva muodostetaan pienistä värineliöistä tai suorakaiteista, eli pikseleistä. Mitä tiheämpään laitamme pikseleitä, sitä tarkemmalta kuva näyttää. Tätä ominaisuutta kutsutaan resoluutioarvoksi ja se mitataan yleensä arvolla, joka kertoo kuinka monta pikseliä on tuumalla.

Toinen arvo, joka vaikuttaa kuvan laatuun on värien määrä (yleensä RGB arvo, eli punaisen, vihreän ja sinisen värin määrä). Jos kuva on 24 bittinen, niin käytettävissä olevia värejä on noin 16,7 miljoonaa, toisaalta yhdellä bitillä (0 tai 1) voidaan kuvata vain kaksi väriä. Luonnollisesti värien määrän lisääntyessä kuvan vaatima tallennustila ja sen myötä kuvan latautumisen vaatima aika lisääntyy.

Bittikartan hyviä puolia on, että kaikki kuvat voidaan esittää bittikarttamuodossa ja kaikki selaimet osaavat esittää bittikarttamuodoista ainakin gif, jpg ja png. Huonoja puolia on että kuvia ei pysty kauheasti suurentamaan ilman, että kuva muuttuu sumeaksi.

Lopuksi

Kuvien julkaisemisessa täytyy siis ottaa huomioon kuvan vaatima tallennustila, eli käytännössä kuvan vaatima latausaika. Tekemiesi sivujen käyttäjä tuskin haluaa odotella sivun latautumista iät ja ajat. Yleensä sivun tekijä onkin käsitellyt esimerkiksi kamerasta ladatut kuvat siten, että näiden kokoa on pienennetty ja resoluutiota ja värejä on vähennetty.

Keskeiset kuvamuodot, joita nettisivuilla käytetään ovat gif, jpeg ja png. Tunnistat nämä siitä, että kuvan nimessä on päätteet .gif .jpg tai .png . Yleisesti suositeltu sääntö on joskus ollut, että jos kuva on piirrostyyppinen, niin kuvan muodoksi valitaan gif ja jos kuva on valokuva, niin kuvamuodoksi valitaan jpeg. Gif-muoto tukee animaatiota. Gif ja png-muodot tukevat taustan läpinäkyvyyttä.

Tehtävä: