Eazy HTML - So eazy it's Child's Play

Quick Menu

Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24

Beginner

15. Colourful and Textured Backgrounds

The background of your web page should be that -- in the background. As we now delve into adding different colours or even patterns to the background, keep in mind that it shouldn't clash or interfere with the readability of your text. Draw your own conclusions from an EXAMPLE of what happens when you do not think about the impact of a noisy background that clashes.

With some simple modifications to the <body> tag (introduced way back in lesson 1), you can now add a solid colour background to your web pages. But before we show you how to do the fancy colour stuff, we must first talk about RGB colour values and their "hexadecimal" representation.

HEX-DEC & COLOUR BASICS

In a web browser, you have at your disposal many system colours to colour your text and backgrounds. Each colour is identified by its
Red - Green - Blue (RGB) values, three numbers that range from 0 to 255, each of which represents the intensity of the Red, Green, or Blue component of the desired colour.

Site Stats

There are 2 users online

click to see where

70,168 total unique visitors

231,555 total pageviews

85 visitors in the last 24 hours

79 total visitors today

228 pageviews today

This page has been visited 6,332 times

get this script

Most users online at once:
41 on 04/10/2005

Maximum values of all three (R=255, G=255, B=255) produce the colour white and minimal values (R=0, G=0, B=0) produce black. All other colours are represented by different of RGB triplets.

Now folks, here is the tricky part for you. Rather than trying to identifying a colour as something written like "102,153,255" ("YIKES"), instead each number has been converted from base 10 {normal everyday numbers, digits from 0,1,2,3,4,5,6,7,8,9} representation to hexadecimal, and also base 16 {digits from 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F}. But Why? Hexadecimal is easily and more efficiently understood by a computer. So for the colour example above, we would write in hexadecimal as "#0000DD". And here we use, "00" is the Red value, "00" the Green, and "DD" the Blue, which is the hex value of the blue text I have used though this site.

Here are the hexadecimal colour codes.

Now, don't panic about having to do a bunch of numerical conversions! There are many tools that will let you click on a colour and they will provide the hexadecimal representation. Yahoo is one such site you can get one of these tools from.

And you can also enter the most basic colours by name rather than there hexadecimal value.

aqua
Black
blue
fuchsia
red
green
yellow
Are just some examples.

SOLID COLOUR BACKGROUNDS
The first thing we are going to do is add a colour background to the index.htm file. The HTML code format to add a solid colour background involves modifying the <body> tag to read:

   <body bgcolor="#xxxxxx">

Now where the #XXXXXX is the hexadecimal representation (indicated by the # sign in front of it) of the desired colour.

Now if you remember, the first image we used for the opening has pictures of our space liner on a black background -- so if we used the same black colour for the background of our web page, the picture would merge well into our page:

Open the index.htm file in your text editor.
Find the <body> tag and change it to:
```
   <body bgcolor="#000000">
```
Save and Reload your HTML file in your web browser

If you did this right, your browser will now have changed the background of the page to a solid black. But there's something else you may have just noticed, now you cannot see your text! Why? Well, the default colour for text is also black, so now you have black text on a black background! Luckily, we have some more options to add to the body tag to colour the text and the hypertext items:

   <body bgcolor="#XXXXXX" text="#XXXXXX" link="#XXXXXX" 
   vlink="#XXXXXX" alink="#XXXXXX">

Note: This Is All done on one long line in your code. Also you might be noticing that in the tags “colour” is been spelt ‘color”. Why? We don’t spell words the same all over the world. These codes were all started and written by American’s and hence the way to spell “colour” in America is “color”

bgcolor = the background colour of your page (default is White)
text = the colour of normal body text (default is black)
link = the colour of an item that is a hypertext link (default is blue)
vlink = the colour of a hypertext item recently visited (default is purple)
alink = the colour of a hypertext item that it currently active (default is????)

So now you can add some of these other colour values simply by changing the tag to read:

   <body bgcolor="#000000" text="#FFFFCC" 
   link="#33CCFF" vlink="#FF0000" alink="#FF0000">

This code will give us a black background, pale yellow text, light aqua blue hypertext, red hypertext to visited links, and green hypertext for active links.

ALSO, the order of these items in the <body> tag does not matter. And you don’t have to use them all either.

OK so go ahead and modify the <body> tags in all of your HTML files (fast and easy to do by copying and pasting the above example for the new <body> tag).

TEXTURED BACKGROUNDS

Now solid colours add some variety to your web pages -- but guess what? You can go even further by adding a textured background. You can use a small image file (GIF or JPEG) and the browser will "tile" the web page with repeated copies of the image. Some of the things you should keep in mind are:

File size: Adding background texture to your web pages will require that an additional graphic file be downloaded by the viewer. As a suggestion keep the file size as small as possible and less than 10k in size preferably.
Readability: Be selective! Many background texture files can be more distracting than enhancing for readability. Try to use background textures that are very light (with dark text) or very dark (with light text). Select for high contrast with the text and its background.
Effect: In the first web browsers that started to use textured backgrounds, the page wouldn’t render until the background file was downloaded. This will mean for a slow connection, your reader will have to wait long for the background image to download before even seeing any of your content! However, later browsers download the background image last so the page first is white, then the text and graphics appear, and lastly the background image arrives. REMEMBER! The load time for your web pages will be slower (considerably for older modems) when your pages are read from a web server.

Now, we are going to give you a chance to experiment with a few different background images. The HTML format for adding a background image file is:

   <body background="xxxxxx.gif">

Below we list the names of three background files. You can save them and should put each graphic file in your pictures/images folder/directory in your web workspace:

bgstars.gif: A square repeating pattern:
HTML:<body background="images/bgstars.gif">
Example file with the bgstars image Tile background
purpsky.jpg: A square repeating pattern:
HTML:<body background="images/purpsky.jpg">
Example file with the purpskys image Tile background
paper.gif: A square repeating pattern:
HTML:<body background="images/paper.gif">
Example file with the paper image Tile background

You can modify the text & hypertext colours for your page as we have in the above example. For example, if we want RED text for the Paper background, we might write this HTML:

   <body background="images/paper.gif" text="#FF0000">

Which gives us Red text on yellow paper.

Most web browsers now have the ability to change there default text colours -- sometimes a user may have there preferences set to colours that will interfere with the ones you have selected. So, I suggest when using any of background tags (solid colour or texture file) that you include the "normal" colours -- black for text, blue for hypertext links, and purple for recent links:
<body text="#000000" vlink="#660099" link="#0000FF">

If you are looking for some examples of background texture files, see the list of links from Yahoo or even Google for them.

Check Your Work
Compare your web pages with this EXAMPLE of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor. We are going to keep the sample files with the solid black colours that we added in the early part of this lesson.

MORE INFORMATION
If you would like to know that the colours you choose for your web pages will look the same on other computers, consider the hexadecimal codes. With the different combinations of letters and numbers, there are literally millions of colours to choose from, e.g. #FD6A2C, #06E293 or #55A92B. Yet, not all of these colours will be the same on all computers. Moreover, if your visitor does not have a cutting edge computer capable of displaying "millions" of colours, the web browser will make a closest "guess" to match the colours, with perhaps undesirable results.

Fortunately, you can do something about this... only use hex colours that are included in the NetScape 216 colour palette. "What is that?" you ask. It is a set of 216 unique colours that are common to the system colours of both Macintosh and Windows operating systems. Therefore, these colours can be displayed on almost any computer.

Practice
Experiment with the body tag attributes on your documents and see the effects you can come up with on your page.

Top of page | Previous Lesson| Lessons Index | Next Lesson