:: crazy8 #web_resources ::


Lists
Tutorial by
Mr. Baldy

Since you got that, maybe you'll want to put your information in an organized way. Of course you could make some line breaks and put numbers to make the list, but there's an easier and more organized way.

Lists can be simple if you understand what is happening with the tags. You start with a statement saying that you are starting a list. Then you say that you are starting a list item. You end the list item. Then, you add the iteams you want. After that, you say that your list is over. Simple.

There are two main types of lists: Ordered, and Unordered. Ordered using number, letters, Roman numerals, etc. to let the viewer know how many are in the list. Unordered uses shapes, etc. to act as bullets for just marking the beginning of each list item.

We'll first start with the unordered list.

<ul></ul>

I'm sure anyone with half a brain could figure out that that is the tag for an unordered list (UL). This just states that what is between them is a list. It created an indent much like that of the blockquote tag, but has a different function. Next, to make items within the list, you just add the LI (list item tag) like this:

<ul>
   <li>List Item #1</li>
   <li>List Item #2</li>
</ul>

You don't have to use the ending LI tag, but it is a good idea to, especially if you are putting a lot of info in each item. That would show up as this:

  • List Item #1
  • List Item #2

Now then... Maybe you don't want to use circles to mark the list items. All you have to do is embed some more information within the tag. There are three types of markers, they are:

<ul>
   <li type="disk">List Item #1</li>
   <li type="square">List Item #2</li>
   <li type="circle">List Item #3</li>
</ul>

That would show up as this:

  • List Item #1
  • List Item #2
  • List Item #3

Now some people want their lists numbers. This may be to show how many things you have, or as a way they like to use better.

First we start with the basic tag for an ordered list (OL):

<ol></ol>

Simple. Yeah. Now again, you add the LI tags to make the lists:

<ol>
   <li>List Item #1</li>
   <li>List Item #2</li>
   <li>List Item #3</li>
</ol>

It makes a simpled numbered list:

  1. List Item #1
  2. List Item #2
  3. List Item #3

Again, maybe you don't want numbers, just more embedding.

<ol>
   <li type="1">List Item #1</li>
   <li type="a"&>List Item #2</li>
   <li type="A"&>List Item #3</li>
   <li type="i"&>List Item #4</li>
   <li type="I"&>List Item #5</li>
</ol>

That would show up as this:

  1. List Item #1
  2. List Item #2
  3. List Item #3
  4. List Item #4
  5. List Item #5

These lists can also be embedded into each other like this:

<ol>
   <li>List Item #1</li>
   <li>List Item #2</li>
   <li>List Item #3</li>
          <ul>
             <li>List Item #1</li>
             <li>List Item #2</li>
             <li>List Item #3</li>
             <li>List Item #4</li>
             <li>List Item #5</li>
          </ul>
   <li>List Item #4</li>
   <li>List Item #5</li>
</ol>

That would show up as this:

  1. List Item #1
  2. List Item #2
  3. List Item #3
    • List Item #1
    • List Item #2
    • List Item #3
    • List Item #4
    • List Item #5
  4. List Item #4
  5. List Item #5

That should be it for lists. They are hard to use effectively, but sometimes they are used.

<< back  |  top  |  next >>










. . . . . . . . . . . . . . . . . . . . . . .
All html, graphics, and javascript is © 1999 crazy8 #web_resources
All quake, quake 2, and quake arena content is © id software
All unreal content is © epic megagames, and half-life © valve software
Page designed by mr. baldy ( webmaster )
home tutorials free gfx design tips templates reviews consultation contact