-- Click to visit --
Home Page
Site Map,

Bones of a Web Site
Lesson 2   Lesson 3   Lesson 4


The 'BODY' tag

Open your page1.html file in Notepad. Save it as page3.html. Now open it in your Browser, to watch the changes as you change your code during the lesson.

Now we are going to learn how to change background colors.

<BODY BGCOLOR="#FFFFCC">
Something really cool
</BODY>

Something really cool
FFFFFF is computerese for white, CCFFCC gives a pale green.

The browser has default settings for text color, link color, active link color and visited link color in addition to the background color. The defaults are...

<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000FF" VLINK="663399" ALINK="FF0000">
I am using BGCOLOR="#ffffdd" to get this shade of pale yellow background.

Text is black - 000000
Links are blue - 0000FF
Visited link is purple - 663399
Active link is red - FF0000

You can change these if you need to (notice I said need to). The whole world has got used to links being blue. Why confuse us?
You can change these defaults for the entire document in the <BODY> tag.

<BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="pink" ALINK="lightgreen">
Something really cool
</BODY>

Something really cool

I know that we have not mentioned how to make links, so that information is not shown above (why muddy the water?) This is simply to show you how to make the color changes when you do learn how to make links.
    You can see that the background is now black and the text is now yellow.

    Links are now red
    Visited links are now pink
    And active links are light green.

You can specify a background image instead.

<BODY BACKGROUND="swirlies.gif">
Something really cool
</BODY>


Here's the background image
You will find this image (swirlies.gif) in the folder named see. If you are viewing this online with Netscape, just right click on the image and choose Save Image As...

It's probably pretty obvious that the image is tiled. If you use a long skinny image you can get an effect like this...

<BODY BACKGROUND="bluebar.gif">
Something really cool
</BODY>


Here's the background image

(It's actually 800x2, but I have compressed it here to 530x2 so it will fit on everyones screen)

You may agree that this portrait of Sprite the cat is not a good choice for a background!





Extra stuff you may like to know

There is a whole art scene in designing backgrounds that tile correctly.
Joe Burns at htmlgoodies has a page on this topic, and links to many backgrounds you can try.
The background used for the htmlgoodies page is copyright - do not collect it!

Personally I prefer sites that use colour instead of a gif image. They load more quickly.

"Hex-Dec" and Color Basics

Computer colour screens have three settings, 256 colours, (High Color) 16 bit and (True Color) 32 bit.
In a web browser, you have at your disposal 256 system colors in each of Red, Green and Blue, to color text and backgrounds. Each color 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 color. Maximum values of all three (R=255, G=255, B=255) produce the color white and minimal values (R=0, G=0, B=0) produce black. All other colors are represented by different of RGB triplets.

Here is the fun part. Rather than identifying a color as something like "102,153,255" each number is converted from base 10 (normal everyday numbers, digits from 0,1,2,3,4,5,6,7,8,9) representation to hexadecimal, base 16 (digits from 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Why? Hexadecimal is more easily and more efficiently understood by computers. So for the color example above, we would write in hexadecimal as this colour "6699FF". In this example, "66" is the Red value, "99" the Green, and "FF" the Blue component.

Here are some hexadecimal examples of different colors. Note - these shades do not have names, maybe because the codes are 'easy to remember':

ColorHex Code         ColorHex Code
xx oo xx FFCCCC          33FF66
xx oo xx CCFFCC         xx oo xx 9999FF
xx oo xx CCCCFF         xx oo xx 9900FF
xx oo xx CCCCCC         xx oo xx FFFF00
xx oo xx CC66CC         xx oo xx 999999
xx oo xx 666666         xx oo xx 000000
Notice that these codes use pairs of only six digits - 0, 3, 6, 9, c and f. These are fun to play with. I have made a chart, called hexbcr. In each set of six rows, Red changes down each block, Green changes each column and Blue changes left to right in each row. Just one of the six ways of arranging the 216 possible triplets
Now, don't panic about having do a bunch of numerical conversions! There are many tools that will let you experiment. One color tool I like is Hex Tester, which asks for hex numbers, and then changes the background accordingly.

But better yet, many browsers support standard shorthands for the 140 Colors described in the previous lesson:

Solid Color Backgrounds

We will have another look at changing the background color.
  1. Open the page3.html file in your text editor.
  2. Find the <body> tag and change it to:
        <body bgcolor=#000000>
  3. Save and Load your HTML file in your web browser
If you did things correctly, your browser should have changed the background to a solid black. But you may have noticed that you cannot see your text! Why? Well, the default color for text is also black, so you now have black text on a black background! Fortunately, we have some other options to add to the body tag to color the text and the hypertext items:
    <BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX ALINK=#XXXXXX>
where the XXXXXX values will determine:
  • BGCOLOR = the color of the background (default is grey)
  • TEXT = the color of normal body text (default is black)
  • LINK = the color of an item that is a hypertext link (default is blue)
  • VLINK = the color of a hypertext item recently visited (default is purple)
  • ALINK = the color of a hypertext item currently visited (default is red)

You can now add some of these other color values by changing the

tag to read:
  <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FFCCCC >
This will provide a black background, pale yellow text, light aqua blue hypertext, and pink hypertext to visited links, and VLINK will default to the usual #FF0000 - red
NOTE: the order of the items in the <BODY> tag does not matter
As the ALINK was not mentioned it will default to the usual #FF0000 - red
You can now 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).



Home, Site pages,   Lesson 4


Back to Introduction, 2 Body text, 3 Body attributes, 4 Text Formatting,
5 Adding images, 6 Lists and lines, 7 Links, 8 Other comments.
Colour the page, using hex numbers,
HEXbcr, HEX test, Complex about colour,
My Web Address is           http://www.geocities.com/mallee2007

This website is developed and maintained by
, Elizabeth Janson

1
Hosted by www.Geocities.ws