CGS 3063 HTML tutorial QuickRead 5

QuickRead 5: The font tag

The font tag

To change the size, color, font face of your text, you use the tag.

There is a story people tell about the mighty Jambalaya
It ain't not your usual run of the mill story

There is a story 
people 
tell about the mighty 
Jambalaya 
 It ain't not your usual run of the mill story

As you can see the font tag is very useful. Now there are quite a few things we need to glean from that piece of HTML. Most importantly, you will notice that we have started to used the font tag with attributes. Font is the descriptor. Color, size and face are the attributes that the tag font is associated with. Also note that each attribute can assume a set of defined values.

Let's go over each attribute in some more detail.

The attribute Color
There are sixteen basic colors that you can summon by name in HTML. However there are 16 million colours that can be specified if you learn to use the hexadecimal system of color (hmm... may be we should mention that only 256 of those colors will show up on Netscape and Explorer). Here are the basic 16 colors: red, green, blue, white, black, yellow, orange, aqua, fuchsia, gray, lime, maroon, navy, olive, purple, silver and teal. Most of the time the named colors are good enough, but sometimes you just want that perfect orange and blue.

There are two ways you can assign a value to any attribute. You can either directly say
attribute=value like in color=navy
or you can have quotes around the value like this:
attribute="value" like in color="navy"

Both of these are accepted ways of assigning color values, however using quotes is preferred as it makes the assignments more readable (or so some people feel). In the "jambalaya" example on top, I used the quotes only once and that is when I assigned multiple values to the "face" attribute. Be very careful not to forget the closing set of quotes, otherwise the whole rest of the page will be messed up.

The attribute Face
Using the face attribute, you can change the font that your text uses. The range of fonts you can use is limited to the fonts your browser (computer system) has installed. If you are using an old browser that uses only standard fonts, you will not have the capability to view the extended fonts. Here's a typical usage of the face attribute:
Rockwell text

If you have the font "Rockwell" installed on your Browser (computer system), You will be able to view the font on your machine. If, however, your friend Jack did not have the font installed on his, he will get the text displayed in the default browser font. That's one reason (actually the only one) that we assign multiple fonts separated by commas. (Note, if you use multiple fonts with spaces in them, you will need to use quotes). If the first font is not installed on the viewer's machine, the browser will use the second font listed. If that isn't installed either, it will use the third and so forth. If nothing is installed, it will use its default font to display the text. While we are at it, it's worth noting that you can ask the browser to pick a particular default font class. Some font classes are serif, sans serif, and monospace. The exact font the browser will pick from the class is totally up to it.

Here's how you'd do that:
 text 

And here's what you might get:

serif (probably Times)
 serif (probably Times)

sans-serif (probably Arial or Helvetica)
 sans-serif 

monospace (probably Courier)
 monospace 

Here are a few fonts you might want to try out:

If you do not see a particular font it is because your browser does not have that font installed. For a listing of the fonts that are installed on your browser, if on Netscape 4.0 or above, press ctrl+shift+n and look for the font window. If on Explorer, do what you have to do to compose a page.

Having stuff you can use does not necessarily mean that you should use it. Go easy on the fonts! There are some fonts that look awful together and then there are others which complement each other. You'll have to use your own fine judgement (or if you get a lot of complaints/complements on your page's fonts). I usually do not have more than two fonts on a single page. Besides, going the extra font route is painful and pointless if most of your viewers do not have the font installed on their browsers.

If you have a font that has two or more splits like "beesknees itc," or "eras ultra itc," use the quotes! If you are specifying more than two fonts that are split, use single quotes.

For example:



The attribute Size.

You can set the size of the text by using a relative or absolute scale. The text can be displayed in seven sizes.

Font size = 1

Font size = 2

Font size = 3 (default)

Font size = 4

Font size = 5

Font size = 6

Font size = 7

The default is set at 3, and when you scale relatively, that is your base. Here are examples of both types in HTML:

Bigger is better sometimes
Bigger is better sometimes

The small print keeps getting smaller

The small print keeps getting smaller

Get behind the wheel!

Woow. We've come quite some way since we've started. You can now control the way your text and page looks. Please yourself.

Try typing out the following. Also use your own stuff. Be imaginative!

<html>
<head><title>You've come a long way baby</title></head>
<body>

<h1>It's 3 am, do you care where your cat is?</h1>
<hr>
 

Thousands of cats are abandoned each year in Florida! 

Should anyone care that a once 
cared for and protected animal should be left to fend for itself. 

This is the <a href="../lob.html">story of Lob,</a> a briare cat from Saratoga.

</body>
</html>

Index