Home >> Starting Html-3

Starting HTML  Navigation

Formatting Text

You are all familiar with newspaper and book print, and have probably encountered books in large print, and legal forms in the proverbial small print.

 You will  have a preference as to what looks good and what doesn't, but more importantly you will have come across print that is difficult to read because of its style or size or even the background colour of the paper.

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.


You Use the HTML font tag to specify several fonts 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:

<HTML>
<HEAD>
<TITLE>starting html</TITLE>
</HEAD>
<BODY>
<FONT face="Verdana, Arial, Helvetica, sans-serif" size=2>

Our text will go here!

</FONT>
</BODY>
</HTML>

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:

c<FONT size=4>h</FONT>arac<FONT color=#ff0000
size=5>t</FONT>ers. </P></FONT>

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

<FONT color=#ff0000 size=5>t</FONT>

The Size attribute

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

Size Point
1 8
2 10
3 12
4 14
5 18
6 24
7 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:

           
FFFFFF 000000 FFFF00 FF0000 008000 0000FF
white black yellow red green blue

 

Exercise 4

Write the HTML to produce the text below:

Black text verdana 18 point

yellow text Arial 14 point

red text times roman 12 point

green text verdana 14 point

blue text verdana 12 point

 

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

End Exercise 2.

Answer to Exercise 4:

End Exercise 4.

Font Tag Use In Modern web Pages

The font tag is used on millions of websites and will continue to be supported in HTML 5 (next standard version of HTML). However it is seldom used by modern designers as it is better to use style sheets to control the text. ( comes later)

However that doesn't mean you should use it.

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:

Here are some examples of how to use them:

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

<STRONG>This text is bold</STRONG>

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

<EM>This text is in italics</EM>

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

<U>This text is in underlined</U>

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

<STRONG><EM><U>This text is bold, underlined and in
italics</U></EM></STRONG>

 

Continue to next---->Lesson4

Lesson2<------Previous

Articles| Privacy Policy| Contact Me| Other Resources 
By Steve Cope