Interactive HTML Tutorial


Lesson 3 - More Tags


In this lesson we discuss two more attributes commonly used in the formatting of HTML documents: lists and fonts.

Lists

HTML provides the means for producing two types of lists: unordered (ie., unnumbered) and ordered (ie., numbered) lists.

Unordered Lists:

An unordered list typically is a bulleted list of items. This is probably the most common type of list on the Web. The <UL> tag opens an unordered list while </UL> closes it. Between these tags are placed list items with an <LI> tag as follows:

HTML Code   Browser Display
<UL>
<LI> red
<LI> yellow
<LI> blue
</UL>
 
  • red
  • yellow
  • blue

Ordered Lists:

An ordered list is formatted exactly the same as an unordered list, except that <OL> tags are used instead of <UL>. In an ordered list, sequential numbers are generated automatically, as shown below:

HTML Code   Browser Display
<OL>
<LI> purple
<LI> orange
<LI> green
</OL>
 
  1. purple
  2. orange
  3. green

Note: You can "nest" lists too (ie., subdivide lists), but use this feature sparingly as too many nested items can get difficult to follow.


Fonts

The <FONT> tag sets a font's size, typeface and color.

Font Sizes:

In HTML, font sizes range from 1-7, with 1 being the smallest. Font sizes 2 and 3 are the most commonly used. If a font size is not specified the default setting is 3.

  • Font Size 1
  • Font Size 2
  • Font Size 3
  • Font Size 4
  • Font Size 5
  • Font Size 6
  • Font Size 7

Font Typefaces:

When HTML was first introduced there was only one font available. And while current versions of HTML and newer browsers allow greater flexibility in specifying preferred fonts for an HTML document to be displayed in, ultimately the choice is limited by which fonts end-users have installed on their systems (even then users may decide to set their browsers to override preferred font settings). A few commonly supported fonts are:

  • Arial
  • Lucida Sans
  • Times New Roman
  • Verdana
  • Helvetica
  • Impact
  • Comic Sans MS

Font Colours:

Using the <FONT> tag, text can be instructed to display in any colour under the sun. One must be careful though to choose a colour that is readable on whatever background colour has been selected. Text colors are chosen either according to a hexadecimal numbering system denoting a red-green-blue color value, or by specifying one of sixteen pre-defined colour names that (other than black) can be included in the <FONT> tag. These sixteen colours are:

  • Aqua - Aqua
  • Red - Red
  • Green - Green
  • Blue - Blue
  • Violet - Violet
  • Fuchsia - Fuchsia
  • Gray - Gray
  • Lime - Lime
  • Maroon - Maroon
  • Navy - Navy
  • Olive - Olive
  • Purple - Purple
  • Silver - Silver
  • Teal - Teal
  • White - White
  • Yellow - Yellow

The font attributes described above are included in the <FONT> tag as follows:

HTML Code   Browser Display
<FONT SIZE=2>This is a size two font</FONT>   This is a size two font
<FONT FACE="Comic Sans MS">This font is Comic Sans MS</FONT>   This font is Comic Sans MS
<FONT COLOR="Fuchsia"> This text is Fuchsia </FONT>   This text is Fuchsia

Try it out!

In the box below, type the following HTML code, then click the "View" button. The HTML document you have written will be displayed in your browser. You may wish to change some of the tags and/or attributes to experiment with some of the different items discussed in this lesson.

Try typing this:

<HTML>

<HEAD>
<TITLE>Why I love learning HTML - Part 2</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

Colors
<BR>
My favorite colors are:
<BR>
<UL>
<LI><FONT SIZE=2 COLOR="NAVY" FACE="VERDANA">Navy</FONT>
<LI><FONT SIZE=2 COLOR="OLIVE" FACE="VERDANA">Olive</FONT>
<LI><FONT SIZE=2 COLOR="PURPLE" FACE="VERDANA">Purple</FONT>
<LI><FONT SIZE=2 COLOR="TEAL" FACE="VERDANA">Teal</FONT>
</UL>

</BODY>

</HTML>



(To return to this page after viewing click "Back" on your browser.)


 Lesson 2      Lesson 4 




Index | Lesson 1 | Lesson 2 | Lesson 3 | Lesson 4 | Lesson 5 | Lesson 6 | Lesson 7 | Lesson 8
HTML Reference Guide

Copyright Alternet Web Design