Objectives of this Tutorial

Generally: To apply different text character formats.

Specifically: On completion of this lesson, you will be able to:

• Change the font type and font size
• Apply bold and italic
• Change the colour of text
• Create superscript and subscript text
• Apply underline and strikeout to text
• Use a monospaced font
• Add comments to web pages
• Insert special characters

Formatting an HTML document is very different to formatting a document using a word processor. Instead of selecting text and applying various attributes to the text, all text is enclosed in the appropriate tags that indicate the formatting style you wish to apply.

Fonts and the Web

When a user browses a website, the pages can only be displayed using fonts available on their own computer system. If fonts you specify are not available, another font will be substituted.

Instead of applying a single font to text, you can apply a font combination. If the first choice font is not available, the second choice will be used; if the first and second fonts are not available, the third will be used; and so on. The font combination should specify broadly similar fonts, so that if one is missing, the effect on the page will not be so noticeable.

When you choose fonts to use on your pages, you need to consider the following:

• As with a printed document, mixing too many different font styles and over-using enhancements such as bold and italic does not produce a good effect.
• Sans serif fonts (fonts without curly edges, such as the heading above) are considered to be easier to read on-screen.
• If you use unusual fonts, it is unlikely that users will see the page as you do.

Specify the Font to Use

You can specify more than one font name so that if the first font choice is not available, then the second one will apply. Each successive font should be separated by a comma from the previous one. For example <FONT FACE="Tahoma, Arial, sans-serif">

Tip: Use the font name sans-serif and serif to specify the default sans or serif font on the user's system.

To change the font

• Before the text that is to be changed enter the tag <FONT FACE="fontname">
• If the text does not exist already type the text after the tag
• Close the change of font by entering the closing tag </FONT>

Note: To specify more than one font, separate each font with a comma.

Heading and paragraph have different font types applied

Example of specifying more than one font

Resulting text with the new font types applied, the last paragraph has the default font applied

Apply Bold and Italic

One way to make text stand out on a page is to apply either bold or italic.

To apply bold

• Type <B> before the text you want to embolden
• If the text does not exist type in the text to be emboldened
• Type the closing tag </B>

To apply italic

• Type <I> before the text you want to italicised
• If the text does not exist type in the text to be italicised
• Type the closing tag </I>

Note: You can also use the tags <EM>and <STRONG>. These are logical tags but by default, <EM> will display text in italics and <STRONG> will display text in bold.
Some designers prefer to give the browser the logical sense of the text, as this allows the browser to more freely interpret your formatting request.

Bold and italic used for emphasis

Resulting text with bold and italic applied

Continued...