In
this lesson we discuss two more attributes commonly used in the formatting of
HTML documents: lists and fonts.
· Lists
·
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> |
|
|
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> |
|
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>
