123Webmaster.com : Onsite : Building
The ABC of HTML: Lesson 2

by Janine Dalton
http://www.httpcity.com/jalouda/
 

Lesson 2 - Text

THE FONT TAG

Displaying text could not be easier. If all you want to do is display text in the default font, usually Times New Roman (the font your visitor's word processing package is automatically set at), you do not even have to use a tag! This situation highlights one of the joys of HTML; even though you can include a tag if you want to, if you use the default options there is no need to do so.

If you want your text to be displayed in anything other than black Times New Roman you will need to use the FONT tag. You write the text you want to display between the 2 tag parts. However, the font tag does not have any effect on its own. You must specify certain PROPERTIES you want your text to have by including certain ATTRIBUTES or LABELS within the FONT tag: FACE which is used to specify the type of font, COLOR and SIZE.

FACE

The FACE label or attribute is used when you want to specify what font you wish to use. If you do not include this the text will appear in the default one, Times New Roman. There are literally hundreds of fonts available to choose from. When you pull down the font menu in your word processing program you will see those which are installed on your computer and if there are not enough there for you, you can buy or download more! It is these names you run through in your font menu that you write beside the FACE label, inside inverted commas.

You can pick whatever you like, but remember that only those who also have that font installed will be able to see the text on your web page in that font. If you pick some fancy but obscure one, most may see it as some plain old font instead! Here is an example of using the FACE label where the chosen font is Arial:

<FONT FACE="Arial">This text will appear in the arial font on your page</FONT>

COLOR

If you just want all your text in one colour you need never use the COLOR label. In the BEFORE or OPENING part of the BODY tag, you can specify default colours for text and links (see Lesson 3: Graphics for full details of this).

While you always set your default colours in the BODY tag, you often want to use a variety of colours on your page. To set the colour of a piece of text, use the COLOR label within the FONT tag and put it equal to your colour code preceded by the symbol #, all inside inverted commas.

You will need to know the hexadecimal code of your colour.The site Lynda.com contains a chart listing the codes of all the colours you will need. Here is an example of the COLOR label being used when the desired colour is blue (#0000FF):

<FONT COLOR="#0000FF">This text will be in blue</FONT>

SIZE

The size of text ranges from 1(smallest) to 7(largest). The default size, which applies if you do not set one, is 3. To set the size font you want, simply use the SIZE label and put it equal to a number between 1 and 7 inclusive. In this example I wanted the text to be size 5, above average size making it suitable for text which you wish to emphasise:

<FONT SIZE="5">This text will be reasonably large</FONT>

HEADINGS

Of course if it is large text that you want, the HEADING tag might be just what you are looking for! Any text enclosed within this tag is automatically made bold and you can specify what size heading you want by using the numbers 1 (largest) to 6 (smallest). You would think the size scale would be in reverse but I suppose that would make HTML far too easy :o) . The example below shows the code to use if you want the largest size heading:

<H1>This heading is huge!!</H1>

BOLD, UNDERLINING & ITALICS

To add emphasis to some areas, you may want to use bold or italic text or perhaps underline some phrases. You do not need to underline links yourself. Once you write the code for inserting a link (Lesson 4), the text is automatically underlined when displayed on a web page.

Using these 3 effects is incredibly simple. The tag for each is in 2 parts, as usual, and is the first letter of each effect (B for bold, I for italic or U for underlining) surrounded by the usual symbols. If the code in the example below was used, the word THIS would appear in bold, IS would appear in italics and EASY would be underlined.

<B>THIS</B>
<I>IS</I>
<U>EASY</U>

Of course all 3 effects can be applied to text at once if you like, once the 3 tags are included. When more than one effect is applied to text, each having its own tag, you should write the code so that the BEFORE part of the first appears first and its AFTER part appears last and so on. This examples shows that rule in action. The text THIS IS EASY would appear in bold italics and would also be underlined.

<B><I><U>THIS IS EASY</U></I></B>

POSITIONING & SPACING TEXT

All that is left now is to learn how to put your text where you want it. All you do is put the ALIGN label equal to either LEFT, RIGHT or CENTER (in inverted commas) and place the ALIGN ATTRIBUTE within the FONT tag. In the examples below, the words I WANT IT HERE would appear on the left hand side, ON SECOND THOUGHTS I PREFER THIS SIDE would be on the right hand side and the words NO I THINK HERE IS BEST would be centred on the page.

<FONT ALIGN="LEFT">I WANT IT HERE</FONT>
<FONT ALIGN="RIGHT">ON SECOND THOUGHTS I PREFER THIS SIDE</FONT>
<FONT ALIGN="CENTER">NO I THINK HERE IS BEST</FONT>

An alternative method for achieving centred text involves the use of the CENTER tag. Simply surround whatever you want centred with the BEFORE and AFTER parts.

<CENTER>This text will look great centered</CENTER>

It is worth remembering that blank space can be just as effective as creative positioning and imaginative fonts. To go on to a new line at any time simply insert the BR tag. Note that this tag does not have two parts. Here is an example:

I think I feel like going onto a new line right now!<BR>
Yes, that is much better!!

To skip a line and start on a new line use it twice and so on!

It might make more sense to use paragraphing in your page instead. If you surround your text with the P tag, this will cause your block of text to be surrounded by a blank line both above and below.

<P>This is a very short paragraph</P>

Note that this is one of the few tags where the closing part is optional. So, you can add it if you want for completeness but if you leave it out it is automatically understood.

Lesson Index

Introduction: Anyone Can Learn HTML!
Lesson 1: First Steps
Lesson 2: Text
Lesson 3: Colours & Graphics
Lesson 4: Sound & Links
Lesson 5: Tips & Tricks



Discussion - HTML Layout
Related Sites - Check out the extensive list of html tutorial links on 123webmaster.com , to further your html understanding.