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 Menu



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

    1. Red
    2. Green
    3. 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.

    1. Indentations document the style.
    2. Indentations remind you of the position in the list.
    3. 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.


    4. ordtyp.html

      An Ordered List

      1. Red
      2. Green
      3. Purple

      1. Red
      2. Green
      3. Purple


      Another example is afforded by nesting our list, or placing them one inside the other like a nested wooden doll.


    5. ordnest.html

      An Ordered Nested List

      1. Red
        1. Tomato
        2. Potato
      2. Green
      3. 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 .


    6. unolst.html

      An Unordered List

      • Red
      • Green
      • Purple


    7. unonst.html

      An Unordered Nested List

      • Red
        • Tomato
        • Potato
      • Green
      • Purple




      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

      • Template\outln.htm

      which can be adapted for your outline. ...


    8. outln.html

      1. Chapter 5
        1. ...
      2. Chapter 6 Lists A La Carte
        1. Why Use List Elements?
        2. Using Lists
          1. Definition of the ordered list tag
          2. Definition of the unordered list tag
        3. Creating Your own Lists
        4. Making A Menu
          1. A Note on Museumpages
        5. Making a Simple Ordered List
        6. Making an Unordered List
        7. 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.


    9. 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.


    10. listing.html




      The List of all Lists

      Self-Made Bullet Lists

      A List of Different Icons

      An Ordered List

      Using the Default Bullet(Unordered Lists)

      Mixed List


      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:


    11. 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:


    12. 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

      • & lt

        without the space -to produce the symbol "<" and

      • & gt.

      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:

      Hors D'Oeuvres



      ReferencesTOC


    		•