Writing HTML | About | FAQ | Alumni | Tags | Lessons | back | next |

16. Colorful and Textured Backgrounds

Do not settle for that drab old grey page! Put a bold c o L O r or textured pattern behind the text.

Objectives

After this lesson you will be able to:

Create a solid color background for a web page.
Calculate the hexadecimal code for a color value.
Change the color of text and hypertext link items.
Create a textured background from a graphic file.

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

The background of your page should be just that- in the background. As we add different colors or even patterns, keep in mind that it should not interfere with the readability of text. For the pages of this tutorial, we have used a solid white color that makes for a clean and non-interfering (even if not dramatic) backdrop.

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

"Hex-Dec" and Color Basics

In a web browser, you have at your disposal 256 system colors 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 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 tricky 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 easier and more efficient to understand by computers. So for the color example above, we would write in hexadecimal as "6699FF". In this example, "66" is the Red value, "99" the Green, and "FF" the Blue.

Here are some hexadecimal examples of different colors:

Sample Colors	Hexidecimal Code
`xx oo xx` `FFCCCC`	`xx oo xx` `3300FF`
`xx oo xx` `33FF66`	`xx oo xx` `AA0000`
`xx oo xx` `663300`	`xx oo xx` `9900FF`
`xx oo xx` `000077`	`xx oo xx` `FFFF00`
`xx oo xx` `EEEEEE`	`xx oo xx` `888888`
`xx oo xx` `444444`	`xx oo xx` `000000`
Now, don't panic about having do a bunch of numerical conversions! There are many tools that will let you click on a color and they will provide the hexadecimal representation. Many color tools are available from those folks at Yahoo. But better yet, many browser support standard shorthands for these 16 colors (those Windows VGA favorites):
`xx oo xx` `aqua`	`xx oo xx` `black`
`xx oo xx` `blue`	`xx oo xx` `fuchsia`
`xx oo xx` `gray`	`xx oo xx` `green`
`xx oo xx` `lime`	`xx oo xx` `maroon`
`xx oo xx` `navy`	`xx oo xx` `olive`
`xx oo xx` `purple`	`xx oo xx` `red`
`xx oo xx` `silver`	`xx oo xx` `teal`
`xx oo xx` `white`	`xx oo xx` `yellow`

Solid Color Backgrounds

NOTE: You may want to first try a test to see if your browser supports solid color backgrounds.

For our Volcano Web, the first thing we will do is add a color background to the index.html file. The HTML format for adding a solid color background involves modifying the <body> tag to read:

    <body bgcolor=#XXXXXX>

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

If you recall, the image we use for the opening has pictures of volcanoes on a black background- so if we were to use the same black color for the background of the web page, the picture would merge well into our page:

Open the index.html file in your text editor.
Find the <body> tag and change it to:
```
    <body bgcolor=#000000>
```
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 know 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>

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)

You can now add some of these other color values by changing the tag to read:

  <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFF VLINK=#CC0000>

This will provide a black background, yellow text, light blue hypertext, and red visited hypertext.

NOTE: the order of the items in the <BODY> tag does not matter

You should now modify the <BODY> tags in all of your HTML files (fast and easy to do by copy and pasting the above example for the new <body> tag).

Textured Backgrounds

NOTE: You may want to first try a test to see if your browser supports textured backgrounds.

Solid colors add some variety to web pages- but you can go even farther by adding a textured background. You 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 a background texture will require that an additional graphic file be downloaded. We suggest that the image files be less than 10k in size.
readability: Be selective! Many background texture files are more distracting for reading than enhancing. Try to use ones that are very light (with dark text) or very dark (with light text)- i.e select high contrast with the text.
effect: In the first web browsers that used backgrounds, the page would not appear until the background file was downloaded- this might mean for a slow connection, your reader might have to wait long for the background image to arrive before even seeing any content! However, later browsers download the background last so the page first is grey, then the text and graphics appear, and lastly the background arrives. REMEMBER! The load time for your pages will likely be slower (considerably for older modems) when your pages are read from a web server.

In this part of the lesson, we will give you a chance to experiment with three different background images. The HTML format for adding a background image file is:

  <body background="bgfile.gif">

where bgfile.gif is the name of the image file (this can be a full URL or a relative file path- see lesson 8a).

Below we list the names of three background files. You can download each one (if you do not know how to download graphics from a web page, please refer to our help sheet). You should put each graphic file in your pictures folder/directory in your web workspace:

Blue Tile [bg.gif]: A square repeating pattern:
HTML: <body background="../pictures/bg.gif">
Example file with the Blue Tile background
Volcano Text [vtext.gif]: Light grey large text:
HTML: <body background="../pictures/vtext.gif">
Example file with the Volcano Text background
Legal Paper [paper.gif]: Long strip of notebook paper
HTML: <body background="../pictures/paper.gif">
Example file with the Legal Paper background

You can also modify the text colors for your page as we did in the above example. For example, if we want RED text for the Legal Paper background, we might write this HTML:

  <body background="../pictures/paper.gif" text=##AA0000>

which gives us red text on yellow paper.

NOTE: Many web browsers have the ability to change the default text colors- sometimes a user may have the preferences set for colors that will interfere with the ones you have selected. Therefore, we suggest when using any background tags (solid color or texture file) that you include the "normal" colors- black for text, blue for hypertext links, and purple for recent links:
<BODY TEXT=#000000 VLINK=#660099 LINK=#0000EE>

If you are looking for some examples of background texture files, see Kai's Power Tips Background Archives

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different than 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 colors that we added in the early part of this lesson

Review

Review topics for this lesson:

How do you add a solid color background to your web page?
Why are the color codes written in cryptic code like #EE66CC ?
How do you color the text of a web page?

What is the difference between

  <body bgcolor=#FFFFFF>

and

  <body background="tiles.gif">

Independent Practice

Add a solid color background or a texture file background to your web page(s). Ask some other people if they find that the text is suitably readable with the background elements you have chosen.

Coming Next....

The most hated and obnoxious HTML tag ever...

GO TO.... | Lesson Index | back: "Standard vs Enhanced HTML" | next: "Don't Blink" |

Writing HTML Lesson 16: Colorful and Textured Backgrounds

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut16.html