10. The <FONT> Tag, More Options with Lists, and "Mailto:" with the <A> Tag

You have seen different sized fonts when you used the "Header" tags, and throughout these lessons, you have seen text in different colors. That should have given you the idea that there must be some sort of "tag" that will allow you to do this. As you can see from the title of this section, there is. It is called the <FONT> tag, and does nothing by itself. You have to use "attributes."

The general form of the tag is as follows:

COLOR, FACE, and SIZE are all attributes of the <FONT> tag.

COLOR uses those "hexadecimal" numbers for colors that you saw in the BGCOLOR attribute in "tables."

SIZE sets the size of the font, but is the reverse of the "header" tags with SIZE=1 being the "smallest" and SIZE=7 the largest (SIZE=3 is the default and if you use a number larger than 7 it defaults to 7.).

FACE is the name of the font to be used, and has some dangers if the font is important to your page.

Some examples are as follows:

This is an example of a SIZE 1 font.
This is an example of a SIZE 2 font.
This is an example of a SIZE 3 font.
This is an example of a SIZE 4 font.
This is an example of a SIZE 5 font.
This is an example of a SIZE 6 font.
This is an example of a SIZE 7 font.


The code looks like this:

Here are some samples of fonts in various colors and sizes:

This is an example of a GOLD SIZE 1 font.
This is an example of a MINT SIZE 3 font.
This is an example of a PERIWINKLE SIZE 5 font.
This is an example of a LAVENDER SIZE 7 font.
In general the code looks like this:

But there are a few colors you can just use the name for. RED for example:

Some other colors, whose names you can use rather than their numbers, are:

BLUE

WHITE

GREEN

PURPLE

YELLOW

GRAY

LAVENDER

ORANGE

PINK

TAN

In the RESOURCES part of the TOC, there are the 140 "official" colors. You can use their official names, but to be sure you are getting what you want, it is probably better to use the "numerical" designation. If you have a program with a color wheel, there are thousands of variations you can use, but you have to have the "number." The "caveat" here is that you need to be sure the color shows up well on the background of the page.

As for FACE, here is an example. If you see Greek letters, then you have the font "Symbol" on your computer. If you see ordinary letters, you don't.

The code is:

The danger I mentioned above is, if the font is not on the viewers computer, it will default to the font the viewer has set as a default for his/her computer, possibly ruining any effect you wanted to create.

If you really want to use a particular font--since it probably won't show up correctly on the majority of computers--create what you want in a graphic and make it a .JPEG (or .JPG) or a .GIF and use the <IMG> tag to display it.

Some Other Attributes of Lists

There are three different kinds of lists and each have "attributes" to make them a little different from each other.

Unnumbered lists use the <UL> and </UL> tags (for UNNUMBERED LIST) around the whole list, and the <LI> tag (for LIST ITEM) for each of the entries. Where they differ is in the "attribute" TYPE. The default is "DISC" which gives the "bullets" the other two choices are CIRCLE and SQUARE.

The general code is as follows: (Only ONE type is used in the definition of each list)

There are two kinds of ORDERED LISTS. They both use the <OL> and </OL> (for ORDERED LIST) around the whole list, and the <LI> tag for each of the entries. Where they differ is in the "attribute" TYPE.

The Numbered lists in this "ordered list" group use either no TYPE attribute which gives regular numbers like 1, 2, 3 or the other two choices for TYPE are are i and I for small and large Roman Numerals, respectively.

The general code is as follows:

The Alphabeically orderd lists in this "ordered list" group use either of two choices for TYPE. They are a or A for small and large Latin Letters, respectively.

The general code is as follows:

There are two kinds of DESCRIPTIVE LISTS. They both use the <DL> and </DL> (for DESCRIPTIVE LIST) around the whole list, and the <DD> tag (for "DESCRIPTIVE DATA") for each of the entries. They differ not only in the "attribute" TYPE, but the "Glossary Entry" type of list uses a <DT> tag (DATA TITLE) for the word to be "glossed" and then uses a <DD> tag under it for the "definition".

The regular Descriptive List uses no TYPE attribute and generates an indented list with no symbols before the entries. The Glossary Entry List uses TYPE COMPACT and the entries with the <DD> tags are "indented" under those with the <DT> tags.

The general codes are as follows:

You may of course put lists of various kinds inside of lists as you can put tables inside of tables. Here is an example with code. You will get a chance to experiment further.

"Mailto:" with the <A> Tag

There is always a question when this "Mailto:" thing comes up, because it is not supported in all browsers. What it does (if it is supported) is open an email window, pre-addressed and with the subject predeterminited in it. That lets the viewer write and send email to a person specified in the email blank on a given subject.

Early versions of Netscape automatically supported it, since they had the Netscape Email client in them. Early versions of Explorer did not. Now Netscape Communicator supports it automatically, but the separated Netscape browser does not. It has no email client built in. Explorer, meanwhile, now comes with the Microsoft "mail client" Outlook Express and can be configured to support "mailto:" with that program, but it is not automatic.

In any case, when we get to the basic lesson on FORMS you will have another way of dealing with this that doesn't depend on the browser. Unfortunately, it does depend on whether the web server your page is runnin on has a program installed on it to handle mail forms. More about that later.

Mailto: is essentially a link, but to an email client on your computer. It uses the <A> tag with the HREF=". . ." attribute. As you can guess it looks a litte different from an ordinary link.

The syntax above is it. After "mailto: you put the email address, a "?", then Subject= . . . . That's it. It will bring up a page (we hope) and you can write your email. Try it:

Exercises 10

1. Make a table that is a rainbow. That is, create a table that has rows with bacground colors RED, ORANGE, YELLOW, GREEN, BLUE, INDIGO, and VIOLET. Use the names of the colors in your "attributes" except for INDIGO and VIOLET, and you will probably have to substitute "Navy Blue" and "Periwinkle" for those. Some things you will have to do:
   • Don't use any border, then make a table around your table that has a BORDER=1 with no CELLPADDING.
   • Use the BGCOLOR in the <TR> tags.
   • You will to set a HEIGHT for a fixed height in the <TR> tags and a WIDTH for a fixed width in the <TD> tags to get anything to display. Try it without it and see.
   • You will need to put the "special character" for "space" in each cell to get it to appear. Empty cells don't show up.
   If you are not pleased with my design, try one of your own. If you really want to experiment, make a flag instead.

2. Under keycaps on your computer pick 5 different fonts that are on your computer. I will be using:
   • BlackChancery
   • Chicago
   • Cryptoid
   • StFrancis
   • Stencil
   Choose 5 different patriotic phrases out of history. I will be using:
   • Damn the torpedos. Full speed ahead.
   • I regret that I have but one life to give for my country.
   • Don't fire till you see the whites of their eyes.
   • What the world needs now is love sweet love.
   • Ask not what your country can do for you. Ask what you can do for your country.
   1. Put each of your sentences in a different SIZE, COLOR, and FACE.
   2. Put them in list with "circles"
   3. Put a table with a border of 5 around the whole thing.

3. Create a "mailto;" link that will open an email page addressed to "Vice President Al Gore" with email address "VICE.PRESIDENT@WHITEHOUSE.GOV" with the subject "Are you running for the big one in 2000?" (Yes, that is really his email address while he is in office.)

4. Go back to Lesson 8, "More about Tables" and get that outline that you so laboriously worked on using a table to do the indenting. Redo the exercise using lists within lists.