Mister Hungerford's Web Page
MESA
Web Page Design Competition
Web Page Creation Activity #4
(Lists)
The
purpose of this activity is to continue your introduction of a few simple
commands of Hyper Text Markup Language (HTML). You will experiment with web page creation using a simple
text word processor and HTML coding.
During
previous activities we have learned the basic HTML document format.
<html>
<head>
<title> The name of your page.
</title>
</head>
<body> All the stuff in your page goes here.
</body>
</html>
Ø
The
HTML tag defines the document as a web page. All other tags are nested within it.
Ø
The
head contains information not displayed as part of the web page.
Ø
The
body contains the displayed portion of the page.
Now lets look at LISTS:
HTML supports three types of lists. They are the unordered list, the
ordered list, and the definition list.
Lists are enclosed by opening and ending tags that
determine the type of list. Each
item in the list has its own tag.
<OL> . .
. </OL> Ordered
List
<UL> . .
. </UL> Unordered
List
<DL> . .
. </DL> Definition
List
<LI> List
Item. (The </LI> tag is optional.)
Ordered Lists can be customized. Ordered lists with ordinary numerals
(1, 2, 3) are the default condition, but a simple attribute can order them by
upper or lower case letters (A, B, C or a, b, c) and upper or lower case Roman
numerals (I, II, III or i, ii, iii).
The attribute determines the type as follows:
Numbers - 1,
2, 3, etc.:
<OL
TYPE="1">
Upper Case
Letters - A, B, C, etc.:
<OL
TYPE="A">
Lower Case
Letters - a, b, c, etc.:
<OL
TYPE="a">
Upper Case
Roman Numerals - I, II, III, etc.:
<OL
TYPE="I">
Lower Case
Roman Numerals - i, ii, iii, etc.:
<OL
TYPE="i">
Defining the type of bullets that is used can
customize unordered lists. There
are three types of bullets, a disk or round bullet, a square bullet and a
circle bullet. An attribute also
determines the type.
Disk or Round
Bullet
(default)
<UL
TYPE="disk">
Square Bullet
<UL
TYPE="square">
Circle Bullet
<UL
TYPE="circle">
The third type of list is a Definition List (also
known as a dictionary list or glossary list). These lists usually involve a number of terms followed by an
indented definition, although the codes can also be adapted for other purposes. The items in this type of list are
defined by the DATA TERM <DT> or DATA DEFINITION <DD>. The data definition tag <DD>
creates an indent and is sometimes used by itself just for the indent effect. You would type a definition list as
follows:
<DL>
<DT> Item number one
<DD>Definition of item number
one
<DT>Item number two
<DD>Definition of item number
two
<DT>Item number three
<DD>Definition of item number
three
Remember
that all of the <DD> tagged lines will be indented and the <DT> tagged
lines will not be indented.
To
get a feel for all three types of lists, create a new Notepad document and type
the following code.
<HTML>
<HEAD>
<TITLE>LISTS</TITLE>
</HEAD>
<BODY>
<H2>Ordered
Lists</H2>
<OL
TYPE="a">
<LI>Item
Number One
<LI>Item
Number Two
<LI>Item
Number Three
</OL>
<H2>Unordered
Lists</H2>
<UL
TYPE="circle">
<LI>Item
Number One
<LI>Item
Number Two
<LI>Item
Number Three
</UL>
<H2>Definition
Lists </H2>
<DL>
<DT>
Item number one
<DD>Definition
of item number one
<DT>Item
number two
<DD>Definition
of item number two
<DT>Item
number three
<DD>Definition
of item number three
</BODY>
</HTML>
For
more information on HTML check the following sites:
Digital's
HTML Starter Page
http://thuban.ac.hmc.edu/www_common/ips/HTML_PRECONFIGURED/HOW2HTML.HTM#BASIC_PAGE
How
a Web Page Works (excellent site)
http://www.howstuffworks.com/web-page.htm
Tutorial
to basic HTML
http://www.cwru.edu/help/introHTML/toc.html
HTML
Made Really Easy (HTML Tutorial)
http://www.jmarshall.com/easy/html
BareBones
Guide to HTML