HTML-dokumenttiin voidaan lisätä kuvia, kuvakarttoja, taustakuvia, sekä taustavärejä elävöittämään ja visualisoimaan sivua.
- Kuva
- IMG-tagilla voidaan html-dokumenttiin laittaa kuvia.
- Taustakuva
- HTML-dokumenttiin voidaan laittaa useisiin elementteihin taustakuva.
- Taustaväri
- HTML-dokumenttiin voidaan laittaa useisiin elementteihin taustaväri.
- Kuvakartta
- Kuvakartoilla voidaan tehdä kuvasta linkkejä, jotka voivat olla minkämuotoisia tahansa.
Kuva (img)
IMG-tagilla voidaan HTML-dokumenttiin laittaa kuvia. Tagi sisältää pakolliset attribuutit "src" ja "alt". Src-attribuutti kertoo kuvan polun, eli kertoo mikä kuva ja mistä kuva pitää hakea. Alt-attribuutti kertoo kuvan kuvauksen, joka näytetään, jos kuvaa ei näytetä selaimessa. XHTML:ssä tagi tulee lopettaa.
HTML
<img src="polku" alt="kuvaus">
XHTML
<img src="polku" alt="kuvaus" />
Esimerkiksi
<img src="kuvat/hevonen.gif" alt="kuva hevosesta">
Esimerkissä kuva sijaitsi kansiossa, jonka nimi oli "kuvat" ja kuvan nimi oli hevonen. Tiedostotyyppinä esimerkissä oli .gif.
Taustakuva (background)
HTML-dokumenttiin voidaan laittaa useisiin elementteihin taustakuva. Tämä onnistuu background-attribuutilla. Attribuutin arvoksi laitetaan kuvan polku, eli kuvan sijainti.
background="polku"
Esimerkiksi
<div background="hevonen.gif">Tässä taustakuvana on hevonen.</div>
Taustaväri (bgcolor)
HTML-dokumenttiin voidaan laittaa useisiin elementteihin taustaväri. Tämä onnistuu bgcolor-attribuutilla. Arvoina voidaan käyttää hex-numeroa, rgb-arvoja, tai nimiä.
bgcolor="nimi" bgcolor="hex-koodi" bgcolor="rgb-arvo"
Esimerkiksi
bgcolor="red" bgcolor="#000000" bgcolor="rgb(100,150,50)"
Kuvakartta (map)
Kuvakartoilla voidaan tehdä kuvasta linkkejä, jotka voivat olla minkämuotoisia tahansa. Voidaan esimerkiksi tehdä ympyrän muotoinen linkki kuvasta, jossa on esimerkiksi pallo.
Kuvakartan tekeminen aloitetaan map-tagilla, jonne laitetaan name-attribuutti kertomaan kuvakartan nimi.
<map name="nimi"> </map>
MAP-tagin sisään laitetaan area-tagi, jonka sisään laitetaan shape-, alt-, coords- ja href-attribuutit. Shape-attribuutti kertoo linkitetyn alueen tyypin. Shapen mahdollisia arvoja ovat; circle (ympyrä), rect (suorakulmio) ja poly (monikulmio). Alt-attribuutti on normaalista kuvastakin tuttu attribuutti, joka kertoo kuvan kuvauksen, jos kuvaa ei voida näyttää. Coords-attribuutti kertoo linkitettävän alueen koordinaatit. Href-attribuutti kertoo linkin polun.
Linkitettävän alueen koordinaatit kerrotaan vasemmasta yläkulmasta mitattuna. Arvoina tulee käyttää pikseleitä (px).
<map name="nimi"> <area shape="tyyppi" alt="kuvaus" coords="arvo" href="polku"> </map>
Circle (ympyrä)
Shape-attribuutin arvo "circle" kertoo, että linkitettävä alue on ympyrän muotoinen. Circle tarvitsee kolme koordinaattia, jotka ovat ympyrän keskipiste vasemmasta laidasta, ympyrän keskipiste ylhäältä ja ympyrän säde.
Alla esimerkki kuvakartan käytöstä. Ensin on koodi esimerkki ja sen alapuolella toimiva kuvakartta. Koordinaatit 34,35,20 kertovat, että ypyrän keskipiste on 34 pikseliä vasemmasta laidasta ja 35 pikseliä ylhäältä ja että ympyrän säde on 20 pikseliä. Href-attribuutin polku on #kuvakartta_circle, joten sitä klikkaamalla sivu latautuu tämän esimerkin kohdalle. Polun tilalla voisi olla esimerkiksi jokin html tiedosto.
<map name="kuvakartta1"> <area shape="circle" alt="esimerkki_circle-attribuutista" coords="34,35,20" href="kuvakartta_circle"> </map> <img src="kuvat/kuvakartta_esimerkki.gif" alt="esimerkki_circle-attribuutista" usemap="#kuvakartta1">
Rect (suorakulmio)
Shape-attribuutin arvo "rect" kertoo, että linkitettävä alue on suorakulmion muotoinen. Suorakulmion muotoisessa alueessa tulee ilmoittaa neljä (4) koordinaattia. Kaksi ensimmäistä kertovat alueen alkamiskohdan (vasemmalta ja ylhäältä) ja kaksi viimeistä kertovat loppumiskohdan (vasemmalta ja ylhäältä).
Alla esimerkki kuvakartan käytöstä. Ensin on koodi esimerkki ja sen alapuolella toimiva kuvakartta. Href-attribuutin polku on #kuvakartta_rect, joten sitä klikkaamalla sivu latautuu tämän esimerkin kohdalle. Polun tilalla voisi olla esimerkiksi jokin html-tiedosto.
<map name="kuvakartta2"> <area shape="rect" alt="esimerkki_kuvakartasta2" coords="58,55,119,87" href="#kuvakartta_rect"> </map> <img src="kuvat/kuvakartta_esimerkki.gif" alt="esimerkki_kuvakartasta2" usemap="#kuvakartta2">
Poly (monikulmio)
Shape-attribuutin arvo "poly" kertoo, että linkitettävä alue on monikulmio. Monikulmio voi olla minkämuotoinen tahansa ja koordinaatteja voi olla rajaton määrä. Monikulmion koordinaateissa kerrotaan jokaisen kulman vaaka- ja pystysijainti.
Alla esimerkki kuvakartan käytöstä. Ensin on koodi esimerkki ja sen alapuolella toimiva kuvakartta. Href-attribuutin polku on #kuvakartta_poly, joten sitä klikkaamalla sivu latautuu tämän esimerkin kohdalle. Polun tilalla voisi olla esimerkiksi jokin html-tiedosto.
<map name="kuvakartta3"> <area shape="poly" alt="esimerkki_kuvakartasta3" coords="72,10,188,10,188,89,133,89,133,43,72,43" href="#kuvakartta_poly"> </map> <img src="kuvat/kuvakartta_esimerkki.gif" alt="esimerkki_kuvakartasta3" usemap="#kuvakartta3">
