Fonts

Basefont Tag

You may have already noticed that HTML does not specify an absolute font size. Instead, it uses relative font sizes that increase or decrease the size of letters from a standard size. That standard font (the starting point for any adjustments made with the <font> tag) may be modified using the <basefont> tag. This tag sets the standard font face (name of font, like Arial, Times New Roman, and Courier), font size, and standard text color.

Syntax:

<basefont size="size" color="color code" face="face">size is the size of the font, on a scale from 1 to 7. Standard size is 4. color code is a code specifying the text color. face is the name of the font, like Arial or Courier.

Also note that <basefont> is a standalone tag — it doesn’t need an end tag. Placing it inside the <head> section affects the whole document.

Example 1 
<html>
<head>
    <title>My Web Page</title>
    <basefont size="5" color="#990099" face="Arial">
</head>
<body>
    <p>This text appears in purple letters,
       in Arial font, one size bigger than normal.</p>
</body>
</html>

Do not forget where to place the <basefont> tag. It is only used once, and always must be in the document header.

Practice:

  1. Create a new file in your practice folder called basefont.html.
  2. Create a simple web page. Set the title to Basefont Demo.
  3. In the header, add a basefont to set the standard font to size 2, with red letters and using the Tahoma font.
  4. Type a single paragraph in the body using the words of Shakespeare:

    O Romeo, Romeo! wherefore art thou Romeo?
    Deny thy father and refuse thy name;
    What’s in a name? that which we call a rose
    By any other name would smell as sweet;

    Be sure to include line breaks after each phrase, but do not create multiple paragraphs.

Font Dangers

Now that you’ve learned how to change the font on your web page, you have to be warned about something. Fonts can be a problem area when it comes to web design. Here’s why. Although the web page might look like you want it to on your computer, if the person viewing your web page doesn’t have the same fonts already installed, your web page will look different on their computer. It might be very different. This is because only the name of the font you have chosen is transferred to the viewer’s computer — not the font itself. If the person doesn’t already have Jokerman installed on their computer, a different font will be chosen, with the possibility of selecting one that is completely unreadable.

For this reason, if you would like to choose a font that some people may not have installed, you should always specify a backup font that you are sure most people have. Standard fonts like Arial, Courier New, and Times New Roman are usually safe bets.

To specify alternate fonts, list multiple choices separated by commas. For example,

<font face="Geneva, Verdana, Arial">Maybe in Geneva.</font>

In this example, the web page would preferably be displayed using the Geneva font. However, if that font is not installed on the viewer’s computer, the Verdana font would be tried. If also unavailable, the computer would resort to Arial. (If it so happened that none of the three fonts were installed, the computer would select a font without the control of the web page author — you.)

Superscripts and Subscripts

HTML has a built in way to produce superscripts (raised up small letters, like 2nd) and subscripts (lowered small letters, like I42). Using the <sup> tag and <sub> tag produce the desired results very easily.

Example 2
1<sup>st</sup> 1st
C<sup>2</sup> = A<sup>2</sup> + B<sup>2</sup> C2 = A2 + B2
CO<sub>2</sub> CO2

Comments

Sometimes it is necessary for a web page author to add comments to the HTML code to keep track of his or her own design code. Comments are words or sentences that are saved in the code but not displayed on the web page. They are almost always used for the benefit of the web page author.

Syntax:

<!--Comment goes here-->The text between the two open comment tags will not be shown on the screen.

Look at the following example:

Example 3 
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <p>This course is taught by Mr. Rosenberger.
    <!--Course was previously taught by Mr. Starkenburg.-->
    </p>
</body>
</html>

In Example 3, the words Course was previously taught by Mr. Starkenburg does not appear on the web page.