When your first web page is up on the World Wide Web, why not apply for our Good Start Award?

In addition to the heading styles discussed in the previous section, you can use the HTML <FONT>...</FONT> tag to specify more exactly how you want your text to appear. This tag is a little more complicated than the ones we've seen so far. Simply using the tag as I've shown it above will accomplish nothing! We have to specify other "attributes" for the tag. These attributes cover such things as the size (height) of the text, its colour, and the name of the typeface.

Type sizes are given in much the same way as we specify a heading style -- by using the numbers 1 to 7 -- except that, confusingly, size 7 is the largest and size 1 the smallest. The normal type size is size 3. The example below specifies that the browser should show the text in the largest possible type size:

<FONT SIZE=7>Here is some large text</FONT>       

We can also specify a colour for the text. Colours can be given in two different ways. For the common colours (black, white, red, blue, yellow, green, etc.) we can give them by name; for example:

<FONT COLOR=RED>This is red text</FONT>       

(Notice that we British have to start spelling things the American way here -- and this won't be the last time!). Be a little careful in specifying colours because some browsers recognise more colour names than others. If the browser doesn't recognise the name you can get some unpredictable results.  

The other way we can specify a colour is more accurate and, in theory at any rate, can specify almost any colour, but is also much more tricky. This method makes use of the fact that any particular colour consists of a mixture of the basic colours red, green and blue. White, for example, is a mixture of all three colours at full strength; black is a total absence of all three colours; a mid-grey is a mixture of all three colours at half strength. So firstly, you need to know what proportion of each of the three primary colours is present in the particlar colour you want to specify. We specify the strength of a particular primary colour on a scale of 0 to 255 (0 means its complete absence, 255 means it's there in full strength). Secondly, we need to convert the number to "hexadecimal" notation. (If you're not familiar with hexadecimal notation then I'd recommend forgetting this method and sticking to the common colours). In the example below, I've specified yellow text. Yellow is made up of red and green light in full stength, and a total absence of blue light. This means that we want 255 parts of red, 255 parts of green, and 0 parts of blue. The number 255 translates into hexadecimal as FF, and 0 translates as 00. So, putting it all together we get the following code:

<FONT COLOR="#FFFF00">This is yellow text</FONT>        

Confused? Well, don't worry -- stick to the first method and you won't go far wrong.

As well as specifying the type size and colour, we can also specify a typeface to be used. If you decide to do this, you must always bear in mind that, although you may have specified a particular typeface, if the user doesn't have that typeface installed on his/her computer he/she will not see your page in the way you hoped. To try and overcome this, we can specify up to three different typefaces in order of preference, in the vague hope that the user will have at least one of them on his/her computer. The code below specifies that I would like the text to be viewed using the Verdana typeface, or failing that Trebuchet MS, or if all else fails, Helvetica. If none of these typefaces is installed on the user's computer then the user's normal typeface will be used:

<FONT COLOR="#000000" FACE="Verdana, Trebuchet MS, Helvetica">This is the text I want to alter</FONT>        

We can combine the size, colour and typeface specifications into one tag. The example below calls for green text of size 5 using either Times New Roman, Garamond or Baskerville Old Face as the typeface:

<FONT SIZE=5 COLOR=GREEN FACE="Times New Roman, Garamond, Baskerville Old Face">This is the text to be displayed</FONT>        

Setting the Base Font

To finish, we'll look at how we can specify a "base font" to be used in our document. The base font is the typeface and type size which will be used where we have specified no other typeface or size. We set the base font at the start of the document in exactly the same way as we set a normal FONT attribute, but using BASEFONT instead of FONT in the tag and omitting the closing tag (note that FACE will work with most browsers, but is not part of the standard):

<BASEFONT SIZE=4 FACE="Verdana, Arial, Helvetica">

Well, there's a lot for you to experiment with there. Go ahead and try some coding on your own. If you want an exercise to do, look at Exercise 4.1. When you are reasonably sure you understand this section, go on to the next section about Aligning the Text.