CREATING OR CHANGING A BACKROUND COLOUR FOR YOUR WEB PAGE

After looking at a few web pages you would have noticed that all if not most of them have a background colour. The reason background colours are added is so that the web page stands out to the potential reader.

By looking at the heading for this page you may be wondering why there are two headings instead of the usually one like on the rest of this tutorial. Well the reason for this is that when you first start using your HTML code for your web page you start with a default background colour of plain white. So as mentioned earlier it would be a good idea to add some colour so that web page you create can stand out from the thousands if not millions of other web pages that already exist. However if you think that the plain white background will be a good to use then there is no need to change it at all. The second part of this title refer to the point that if you do not like your background colour after you have chosen it you can amend it by changing the colour code on your html page more of which will be mentioned later on.

Now that we have talked about why you may need a background colour and the amendments you can make to it. We will now move on to explaining how you actually create a background colour. In order to create a background colour for your web page you will need to follow these steps.

1) We will need to create an opening body tag to tell the computer that we would like to make a change to the body of web page. To do this we will need to insert the word body between to angle brackets likes the example below.

<body>

2) After creating your opening body tag we will now have to insert some text just after the letter y in the body tag. The reason this is being done is that we can also now tell the computer that we would like to add some background colour to our web page. The way the computer will understand this is if we add the following piece of html text BGColour ="FFFFFF".

By adding this text to the body tag that has already been created our background colour tag would now look like this

<body bgcolor ="FFFFFF">

3) By looking at the tag above you would have notices that there is a gap between the speech marks. The reason this has been done is so that we can take a moment to explain what colour codes are and how they work in html. Although you can type in the actually name of the colour that you would like to use for the background on a web page e.g. Gold, Most people / programs actually use a range of letters and numbers which the computer can recognise and then turn them into an actually colour. For an example #FF0000 would mean to the computer that we would like to turn something red, this could be the background colour or even the text itself.

For more examples about colour codes for your web page please click on the link following link Colour codes

4) Now that we have had a brief look at colour codes we can pick our own example to show you how background colour works. For this web page of the tutorial we will be using a light blue colour for our background and the html code for this is #66CCFF.

As we have now selected our colour we can now finish off the html background tag by inserting this code between two speech marks which will leave the final tag looking like the example below. (To see the result of this tag in uses all you will have to do is look at the background colour of this page as this is the same tag that has been used for the background colour of this page.)

<body bgcolor ="#66CCFF">

If you completed tag does not look like this it would be recommended that you go through steps 1, 2 and 4 again

 

To continue with either tutorial please click on relevent links below.

Note: The first link will take you back to the previous section of the tutorial when the second link will take you to the next section.

Full Tutorial Route: Changing various items on a HTML Page
1.4 Giving the page a title 2.2 Changing the following attributes of text on a page: Font, Size and Colour
1.6 Adding Text to a HTML page 2.3 Changing the heading level of text
To view another page from the Tutorial Free Zone or to exit either Tutorial please click on the word contents to your right.