Computer Programming 10

Ross Sheppard High School
Computer Programming 10
Student Learning Guide
Adding Color to Your Home Page

	When you have finished this project, you will be able to:
	use the color tag to set the background color
	use the color tag to set the font color
	use the RGB color system
	look up color values from a reference book or chart
	describe the following terms: RGB predefined colors hexadecimal colors

The web page you have been working on so far has been simply monochrome – black and white. It is very easy to change the color of both your text and the background of your web pages.
Open your web page in NotePad.
The first color you will learn to change is the text color. Once again, you use the FONT tag to do this, but you need to add another attribute. Note that you can also use SIZE within the FONT tag.
The syntax for changing the font color is:

<FONT COLOR="#rrggbb">

The "rrggbb" is a mix of Red,Green, and Blue light to produce the final color:
where "rr" is the amount of Red expressed as a number from 00 to FF (Hexidecimal Numbers)
where "gg" is the amount of Green expressed as a number from 00 to FF (Hexidecimal Numbers)
where "bb" is the amount of Blue expressed as a number from 00 to FF (Hexidecimal Numbers)
Hexidecimal numbers are: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

Note the use of the" =" sign, the quotation marks, and the"#" sign.
You can use any combination of numbers to get the mix you want, but it will take some experimentation.
Create samples of text for each of the primary colors, red, green and blue by creating a tag that looks like:

<FONT COLOR="#FF0000">This font is red
View the document in Internet Explorer:
You will be glad to know there are also some predefined colors available so you need not remember the 6 digit number. These predefined colors use the following syntax:

<FONT COLOR="purple">This font is Purple
Here is a list of the predefined colors:

This font color is silver
This font color is gray
This font color is maroon
This font color is green
This font color is navy
This font color is purple
This font color is olive
This font color is teal
This font color is white<==That's white!
This font color is black
This font color is red
This font color is lime
This font color is blue
This font color is magenta
This font color is yellow
This font color is cyan
The link below will take you to an HTML Color Code Chart:
HTML Color Codes and Hexadecimal Numbers
You can use as many font colors as you want on a web page, and even within the same line of text. There is a design issue, however. For example, dark text on a dark background or white text on a light background are often difficult to read. You will need to keep this in mind as you use colors on your web page.
Add 10 more colours of text to your Web page, using text to indicate the colour you used.
Your Notepad should look similar to this: (Not exactly the same)
In a similar fashion to the way you changed to font color, you can also change the background color of your web page. The tag for the background color is BODY BGCOLOR="#rrggbb",.You can also use the predefined colors for the body background color and the correct syntax is:

<BODY BGCOLOR="#990000">
or
<BODY BGCOLOR="BLUE">
Note there is no ending tag for BODY BGCOLOR. Once the color is set for the web page, it can not be changed; in other words, you can have only one background color.
The BODY BGCOLOR tag must appear in the BODY tag. Remember, there can be only 1 BODY tag on a page. Add a body background color now: (Note that you can use any of the color discriptors or hexidecimal numbers)

Remember: You can have only 1 <BODY> tag on a Web page.
View your web page in your browser.
The color of the background of your web page is another design consideration. The general rule is the background should be as simple and easy to look at as possible. Notice the background color for all of these instructional web pages is white. However, there are times when color does enhance the web page, and in those cases, it should be used.
Click here to see the marking guide for this project.
Make a seperate copy of this assignment and place it in a new project folder and Save the project folder in your "Hand In" folder on your personal disk space so that this project can be graded.
Changing the color of the links you use on your web page is the topic of the next project.