Lists

        The next tutorial here for you is one on lists. You've probably seen them on web pages before but not have known how to make them. Here are a few examples of lists:



        Whatever they look like, they are all lists. I showed you two types above, unordered and ordered. There is a third type called a definition list. It has no special markings of any kind. We will discuss those last. First, we will discuss unordered and ordered lists. Let's start with unordered lists. Let's take the typical attribute list. This list will be for Horizontal Rulers.

This is a demonstration of Unordered Lists. This list is for HR

ALIGN COLOR NOSHADE SIZE WIDTH

        That was the list straight from the Basics tutorial, specifically the list for the Horizontal Rulers, HR. There are two tags used in the unordered list. Those tags are shown in the script below :

<UL> <LI>ALIGN <LI>COLOR <LI>NOSHADE <LI>SIZE <LI>WIDTH </UL>

The <UL> stands for, obviously, Unordered List, and starts the listing process. The <LI> stands for List Item. Anything after this will be an item in the list. </UL> ends the listing process.

        There was the explanation list again. That was an unordered list. The unordered list is used a lot in this site. The list of attributes is an unordered list. Why, here is that unordered list of attributes again :

UL attributes : COMPACT TYPE

        That list is the list of attributes for <UL>. The <LI> tag has no attributes at the current time. The COMPACT attribute has no values. It reduces the amount of white space between list items so to make the list more compact. I have never used it, but it is useful. Many of my HTML friends have used it.



         The next attribute is the TYPE attribute. It designates the pattern of the bullet in front of the item. The default is the circle, or disc, which is a filled-in circle. That value is "disc". The next is a circle with no colored center, just a white circle. The value for that is "circle". The last value is a square, and the value is, almost obviously, "square".

<UL TYPE="disc"> <UL TYPE="circle"> <UL TYPE="square">

---

        Our next topic is Ordered Lists. They bullets in front of them are numbers, Roman Numerals, or letters. There are two attributes for this tag, <OL>. They are :

TYPE START

        This list was a numbered ordered list. The numbers you see are the default setting. The script for this is not unlike the script for the last one I showed you. The only difference is that instead of <UL>, you have <OL>. Simple enough. The first attribute we will discuss is the TYPE attribute. This should be self-explanitory, so here is the list :

1. TYPE="1" I. TYPE="I" i. TYPE="i" A. TYPE="A" a. TYPE="a"

        That should take care of that attribute. Now we get to START. This tells the browser at which point to start the list. For example, if TYPE was set to be A, then START would be a capital letter. If START was set to be C, then the first list item would look like this :



         Of course, you would still have to put, (<LI>I love this site) down as the first list item, but you get the idea of START.

<OL TYPE="I" START="XII">

---

        Now we get to the fun part, and the easy part. The following tags have no attributes. They make up a definition list. Take a look at a definition list telling different programing languages and their abbreviations.

HTML

HyperText Markup Language

JScript

JavaScript

CSS

Cascading Style Sheet

        Even easier is writing it. You only need to know three tags, no attributes, and only one tag requires that it be ended. Take a look at this script.

<DL> <DT>HTML <DD>HyperText Markup Language <DT>JScript <DD>JavaScript <DT>CSS <DD>Cascading Style Sheet </DL>

        This script requires almost no explanation, but the complete explanation is found just below this paragraph, but first, notice that only one tag, <DL> requires the appropriate ending tag. This makes writing a definition list very easy.

The <DL> stands for Definition List. It starts the listing process. <DT> stands for definition term. It describes the unindented term in the list. <DD> stands for Definition Description. It describes the indented part of the list, the description of the term.

---

        I hope you have enjoyed our little lists tutorial chat. Lists are easy to make and make the site more complete when they are needed. Have fun!!!