QuickRead 7: Lists


The Unordered list     <ul attributes>
A lot of times, you will want to format your text pointwise. Lists come in a number of different styles. First is the unordered list which is defined by the <ul> and </ul> opening and closing tags. Within these two tags you would use the tag <li> to list your individual items. There is also a </li> closing tag, but, as it is optional, it is frequently ignored.

For example:

  • Rene Campari
  • Scott Harrington
  • Tatiana Wishbone
  • Bob Trailerpark
<ul>
<li>Rene Campari
<li>Scott Harrington
<li>Tatiana Wishbone
<li>Bob Trailerpark
</ul>

We can have also lists inside lists and have different bullet types for each(the default that we see in the first example is called disc.

  • Rene Campari
    • Marge
    • Jason
  • Scott Harrington
  • Tatiana Wishbone
  • Bob Trailerpark
<ul type=square>
<li>Rene Campari
   <ul type=circle>
   <li>Marge
   <li>Jason
   </ul>
<li>Scott Harrington
<li>Tatiana Wishbone
<li>Bob Trailerpark
</ul>

The values that the attribute type can have for the ul tag are, square, disk, circle.
.
.
The Ordered list     <ol attributes>
The ordered list has five numbering or lettering options.

  1. Rene Campari
    1. Marge
    2. Jason
  2. Scott Harrington
  3. Tatiana Wishbone
  4. Bob Trailerpark

<ol type=1>
<li>Rene Campari
   <ol type=a>
   <li>Marge
   <li>Jason
   </ol>
<li>Scott Harrington
<li>Tatiana Wishbone
<li>Bob Trailerpark
</ol>


Here's a complete listing of ordered types:

  • Hindu-Arabic: <type =1>
  • Uppercase alphabets: <type =A>
  • Lowercase alphabets: <type =a>
  • Uppercase Roman: <type =I>
  • Lowercase roman: <type =i>


See how useful lists are.

The start attribute is used to start numbering at something other than 1. For example
  1. This should be 4.
  2. This is 5.
  3. This is 6 ...
<ol start=4>
<li>This should be 4.
<li>This is 5.
<li>This is 6 ...
</ol>

The <li> tag has an attribute called value. This attribute is used to go out of order. For example
  1. First
  2. Second
  3. Would have been third, now Fifth
  4. Sixth
  5. Seventh

<ol type=A>
<li>First
<li>Second
<li value=5>Would have been third, now Fifth
<li>Sixth
<li>Seventh </ol>

Notice that value (and also start for that matter) works with the other types of ol, in this case type=A for uppercase alphabetic counting.

.
.
Get behind the wheel!
Try typing out the following. Also use your own stuff. Be imaginative!

<html>
<head><title>Lists</title></head>
<body bgcolor=gray text=white link=orange alink=yellow vlink=purple>

<ul type=square>
<li>Rene Campari
   <ol value=circle>
   <li>Marge
   <li>Jason
   </ol>
<li>Scott Harrington
<li>Tatiana Wishbone
<li>Bob Trailerpark
</ul>

</body>
</html>




Type your code here:

.


Index
1   2   3   4   5   6  

7

  8   9   10   11