Lists
Lists: the things you see on web pages which have all sorts of important documents with loads of points. Personally I don't use them much, sometimes it's nice to bullet a few points, or separate out a list for a point within another list. Lists are very easy and logical to design, but just to confuse you, there are several different types, one for simply black bullets, and then another five that order things with different kinds of numbers.
<UL> Above we have the code for an unnumbered list (UL) with two entries.
Notice the <LI> & </LI> tags surrounding each point. Other
types of list are as follows:
Lists all start with a definition tag of which type of list they are, i.e. the tag that tells the browser what the list should look like. Then each item on the list (each point) is surrounded by the List Item tag. When all the list items have been put in, the definition tag is closed. In other words it's like this:
<LI> The first list item (point) goes here </LI>
<LI> The second list item (point) goes here and so on</LI>
</UL>
Click here to view the result
| Type of List | Definition Tag (e.g. <UL> & </UL>) |
|---|---|
| Numbered points | <OL TYPE=1> & </OL> |
| Upper Case Alphabetical points | <OL TYPE=A> & </OL> |
| Lower Case Alphabetical points | <OL TYPE=a> & </OL> |
| Upper Case Roman Numerals | <OL TYPE=I> & </OL> |
| Lower Case Roman Numerals | <OL TYPE=i> & </OL> |
| Directory List (words in columns) | <DIR> & </DIR> |
| Definition List (see More Text Tags) | <DL> & </DL> |
Remember that between the definition tags you must put the <LI>
and </LI> tags for each list item. (This is excepting the definition
list tags which use special tags within them. See the article on more
text tags for information on this).
In HTML 4.0 there are several different ways of presenting
the bullets in an Unumbered List (<UL>):
<UL TYPE="x">
Where x can be circle, disc, or square.
Well, that's basically all there is to it!
Here's the customary add on to our previous examples:
<HTML>
<HEAD><TITLE>Iceman's Web Page</TITLE></HEAD>
<BODY TEXT="#000000" ALINK="#FFFF00" VLINK="#8080FF" LINK="#0000FF"
BACKGROUND="greyweave.gif">
<H1>This is a heading of size 1</H1><BR>
<FONT COLOR="#FFFF00"><H1>This is a heading of size 1 in
a different colour (yellow) </H1></FONT><P ALIGN="RIGHT"
ID="ice_verdanaHead">
<FONT SIZE=+2 FACE="Verdana">This is text of font size +2 and in
the Verdana Font, Aligned on the Right</FONT></P>
<!-- This is a comment, it won't appear in the browser, but is useful
when looking at source code. -->
<A HREF="mypage.htm">
This is a hyperlink to mypage.htm (Don't Click This!!)</A><BR>
<A NAME="middle">This is an anchor: you can't see anything
though!
<CENTER>
<A HREF="nextpage.htm">
<IMG SRC="mail.jpg" BORDER="2" HSPACE="2" VSPACE="2">
</A>
</CENTER>
Don't Click This Either!!
<TABLE CELLPADDING=15 BORDER=10>
<TR>
<TD>This is a message in the first row of the first column of the
table</TD>
<TH>This is a header in the first cell of the second column</TH>
</TR>
<TR>
<TD> This is a message in the second row of the first column of
the table</TD>
<TD> This is a message in the second row of the second column of
the table</TD>
</TABLE>
</CENTER>
<OL TYPE=A>
<LI> The first list item in an Upper Case Alphabetical List </LI>
<LI> The second list point... and so on</LI>
</OL>
<UL TYPE="square">
<LI>A point with a square bullet.</LI>
<UL TYPE="circle">
<LI>Another point in a nested (one inside another) list.</LI>
<LI>This list has the TYPE attribute set to circle.</LI>
</UL>
<LI>Another point in the normal list.</LI>
</UL>
</BODY>
<HTML>
Click here to see the Resulting Page
