Using Fonts

The problem with choosing fonts for web pages is that the font needs to be installed on the user's computer in order for the web browser to display it properly.
Fonts will always fall into one of two typeface categories either serif or sans-serif. The serif typefaces (the font has curly bits at the top and bottom ends on the letters) are easier to read on paper, and are used in newspapers and books, but the sans-serif (which does not have the curly bits) typefaces are easier to read on a computer screen.

The following are what are considered to be web safe fonts: -
 
 Arial- This text is in 12 pt Arial font.
Times Roman- This text is in 12 pt Times Roman font.
Verdana- This text is in 12 pt Arial font.
Georgia- This text is in 12 pt Arial font.

The majority of web sites including this one use the Verdana sans serif font
In case the web site user does not have the font installed on their computer you have chosen for a page it is best to specify several fonts all in the same typeface to keep your design as near as possible to the way you designed it.

 If your chosen font is not available on the user's computer the web browser will show its default font. This is usually 'Times New Roman' for Windows machines and 'Times' on Macintosh machines.

Use the HTML font tag to specify several font tags with the with the font you want to use first, followed by equivalent fonts on other machines, and in case the user does not have any of these fonts on there system then place a generic typeface last: -

            For example the body part of my web pages all  start with

<FONT face="Verdana, Arial, Helvetica, sans-serif" size=2>

and end the body part with the closing font tag

</FONT>

this is illustrated below

The font tag can have several attributes (these modify the tag in some way ). The ones above are size and style. Notice that in the case of the style attribute it has multiple options which are themselves separated by commas and all enclosed in quotes.

The font tag is usually used for a block of text or the entire page but it can also be used on individual characters.

The HTML for this is shown below:

Notice how I changed the color and size of the t by using the color and size attributes. The HTML is below:

The Size attribute

the size attribute can have a value from 1-7 they equate to a point size from 8 to 36.

The Color Attribute

The color attribute has an is a hexadecimal number representing red, green and blue components preceded with a hash e.g. #rrggbb. Where rr= red component etc.

 Here are some of the common colors:

Exercise for you to try.

Write the HTML to produce the text below:

Clue black text is default and so you don't need to specify the color.

Answers opens in a new window.

Bold and Italics and Underlined Text

To emphasis sections of text you can either make the text bold or place in italics, underline or a combination of all three.

the tags used are:

• <STRONG></STRONG>
• <EM></EM>
• <U></U>

Here are some examples of how to use them:

This text is bold- and this is the HTML used:

This text is in italics-and this is the HTML used

This text is in underlined ----and this is the HTML used

This text is bold, underlined and in italics----and this is the HTML used

Continue to next---->part4

part2<------Previous

Starting HTML  sections

• Starting Html -Intro
• Part1-An Introduction to HTML-Your first  Web Page
• Part2-HTML TAGS Explained
• part3-Formatting Text - Fonts
• part4-Lists and Tables and Images
• part5-Anchors and Linking

Web www.build-your-website.co.uk