Title-HTML.jpg
intro | tags | color | attributes | images | embedding | tables | links | | Exercises: 1.Homepage 2. Website
Need more help? Consult the w3schools.com tutorials

Table of Contents


Colour values can be created in various tags like FONT and BODY. You can define the VALUE for a colour in one of two ways:
  1. Use specific text values for colours (ie BGCOLOR="lightblue")
  2. Use a HEXIDECIMAL value for colours (ie. BGCOLOR="#CCCCFF")

Although the first method is EASIER, it limits you to only a dozen or so preset colours to choose from. The HEXIDECIMAL method gives you a selection of MILLIONS of possible colours to choose from, and lets you better match the colour of your webpages with photoshop graphics.

Colour is expressed as a six digit "HEXIDECIMAL" number that represents the amount of RED, GREEN and BLUE you wish to mix together.
"#RRGGBB"

For example:
<FONT COLOR="#993300">
would have
RED=99
GREEN=33
BLUE=00

Note that COLOR must be spelled the American way in HTML - this is critical!

Hexidecimal means that a single digit has a range that can go HIGHER than just 9 - it can go all the way to "F"

0
1
2
3
4
5
6
7
8
9
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15

So the HIGHEST a RED, GREEN or BLUE value can go to is "FF"

Mixing the three colours together gives you a range of MILLIONS of possible colours, but we'll keep it simple by repeating the digits in pairs:

RED = "#FF0000"
GREEN = "#00FF00"
BLUE = "#0000FF"

You can also change the color of your webpage background by adding a BGCOLOR parameter to the existing BODY tag... ie: try modifying the BODY tag as follows:
<BODY BGCOLOR="CCCCFF">
What colour do you get?

USER FRIENDLY COLOURS
"Bright" saturated colours (ie "FF0000", or 00FFFF" etc) are poor choices for use on a webpage. They make it difficult to read, and can cause eyestrain. Instead, "soften", "dull" or "lighten" the colours to make them more "user friendly". ie. "CC6666" is a good substitute for harsh red, "339999" is a more "user friendly" version of Aqua.

Exercise:
  • Choose a "Hue" of colour - Red, Green, Blue, Purple, Brown, Orange - whatever you like
  • Create two "user friendly" versions of that colour for your background
    • Make one LIGHT
    • Make the other DARK
  • Use those colours in the BODY tag - one for the BACKGROUND, the other for the TEXT attributes - ie
An "Aqua" colour scheme might be:
<BODY BGCOLOR="#336666" TEXT="#CCFFFF">
Try inverting them - this may give you FAST ways to develop "User Friendly" colour schemes for your webpages