CHAPTER 6
A La CarteTOC
Roast cicada with tomada
Luna moth in lemon sauce
Fruit fly cocktail
And don't forget ...
escargot on snail
Why Use List ElementsTOC
Lists are an excellent way to highlight hyperlinks and to
separate them from text. In many cases hyperlinks are
appropriately contained in the text but in some cases it makes more
sense to let them stand out. Lists are also helpful for listing
specific information in an orderly fashion. Another possible use of
list is as a way of outlining a report, a paper, or a project. Rest
assured that anything which can be done with lists can be done
without having recourse to lists, but usually only by doing more
work than is necessary, or by sacrificing clarity.
Using ListsTOC Many methods for making
lists are built into HTML. Lists can give your webpage a
professional look while highlighting important points for your
readers. We list here the some of the tags used for lists:
- < UL > begins an unordered list.
The browsers uses a system of indented bullet characters to
highlight an unordered list. Each element in the unordered list
begins with the empty tag < LI>. A tag is
empty when it has a beginning but no end tag. an unordered list
must have an end tag to indicate to the browser to end the
indentation. List tags can be nested. By nested I mean that you may
place a second or third level of indentation in your list. It is
important to remember to end each set of lists with the appropriate
ending. If you do not do this, the indentation format will likely
not follow your desires. A useful tip for using list tags is to
indent your list in the HTML document so that you can actually see
where each indentation should begin and end. Several examples will
be given. The end tag for unordered lists is:
- </UL>.
- <OL> begins an ordered list. The
browser uses a system of indented numbers and or letters to
highlight material. Ordered lists can be nested. See the above tag
description for more information. An ordered list ends with the
tag:
- </OL>.
- < LI> designates a list element. It
has no end. It must be used before each element. Otherwise, the
browser will not give the list element a separate line.
Creating Your Own ListsTOC
In most cases it is preferable to use the predefined list
elements discussed above. For one thing, it is difficult in general
to control white spaces. The predefined tags do this for you.
Still, there are exceptions. Perhaps you want to use In-line
images as reminders or sign posts for your lists. Perhaps you
wish to use a specific graphic image as your " bullet". This is not
difficult to do, but be aware of the fact that different browsers
may handle your material differently. In some cases the browser may
be image disabled. Remember to use an alternative text bullet such
as "*", just in case.
Project Code Name:
Making a Simple Ordered listTOC
Using lists in your documents is probably easier than using
tables. Lists will give your documents a nice ordered look. If you
view the older documents, especially by those who helped make the
web popular, you will see that they used simple constructions like
lists and horizontal bars to give their documents a stylish look.
It is really the use of images that makes tables so invaluable. So
if you are not using tables, consider making your documents more
interesting by using lists.
.
We begin by considering a very simple order
list
ordlst.html
An Ordered List
- Red
- Green
- Purple
|
This is a list of three colors. The browser will automatically
number the list, or lists. The tag < OL>
indicates the beginning of a list. Each element in the list is
denoted by a tag of the form < LI>. These tags
do not have to be displayed on separate lines. Though it is a good
practice to do so.
- Indentations document the style.
- Indentations remind you of the position in the list.
- Indentations are a good reminder of where the beginning
and ending tags should go. Also, this makes it easy
to spot when you have left them out.
We can set the type of order list we want by using the
attribute
- TYPE- inside the ordered list tag. If no TYPE
is listed, then the browser will automatically use numbers. The
following is an example of the use of the TYPE
attribute. Both files may be found in the
Template
folder.
- ordtyp.html
An Ordered List
- Red
- Green
- Purple
- Red
- Green
- Purple
|
Another example is afforded by nesting our list, or placing them
one inside the other like a nested wooden
doll.
- ordnest.html
An Ordered Nested List
- Red
- Tomato
- Potato
- Green
- Purple
|
Making An Unordered ListTOC
In the same way we can make an unordered list. The unordered list
differs from the ordered list in that the unordered list uses
bullets instead of numbers to highlight the list
elements .
- unolst.html
- unonst.html
Using Lists As OutlinesTOC
It is possible to use lists with the
TYPE attribute to create outlines. Start out with simple
outlines, and then try nested lists. Outlines can also be done
using the unordered list tags, but the effect is not as good, in my
opinion. A possible use of HTML lists in the classroom is as a way
of outlining a project or paper. Have the students write an
outline for an assigned book. Write an indexpage with the outline
and place it on the web. As time permits have the student create
strands with hyperlinks from the outline to webpages that contain
more information on the book. I have included an example on the
floppy disk at
which can be adapted for your outline.
...
- outln.html
- Chapter 5
- ...
- Chapter 6 Lists A La Carte
- Why Use List Elements?
- Using Lists
- Definition of the ordered list tag
- Definition of the unordered list tag
- Creating Your own Lists
- Making A Menu
- A Note on Museumpages
- Making a Simple Ordered List
- Making an Unordered List
- Using Lists As Outlines
|
A Complete List-PageTOC
To view the infopage use the anchor link below. To view the source
code you must choose the appropriate menu on your
browser.
- lists.html
The List of all Lists
Self-Made Bullet Lists
Place an image of your choice in
front of your message
Make the image stand out from the background.
|
Cut Away of lists.html
Note that each list is separated by a group of horizontal
bars. The technique of using horizontal bars is easy and gives a
document with different sections a more finished look. Gray and
white are often used as backgrounds for list type documents.
A Listing of ListsTOC
In this section we consider a strand of webpages as a listing
device.
- listing.html
The front page of our strand contains the
list of lists and uses a set of square green bullet icons as
markers. Below I have included the BODY of the
document list1.htm found in the
Templates folder.
Self-Made Bullet Lists
Place an image of your choice in
front of your message
Make the image stand out from the
background.
|
Definition ListsTOC
Definition lists are very useful. The idea is to use the first
line for the word to be defined and a set of indented lines for the
description. I list here some of the possible uses:
- Dictionaries.
- Glossaries.
- Table of Contents.
- Listings of websites with reviews.
I will use the following tags:
- < DL> begins a definition list. The
list must end with the tag
- < /DL>.
- < DT> stands for definition term.
Your World-Wide Web browser will create a list of your definition
terms and provide indentation for the actual definition. The
definition word should be followed by the ending tag
- < /DT>. This is the name of the word
that is to be defined. In general, you may wish to use the
definition lists to list any number of things. For instance, a you
might wish to create a museumpage. In such a case you would use
the definitions term to "define" the name of an anchor.
- < DD> denotes the actual definition.
Your World-Wide Web browser will indent the definition. This tag
can be used to create a quotation indentation as well. It needs no
end tag. The next tag ends the definition indentation.
Here we have an example of the use of the definition tags for
quotation
purposes:
- quote.html
Suppose that you are writting a document for display
on the Web and you wish to quote from a book or author. It is nice
to designate a quote and set it off by indentations. This is easily
done by the use of the defintion list elements. View the source
document to see how I was able to achieve this kind of indentation.
- Suppose that you are writing a document for
display on the Web
and you wish to quote from a book or
author. It is nice to designate a quote and set it off by
indentations. This is easily done by the use of the
definition list elements. View the source document to see how
this is done.
After you have finished your quotation, you may simply return to
writing the document with the standard margins.
|
We consider below an example of the definition lists. The webpage
which generated the figures below can be found in the
Templates folder in the
file:
- defn.html
A List of HTML Definitions... Definitions of Definition List Elements
-
Definition of < DL>
- A definition list tag in HTML which starts a definition list.
It must end with < /DL>
-
Definition of < DT>
- A definition term tag in HTML which
contains the object to be defined.
It may end with < /DT>.
-
Definition of < DD>
- A definition data tag in HTML which contains the definition.
It needs no end tag.
|
In the first case we simply wish to define the definition tags.
This is something of a silly example since the we have anchored the
definition tag names to the definitions of these tags at Sandia
National Laboratory.
The definition list does not have to contain an anchor. We have
included anchors on the definition terms because this is not an
uncommon practice. Also, if you are building lists of websites,
this is a nice format to follow.
As you can see the definition list
format for my browser does not add any white space between the
definitions. If you want each definition to stand out more, use a
separate < DL> tag for each definition as
below.
How can I get more white space?
-
Definition of < DL>
- A definition list tag in HTML which starts a definition list.
It must end with </DL>
-
Definition of < DT>
- A definition term tag in HTML which contains the
object to be defined. It may end with < /DT>.
-
Definition of < DD>
- A definition data tag in HTML which contains the definition.
It needs no end tag.
|
Notice that in the example above I have used with in the text
the tag representations < DL> and <
DT>. But these are reserved forms in HTML. How can you
make them appear as text? To do this requires the use of special
characters. For instance, since the less than sign and the greater
than sign are reserved in HTML for tags, we must use the special
characters
without the space to produce the symbol ">".
There is a link to a list of special character symbols in the
reference section below for those who wish to include them in
webpages. You can easily spend the rest of your life writing
webpages without using special characters, except if you wish to
write mathematical expressions or print HTML code.
Project Code Name:
ReferencesTOC
|