LEARN HTML IN AN HOUR

README
HTML Lesson 1: The Bottom Line
HTML Lesson 2: The Easy Tags
HTML Lesson 3: Lists and Links
HTML Lesson 4: Images

HTML LESSON 5: COLORS AND FONTS

HTML Lesson 6: Tables
HTML Lesson 7: Forms
HTML Closing Comments/Useful Links

Back to Web Design

There are 2 kinds of colors you can use on your website: Colors that your browser knows by name, and colors your browser does not know by name.

Here are the colors your browser knows:

aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white, black

You can use colors in the body tag as follows:

bgcolor (background color)
text (color of text)
link (color of link)
vlink (color of visited links)
alink (color of activated links)

Note: At this point I neither know nor care what an activated link is so you can research that yourself if you want.

Color is also an attribute of the font tag.

Here is an example using various colors in the body tag and inside some font tags (lesson5a.htm):

-------------------------------------------------------
<html>
<head>
<title> Lesson 5A</title>
</head>
<body bgcolor = "black" text = "white" link="yellow" vlink="fuchsia">
<h1 align = "center"> WEB COLORS </h1>
<h2 align = "center"> White is the default, and black would be invisible on this page.</h2>
 
 AQUA
 BLUE
 FUCHSIA
 GRAY
 GREEN
 LIME
 MAROON 
 NAVY
 OLIVE
 PURPLE
 RED
 SILVER
 TEAL
 YELLOW
<a href="http://webmonkey.wired.com/webmonkey/reference/color_codes"> Here is a link to a hex code color chart.</a> Visit the linked page and then use your back button to see this link change from yellow to fuchsia.

</body>
</html>
-----------------------------------------------------------
Ignore the size and face attributes for a second. We will get to that later in this lesson. The font tag is a little unusual in that you generally would not use it without an attribute (you wouldn't just say something without specifying something about the font. The major attributes for the font tag are color, size, and face. Color and size are pretty obvious, and face is the name of the font.

To finish up on the color discussion, I should let you know you are not limited to the colors above. Instead of specifying colors by name, you can use a hex code. A hex code looks like this: #FF0033. The # sign tells your browser to expect a hex code.

You have probably heard of RGB color codes if you have a paint, photo, or other art type program with advanced features. When using 256 colors (what computers used to show, the available colors could be expressed as how much red, green, and blue are included in the color. Black is the absence of color or R-0, G-0, B-0, White is the combination of all color or R-256, G-256, B-256, Red would be R-256, G-0, B-0, and so forth. If you write these numbers in base 16, using 2 digits for red, 2 for green, and 2 for blue, you will have a hex code.

Hex codes are great because they require less typing (2 digits instead of 3) and also look very technical. I am not going to go into detail about hex codes and base 16 in this tutorial so just use the link to see various colors and their hex codes. It is good to know that in base 16 "FF" is equal to 256 so white is #FFFFFF (all color), black is #000000 (no color), red is #ff0000 (all red, no green, no blue), green is #00ff00 (no red, all green, no blue), and blue is #0000ff (no red, no green, all blue.)

If you have some good picture editing software you may have an eyedropper tool which allows you to test an existing color and will tell you the RGB codes for that color. It will likely tell you the regular numbers which you can then convert to base 16 on your own or else you can also get a base 16 converter - I'm sure someone has a free one on the web somewhere.

Other Font Attributes:

OK, so let's look at the other attributes for fonts - size and face.

Size is pretty easy. You can specify size relative to the default size, which is 3 unless you change it. To do this, you can set font size equal to any number from 1 to 7. Since 3 is the default, there are 2 sizes less than the default (1 and 2) and 4 sizes greater than the default (4, 5, 6, and 7). An alternate way to express this is using -2 through +4. If the default is 3, then size = "-2" would be the same as size = "1" because the -2 is relative to the default of 3. If you have to have control over everything, you can change the default size with the empty tag <basefont size = " "> and put any number from 1 to 7 inside the quotes. If +1 or -1 is too difficult to remember, you can also use the <big> </big> or tags which bump the size up one or down one respectively.

There isn't that much to font face, so this should go quickly. The font face is the name of the font. The important thing to know is that if you specify a font that is not on the user's computer, the user will see it in a font that is on their computer. You therefore may want to use more common fonts instead of obscure ones so that the users of your web page will see it the way you set it up.

Common san-serif (without tiny details called serifs) fonts are Arial and Helvetica (Arial for Windows and helvetica for Mac), then Verdana. San-serif fonts usually show up better on web pages. The most common serif font is Times New Roman, then Georgia, Comic Sans MS and Trebuchet. The most common monospace fonts are Courier New and Courier. If you list multiple fonts in the attribute, the browser will use the first one it finds on the computer. You can also specify just serif or sans.

So here is another script for this lesson showing how all this looks in action. (lesson5b.htm)
-------------------------------------------------

<html>
<head>
<title> Lesson 5B </title>
</head>
<body bgcolor = "yellow" text = "blue">
<h1 align = "center"> FONT ATTRIBUTES </h1>
 
 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.
 This is your default size. It should be size 3.
 This is size -2, which is the same as size 1.
 This is size -1, which is the same as size 2.
 This is size +1, which is the same as size 4.
 This is size +2, which is the same as size 5.
 This is size +3, which is the same as size 6.
 This is size +4, which is the same as size 7.
 This is your default sans-serif font.
 This is your default serif font.
 This is Arial unless you don't have Arial.
 This is Verdana unless you don't have Verdana.
 This is Helvetica unless you don't have Helvetica.
 This is Times New Roman unless you don't have Times New Roman.
 This is Georgia unless you don't have Georgia.
 This is Courier unless you don't have Courier.
 For this sentence, the computer will use the first available font out of my list. 
 Font tags can be nested inside each other. 
 If you want your <big> page </big> to look really STUPID you can change fonts and colors randomly

</body>
</html>
------------------------------------------------------------

Note that in the final sentence I have nested several tags inside each other. If this is confusing you might want to open this as a text file, print it, and color code the tags that go together or draw arrows between them to see how they work.

Next: HTML Lesson 6: Tables

LEARN HTML IN AN HOUR

README HTML Lesson 1: The Bottom Line HTML Lesson 2: The Easy Tags HTML Lesson 3: Lists and Links HTML Lesson 4: Images

HTML LESSON 5: COLORS AND FONTS

HTML Lesson 6: Tables HTML Lesson 7: Forms HTML Closing Comments/Useful Links

Back to Web Design

README
HTML Lesson 1: The Bottom Line
HTML Lesson 2: The Easy Tags
HTML Lesson 3: Lists and Links
HTML Lesson 4: Images

HTML Lesson 6: Tables
HTML Lesson 7: Forms
HTML Closing Comments/Useful Links