Dixie's darlin Virtual Notebook
Created with help from Virtual University

Assignment Week Two (cont.)
7) Practice New Tags (cont.)

Lists

                     There are several different types of lists that can be very useful.
              These lists are not always read the same by all browsers. You will see there are                   some variations in both the line spacing and the type of bullet displayed.

                   To look at a particular type of list merely click on the one you want to see.


Un Numbered Lists
Numbered Lists
Nested Lists
Definition Lists





UN-NUMBERED LISTS

<ul>

              Begins an un-numbered, indented list. Each item in that list is then prefaced with                    the <li>tag. It is not necessary to insert a break at the end of each line.

              The <li> function will automatically create the new line. You must end with the                         </ul> tag.

<ul>
<li>
apples
<li>pears
<li>oranges
</ul> appears as:

  • apples
  • pears
  • oranges




ORDERED or NUMBERED LISTS

<ol>

              Begins a numbered, indented list. Each item in that list is then prefaced                                 with the  <li>  tag. It is not necessary to insert a break at the end of each                                line. The <li> function will automatically create the new line.   You must                                   always close with the  </ol>  tag.



<ol>
<li>
apples
<li>pears
<li>oranges
</ol> appears as:

  1. apples
  2. pears
  3. oranges

NESTED LISTS

              A nested list begins in the same way as an un-numbered list. The nesting                                (or indenting in of the list) is created by typing in the <ul> tag several times.
               You must close with the </ul> tag, repeating one time for every time that the                        <ul> tag is used.

              In the following example,  <ul>  is used 3 times, therefore </ul> MUST also be                     used 3 times.

<ul> <li>oranges
<ul> <li>apples
<ul> <li>candy
</ul> </ul> </ul> appears as:
  • oranges
    • apples
      • candy






DEFINITION LISTS

              Definition lists are different to other lists in that they do not use the <li> tag, and no              "bullet" appears at the beginning of each listed line.

              There are 3 tags used within a definition list:



<dl> Begins the list. The list is closed with the </dl> tag.
<dt> Is the term to be defined.
<dd> Is the definition.

<dl>
<dt>
oranges
<dd>An orange colored object
<dt>peach
<dd>A fruit that has fuzz
</dl> appears as:


oranges
An orange colored object
peach
A fruit that has fuzz.