Adding Colours to Web Pages

When we created a web page with the HTML Editor, we chose a colour from the drop down box. But you can add other colours. Try this in your Editor:

Click on File > New
The Background Options dialogue box appears
Click Background Colour
Click the "More" button

When you click the "More" button, another dialogue box appears showing a list of Web Safe colours you can use (A Web Safe colour is one that will display properly no matter what browser or computer you have - at least, that's the theory).

Click on a colour that takes your fancy. We've gone for a yellow colour in the image below:

Web Safe Colours

Click OK when you're happy with your chosen colour. You will be returned to the Background Options dialogue box. Click OK.

Your new background colour will be inserted into your code. Let's examine it in more detail.

In the basic HTML skeleton, the first BODY tag was just this:

<BODY>

If you don't specify a colour or background image to use, the browser will use the default colour. This is usually white. Notice what our BODY tag now looks like:

<BODY BGCOLOR = #FFCC00>

When we used a magenta colour, the tag looked like this:

<BODY BGCOLOR = Magenta>

A modern browser will recognise a lot of colours by name. But the colour names a browser recognises differ. The Netscape browser will not recognise a lot of the colour names that Internet Explorer uses, and vice versa. In which case, the default colour will be used, and not the name you specified. However, if you use a colour code instead of a colour name your colour should display properly (If it's a Web Safe colour).

The colour code we used was this:

#FFCC00

Colour codes start with the hash symbol (#) and then have six numbers or letters. The six numbers and letters are hexadecimal values. We won't go in to Hexadecimal maths, but here's the basic meaning of the code: The first two values are how much Red you want, the second two values how much Green you want, and the final two values are how much Blue you want. The values you are allowed to use for each number or letter are 0 to 9 and A to F.

So our code reads: switch the Red full on (FF), use a lot of Green (CC), but turn the Blue full off (00).

Here's the whole line again:

<BODY BGCOLOR = #FFCC00>

Notice how the BODY tag has been extended. There's now a space after <BODY and that is followed by the word BGCOLOR and then
the code. Finally, we have the angle bracket at the end.

So an important point about tags is this: A lot of HTML tags can be extended. In other words, you can add to the basic Tag. The BODY tag is a good case in point. Not only can you extend the BODY tag by adding a background colour to it, you can also specify what colour you want the text to be on the page. Like this:

<BODY BGCOLOR=#FFCC00 TEXT=Black>

Notice where the spaces are. There's one after BODY and there's one after BGCOLOR=#FFCC00. So when you are extending a tag, remember to separate the different parts by a space.

There are a number of other ways to extend the BODY tag, which we'll meet later. Let's move on to what else was done in the five minute web page.

Web Page Headings

The Heading tag in HTML comes in seven different sizes: 1 to 7. In the editor, only sizes 1 to 4 are used. Size 1 is the biggest Heading size, and size 7 is the smallest. A heading tag is the letter "H" followed by a number 1 to 7 (You don't need to use capital letters in HTML tags, by the way, because it is not case sensitive. So use lower case, if you prefer: The browser won't care.)

In the five minute web page, we used size 1 heading tag by clicking on Insert > Heading > H1. This gave us the following:

<H1> </H1>

But that is just the heading tag. We then need to type something between the pair of H1 tags. We used this as a heading:

<H1>My First Web Page</H1>

What we're doing is telling the browser to display the words "My First Web Page". But because we've surrounded the words with a pair of tags, we're also telling the browser how to format those words. In this case, format the words with a Heading size of 1.

The final thing we did in the five minute web page was to centre the title on the page. If we didn't centre our heading, the browser would just align it on the left. First we highlighted the H1 tags, then we clicked Format > Centre. Which gave us this:

<CENTER><H1>My First Web Page</H1></CENTER>

Notice that the Heading tag, and our text are now surrounded by the two CENTER tags. This is called Nesting. Here, we have nested the H1 tag inside the CENTER tag. The text itself is nested inside both of these tags.

Save your work and then click View > View Web Page to see the results, and the new colour code in action.

As an experiment, change both the H1 tags to H7 (just delete the 1's and type in a 7).

<CENTER><H7>My First Web Page</H7></CENTER>

Save your work again, and then click View > View Web Page once more. See how much smaller the Heading is?

Set the Heading back to H1. On a line after the H1 and CENTER tags, type out some text, as in the image in this link:

Click here to see the HTML code in the Editor

When you have typed some sample text, save your work and then view the results. You should see that your text has gone below the heading, with some generous space between the two.

In the next part of the web design course, you'll learn how to insert an image on a page.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses