Basic Guide to HTML

Adding colour to your lives pages

Ok. some browsers have colours with names and you may be tempted to use them
Don't

In most cases they are specific to that browser and as a result other browsers will get confused.
Now the bad news. The best thing to use for colour is the 6 digit RBG code. However unless you have a technical brain it is not obvious what colour these codes relate to.

Ok the first to digits are how much red, the next 2 how much green and the last two how much blue,
"00" being none and "FF" being maximum.
Thus #000000 is black and #ffffff is white.
The # symbol tells the browser that the following number is in hex.

But ever helpful I have made a little program to help.

Unfortunately it only works if you have Javascript enabled on your browser. But you will be able to find a list of colours and their codes Here.

Ok lets assume you have the colour you want to use. How do you tell the browser?
Well there are 2 ways.

  1. If you want all the text that colour you can say so in the body tag
    <BODY text=#FF9999>
    Which would make all the text on the page this colour
  2. Or if you just want a small bit of text to be a particular colour you can use the <FONT COLOR=#99ff99> like we did for the font size.
    In fact you can combine them.<FONT COLOR=#9999ff SIZE=4>

OK thats the text dealt with but what about the background?
Back to the body again. bg(for back ground)color(for colour)
<BODY bgcolor=#FFCC00>

So the whole page would be this colour

Obviously you can combine this with the text command to make the page what ever colour you want.

<BODY bgcolor=#FFCC00 text=#FF9999>

But as you can see from these examples some are more useful than others.
It is vitally important that you check that your text (and links) can easily be read over the back ground.
You could also give some thought to the colour blind
Assuming you want people to come back to your site

<BODY bgcolor=#9999CC text=#FFFF00>

<BODY bgcolor=#003366 text=#FFFFCC>

<BODY bgcolor=#ff0000 text=#00ff00>

<BODY bgcolor=#999966 text=#990066>

Whilst we are on the subject of colour there are 3 more tags that go in the body tag that are important. These relate to the colours of the links you used to get to other pages (we will deal with the details of these later)

link=
The colour of a link
vlink=
The colour of the link once you have visited it
alink=
The colour of the link as the browser is looking for the page. So you know it is doing something :)

So a basic body tag will look like
<BODY bgcolour=#ffffff text=#000000 link=#0000ff alink=#ff0000 vlink=#00ffff>

Ok now we have a nice colourful page.
But the whole point of the Web is the way you can follow links and wander around the world.. So I expect you want to do that :)