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 collor for the background of the web page, the picture would merge well into our page:
1. Open the index.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>
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=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
|
|
|
This will provide a black background, pale yellow text, light aqua blue hypertext, and red hypertext to visited links. |
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 copying and pasting the above example for the new <body> tag).
Performance
A. 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.
ASSIGNMENT
Study in advance how to blink and Marquee text.