Formatting the Text

Whatever you type between the <BODY> and </BODY> tags will show up on your page. Without formatting, however, it will simply appear as plain text in whatever default font is set on the reader's browser. There are several tags that you can use to make your page content easier to read. I will list the most often used here.
 

HTML Tag

Task

HTML Tag

Task
<b>...</b>
 Bold text
<u>...</u>
 Underlined text
<i>...</i>
 Italics
<blink>...</blink>*
 blinking text**
<br>
 hard return
(new line)
&nbsp;
 gives an extra space   between words
<p>
 double return

(good for beginning new paragraphs)

<blockquote>...</blockquote>
indents both sides of the paragraph.
<sup>...</sup>
 gives superscripted text
<sub>...</sub>
 gives subscripted text
<ul>...</ul>
    indents left side of paragraph
<center>...</center>
Centres the text. (Careful of spelling!)
&lt;
<
&gt;
>

*NOTE:  The blinking text tag only works with Netscape browsers version 2.0 and up.
**NOTE:  To the Netscape blink-o-philes, PLEASE use the blinking text sparingly.  It is really irritating to see whole paragraphs (for instance) blinking, especially if you are trying to read the paragraph. 
 

The <FONT> tag

If you want to change the size or colour of your text or the font, you can use the <FONT>...</FONT> tag.  Here are some commands you can use within the FONT tag:

COLOR=#XXXXXX - changes the colour of the text.  Replace XXXXXX with the appropriate colour as shown in the previous lesson.

FACE="a, b" - changes the font of text.  Replace 'a' and 'b' with font names (Helvetica, Arial, Times New Roman, etc).  In order for the browser to display the font you want, it must have the font in it's font file.  The browser will use font 'a' if the computer has that font on file.  If it can't find that font, it will use font 'b'.  You can put as many font names in this command as you can think of.  Make sure that the ones you do specify are fairly common though.

SIZE=Y - changes the size of the text.  Replace Y with a number.  The default size is 3.  The larger the number, the larger the font.  If you wish to change your text size in relationship to the default, you can use

SIZE=+Y or SIZE=-Z.  Replace Y and Z with numbers.  The first command increases the font by Y and the second decreases the font by Z.
 

Headers

Headers are the formats for creating titles.  The tag to use is

<Hn> - where n is a number.  The larger the number, the smaller the title size.  This tag automatically makes the text bold and  inserts an extra line above and below the title.  Following are some of the header sizes:

Header 1


Header 2


Header 3


Header 4


Horizontal Lines

If you are like me and like to separate out different sections of the page (header, footer and main body for instance), you will find a horizontal line very handy.  The tag for a horizontal line is <HR>.  Here are some of the commands you can put in:

WIDTH=X or WIDTH=Y% - dictates the length of the line.  Replace X and Y with the desired numbers.  You can make the line X pixels long, or Y% of the screen.

ALIGN = "..." - gives the alignment of the line.  You can replace the "..." with "LEFT", "RIGHT" or "CENTER".

SIZE = M - dictates the width of the line in pixels.

NOSHADE - indicates that the line should have no colour inside.
 

Creating Lists

The tags <UL>...</UL> can also be used to start and end a list.  Each list item must be headed by <LI>.  Using <UL> uses a symbol to mark each item on your list.  To indicate you symbol, start your list as such:

<UL TYPE="..."> replacing the "..." with either "CIRCLE", "SQUARE" or "DISK".  The default is "circle". Note to IE users, I'm not 100% sure if the specifications will work in Internet Explorer.

You can also make numbered lists with the tags <OL>...</OL>.  The <OL> stands for "Ordered List" and uses numbers or letters to mark each item on your list.  To indicate which you would like, use

<OL TYPE="..."> replacing the "..." with "I", "i", "A", "a", "1", etc.

Here are some examples of the different types of lists:
 
 
Bulleted List Examples
<u>Types of fruit:</u>
<UL TYPE="disk">
 <LI>Apples
 <LI>Oranges
 <LI>Bananas
</UL>		 Types of fruit:
  • Apples
  • Oranges
  • Bananas
<b>To do for tomorrow:</b>
<UL TYPE="Square">
 <LI>Make the bed
 <LI>Feed the dog
 <UL TYPE="circle">
  <LI>Call "Food!"
  <LI>Fend off dog
  <LI>Get bowl and Dog Chow
  <LI>Fend off dog
  <LI>Tell dog to sit
  <LI>Pour food in bowl
  <LI>Fend off dog
  <LI>Put bowl on floor
  <LI>Pick self off floor
  <LI>Curse dog
  <UL>
   <LI>Record time 15 minutes</UL>
  </UL>
 <LI>Buy toilet plunger
</UL>		 To do for tomorrow:
  • Make the bed
  • Feed the dog
    • Call "Food!"
    • Fend off dog
    • Get bowl and Dog Chow
    • Fend off dog
    • Tell dog to sit
    • Pour food in bowl
    • Fend off dog
    • Put bowl on floor
    • Pick self off floor
    • Curse dog
      • Record time 15 minutes
  • Buy toilet plunger
Ordered List Examples
<i>How to read a book:</i>
<OL TYPE="1">
 <LI>Open the front cover.
 <LI>Using eyes, scan page and absorb words.
 <LI>Turn page and repeat until end.
</OL>		 How to read a book:
  1. Open the front cover.
  2. Using eyes, scan page and absorb words.
  3. Turn page and repeat until end.
<b><u>Outline of essay:</u></b>
<OL TYPE="I">
 <LI>Introduction
 <LI> Thesis
 <LI>Main Body
 <OL TYPE="a">
  <LI>Argument 1
  <LI>Argument 2
  <LI>Argument 3
 </OL>
 <LI>Conclusion
</OL>		 Outline of essay:
  1. Introduction
  2. Thesis
  3. Main Body
    1. Argument 1
    2. Argument 2
    3. Argument 3
  4. Conclusion

Return to the HTML Lesson Guide
Read the next lesson: Linking Your Pages

This page created by Kat Lai.
Feel free to e-mail me with any comments or questions.