HMTL Tutorial

By Alan Flum of Celestial Graphics Inc.

Adding Color and Size to Your Text

In this section you will learn about the tag. This tag will allow you to change text color and size. You will also be introduced to the "browser safe" color palette. Using the browser safe color palette will help guarantee that your colors will the same for all of your web site's visitors.

If you came to this page in the middle of the tutorial you may want to go back to the Introduction.

	More Information
	Website Design Tutorial E-Commerce Tutorial Recommended Reading Optimizing Images for the Web What Software Should I Use? Park Your Domain for Free! Web Hosting Packages

There are other simple tags for modifying text. Lets say you want to change the text color or size or type of font. As an example, lets change your basic page:

My First HTML Document !

to the following:

My First HTML Document !

To do this you would modify the text "My First HTML Document !" with the font tag:

My First HTML Document !

The complete HTML document would look like this:

<html>
<head>
<title> My First Web page </title>
</head>

<body bgcolor="#ffffff">
My First HTML Document !
</body>
</html>

Notice that the is a little more complicated that the bold tag or the italic tag . The font has additional information or attributes about the font. In this case, size and color. Unlike a word processor, basic HTML, does not give exact text sizes like your word processor such as 10 point or 12 point text. Basic HTML uses relative text sizes. (Note: that HTML Cascading Style Sheets do Support exact font sizes, these are, however, beyond the scope of this basic tutorial). Unfortunately, the exact size of these depends on your browser and computer. Below are examples of different text sizes:

This Is Size 1
This Is Size 2
This Is Size 3
This Is Size 4
This Is Size 5
This Is Size 6
This Is Size 7

The HTML for this would look like the following:

<html>
<head>
<title> My First Web page </title>
</head>

<body bgcolor="#ffffff">
This Is Size 1 
This Is Size 2 
This Is Size 3 
This Is Size 4 
This Is Size 5 
This Is Size 6 
This Is Size 7 
</body>
</html>

Try to cut and paste the above HTML into your text editor, save it as font.html, and view it in your browser by double clicking on it.

The Tag and Text Color

In the previous example, you probably noticed a new tag, . The tag is the line break tag. Use this to create a new line. If you want to skip a line simple use another . This tag is different than the other tags because it does not have a corresponding closing tag (no ). This is because is not really modifying the text, it is simply indicating that a new line is needed.

In the first example on the page the font tag had two attributes, size and color. Lets look at the color attribute. Lets look at the following three lines of text:

This is Pure Red
This is Pure Green
This is Pure Blue

The HTML for these three lines of text is:

This is Pure Red 
This is Pure Green 
This is Pure Blue

Each line of text is modified by the tag with the color attribute. What are these funny numbers, "#FF0000" and so on? They represent the three primary colors of your computer screen, red, green and blue or RGB for short. The numbers probably look unfamiliar, because they are hexadecimal or base 16. In base 10, we use 10 symbols to represent all numbers, 0 through 9. In base 16, 16 symbols are used. Numbers are represented as 0 through 9 and A through F. Is this confusing? Do You Need to Know Hex numbers in order to do HTML? NOT REALLY! All you need to know is the following:

To add a color to your text in HTML, surround your text by the tag pair.
The color is specified as follows: The first two characters specify red, the second two numbers specify green, and the third two specify blue. You can use any character from 00 through FF to represent red, green or blue. 00 means the complete absence of a color, FF the complete presence. Example: Black, the absence of color, is #000000. White, which is the maximum mixture of all three primary colors is #FFFFFF. #990000 is a medium red, #000099 is a medium blue and #009900 is a medium green. A final example, purple, which is a mixture of red and blue is #CC00CC.

Browser Safe Colors

Many computers are set to view only 256 colors. Because of this, both Microsoft and Netscape have agreed on a set of 216 colors that can be viewed by Internet Explorer and Netscape Navigator on all computers. I highly recommend that you stick to these colors for your text. They are easy to remember. The 216 colors are any red, green or blue combination of the following hexadecimal numbers:

00, 33, 66, 99, CC , FF

For example #003399 and #FF0066 are both browser safe colors but #120000 is not.

Note: that if you are choosing colors from the windows color palette or Mac color picker, you will need to use know the decimal equivalents. The browser safe colors in decimal numbers (i.e. normal everyday numbers) are any combination of red green or blue of the following:

0, 51, 102, 153, 204, 255

For example: red 0, green 51, blue 153, and red 255, green 0, and blue 102 are browser safe colors but red 18, blue 0, green 0 is not.

Click Here to view the entire Browser Safe Color Palette.

Next, we will look at adding links to your site.

Previous: More Basic Text Tags Next: Adding Links