HTML-tausta

Hyvä tausta tekee sivustosta erityisen hienon.

Esimerkki

Hyvä tausta ja värit
Esimerkki hyvästä taustavärin ja tekstin värin yhdistämisestä, joka tekee sivun tekstistä helppoa lukea.
Huonosti yhdistetyt tausta ja värit
Esimerkki huonosti yhdistetyistä taustavärillä ja tekstin värillä, joka tekee sivun tekstistä vaikeasti luettavaa.

(Lisää esimerkkejä löytyy tämän sivun alareunasta)

Tausta (Backgrounds)

<body> Sisältää kaksi konfiguraatiota taustalle. Tausta voi olla väri tai kuva.

Taustaväri (Bgcolor)

Taustaväri-ominaisuus asettaa taustan tiettyyn väriin. Ominaisuuden arvo voi olla heksadesimaalinen luku, RGB-arvo tai väri nimi.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Kaikki seuraavat koodit asettavat taustavärin mustaksi.

Tausta (Background)

TaustaoMINAisuus asettaa taustan kuvaksi. Ominaisuuden arvo on kuvan URL. Jos kuvan koko on pienempi kuin selaimen ikkuna, kuva kopioidaan koko selaimen ikkunaan.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

URL voi olla suhteellinen osoite, kuten ensimmäisessä rivissä oleva koodi. Se voi myös olla absoluuttinen osoite, kuten toisessa rivissä oleva koodi.

Vinkki:Jos aiot käyttää taustakuvaa, muista seuraavat kohdat:

  • Onko taustakuva lisännyt sivun latausaikaa? Vinkki: kuvatiedostot eivät saisi olla suurempia kuin 10k.
  • Onko taustakuva sopivasti yhdistetty sivun muihin kuvituksiin?
  • Onko taustakuva sopivasti yhdistetty sivun tekstin väreihin?
  • Näyttääkö kuva tasaiselta, kun se on levitetty sivulle?
  • Onko taustakuva viedyt tekstin huomion?

Perushuomiot - hyödyllisiä vinkkejä:

<body>-tagin taustaväri (bgcolor), tausta (background) ja teksti (text) -ominaisuudet on poistettu käytöstä uusimmassa HTML-standardissa (HTML4 ja XHTML). W3C on poistanut nämä ominaisuudet suosituksistaan.

Välimuistissa olevaa tyylioppikirjaa (CSS) tulisi käyttää HTML-elementtien asettelun ja näyttöominaisuuksien määrittämiseen.

Lisää esimerkkejä

Vahva käyttöiho taustakuva
Esimerkki, jossa taustakuva ja tekstin väri tekevät sivun tekstistä helposti luettavaa.
Vahva käyttöiho taustakuva 2
Toinen esimerkki, jossa taustakuva ja tekstin väri tekevät sivun tekstistä helposti luettavaa.
Heikko käyttöiho taustakuva
Esimerkki, jossa taustakuva ja tekstin väri tekevät sivun tekstistä vaikeasti luettavaa.