3.2 Body

Kuten kurssin alussa kävi ilmi, sivu koostuu kahdesta pääelementistä head sekä varsinaisesta näkyvästä osasta body. Tälle bodylle löytyy myös attribuutteja, ja käymme nyt läpi niistä keskeisimmät.

Värit

Body-elementille voidaan antaa useita sivun väreihin liittyviä määritteitä. Tutustutaan ensimmäiseksi niistä ehkä kaikista keskeisimpään eli taustaan. Taustaväri määritellään attribuutilla bgcolor (BackGroundCOLOR):

<body bgcolor="#808080">

Tässä sivun taustaväriksi määritetään sininen. Kokeile tätä vaikka sivu_2.html -tiedostoon.

Suosittelen, että kokeilet kaikkia tässä luvussa esitettyjä attribuutteja esimerkiksi tuohon sivu_2.html-tiedostoon. Testaamalla niitä ne jäävät paremmin mieleen.

Kaiken sivulla olevan tekstin väri voidaan kerralla vaihtaa mustasta joksikin muuksi attribuutilla text:

<body bgcolor="#808080" text="#800000">

Selain näyttää linkit yleensä muusta tekstistä poiketen erivärisenä ja alleviivattuna. Bodyn attribuuteilla voidaan muuttaa nekin sellaisiksi kuin itse haluamme. Attribuutteja on kolme:

  • linkin väri (link)
  • sellaisen linkin väri, jossa on jo vierailtu (visited link, vlink)
  • aktiivisen linkin väri (active link, alink)
Esimerkki
<body bgcolor="#808080" text="#800000"> link="#008080" vlink="#00FF00" alink="#FF0000">

Avaa [tästä] esimerkkisivu.

Pari varoituksen sanaa linkkien väreistä. On ehdottoman tärkeää, että käyttäjä (eli selaaja) tietää missä linkit sijaitsevat ja miltä ne näyttävät. Jos aiot muuttaa linkkien värejä niin muista että käyttäjää ei kannata sekoittaa tai hämätä oudoilla värivalinnoilla.

Taustakuva

Lopuksi vielä yksi jippo: sivun taustana voidaan käyttää myös kuvaa. Jos selain pystyy näyttämään kuvia (yleensä ne pystyvät) niin tällöin taustaväri-attribuutti menettää merkityksensä, sillä taustakuva korvaa taustavärin.

Esimerkki 1
<body background="../pics_ext/spiral.gif"
 bgcolor="#808080" text="#800000"> link="#008080" vlink="#00FF00" alink="#FF0000">

Avaa [tästä] esimerkkisivu.

Taustakuva kopioituu automaattisesti sekä vasemmalta oikealle että ylhäältä alaspäin. Avaa [tästä] toinen esimerkkisivu.

Taustakuvan ja -värien käyttö saattaa hyvn hyvin helposti tehdä sivusta vähemmän luettavan, joten käytä niitä varoen, vaikka ne aluksi tuntuvatkin niin kivoilta.

Jos käytät aiemman esimerkin lehtikansio-tyyppistä taustakuvaa, voisi olla fiksua siirtää vasenta marginaalia vähän kauemmas ikkunan reunasta, jotta teksti ei mene kuvan päälle:

Esimerkki 2
<body background="../pics_ext/Spiral.gif" 
leftmargin="80" topmargin="20" rightmargin="20" bottommargin="20" marginwidth="40">

Korjattu sivu

Sivun vasenta (ja myös yläreunan) marginaalia on lisätty, jolloin teksti asettuu nätisti paikoilleen

Lisäksi kannattaa pitää mielessä sivun taustan ja tekstien värejä valittaessa se, että miltä sivu näyttää tulostettuna. Jotkut selaimet kun jättävät oletusarvoisesti taustavärit huomioimatta eli taustaksi tulee aina valkoinen riippumatta siitä, mitä bcolor-attribuutti määrää. Jos siis olet valinnut taustaväriksi mustan ja tekstin väriksi valkoisen, paperille ei välttämättä tulostu mitään!