8.1 De achtergrondkleur

Je kan de achtergrondkleur van je pagina wijzigen. In plaats van de huidige witte achtergrond kan je er een kleur aangeven dat je maar wenst.

Om een kleur in HTML aan te geven, zijn er verschillende mogelijkheden. We kunnen gewoon de kleur schrijven, weliswaar in het Engels (bv. ‘green’).
Maar we kunnen het ook in hexadecimale waarden opgeven. Hexadecimaal is met cijfers en letters, waarmee je de kleurcode exact doorgeeft. Dankzij het opgeven van hexadecimale waarden kan je vrijwel alle kleuren en tinten gebruiken; dit is echter niet mogelijk als je het op de andere manier doet: gewoon de kleurnaam intypen, bv. ‘yellow’.

Om de achtergrondkleur te wijzigen, moet je in het begin van je document, bij <body> een parameter extra meegeven.
Dit wordt bijvoorbeeld:

<body bgcolor="yellow">

Als je een hexadecimale waarde wilt ingeven, kan je dit doen als volgt:

<body bgcolor="#00a3b4">

Let op het spoorwegteken (#) dat voor de cijfers/letters komt.
Bovenstaande voorbeeld zal volgende kleur als achtergrondkleur geven:

 

Dit zijn enkele veelgebruikte waarden. Er zijn nog veel meer variaties mogelijk en iedere kleur is dan ook wel te krijgen in de HTML-code:

Code
Kleur
Engelse naam
#000000
 
  Zwart		 Black
#FFFFFF
 
  Wit		 White
#FF0000
 
  Rood		 Red
#00FF00
 
  Groen		 Green
#0000FF
 
  Blauw		 Blue
#FFFF00
 
  Geel		 Yellow
#00FFFF
 
  Lichtblauw		 Lightblue
#FF00FF
 
  Paars		 Purple

Een volledige lijst geven van alle hexadecimale waarden is onmogelijk, het zijn bijna oneindig veel mogelijkheden.
Je kan op het Internetadres http://www.wheresmysocks.com/rgbhex/rgbhex1.5.zip een programma downloaden dat je de meest gebruikte kleuren met hun code geeft.

We gaan onze voorbeeldpagina een rustig lichtblauw geven, we gaan bv. de kleurcode #99CCFF gebruiken:

<html>
<head>
<title>Mijn persoonlijke website</title>
</head>
<body bgcolor="#99CCFF">
<h1>Mijn persoonlijke website</h1>
<p>U bent hier beland op mijn persoonlijke website!</p>
<h2>Beginpagina</h2>
<p>U bent op de <u>beginpagina</u> van mijn <u>persoonlijke website</u>, van hieruit kan u naar de rest van mijn website surfen.</p>
<h3>Welkom</h3>
<p>Ik heet u van harte welkom op mijn website. Veel plezier op deze site, <i>en kom nog eens een keertje terug</i>!</p>
<p align="right">Deze website wordt regelmatig bijgewerkt.</p>
<p>Op mijn <b>persoonlijke website</b> kan je heel wat informatie vinden over mijzelf, en mijn interesses.</p>
<ul>
  <li>Over mijzelf</li>
  <li>Over mijn hobbies
      <ol>
        <li>Fotografie</li>
        <li>Website's maken</li>
      </ol>
    </li>
  <li>Enkele links</li>
</ul>
</body>
</html>

Klik hier om de voorbeeldpagina te zien.

Klik hier om naar de 'tekstkleur' te gaan.


Seniorennet