Lesson 5:   HTML List tags

1. Unordered Lists
   An Unordered List looks like this:
   
   

   <ul>
     <li>Red</li>
     <li>White</li>
     <li>Blue</li>
   </ul>
   
   

   UL stands for Unordered List and LI stands for List Item. <ul> and </ul> are the start and end tags of the list.   <li> is placed before each item in the list. Note that the <li>'s are indented. This is done to keep the list readable and easy to edit. The results look like this:
   
   
   • Red
     
   • White
     
   • Blue
     
   
   
   Three different types of symbols are used with unordered lists, discs, circles and squares. Unordered lists can be embedded inside other lists, as show below:
   
   

   <ul>
     <li>Red</li>
     <ul>
       <li>Pink</li>
       <li>Maroon</li>
     </ul>
     <li>White</li>
     <li>Blue</li>
   </ul>
   
   

   Note how the entire unordered list in imbedded between two <li>'s from the outer list. The results look like this:
   
   
   • Red
   • Pink
   • Maroon
   • White
   • Blue
   
   
   Note how the symbols switched to circles in the inner list. If another unordered list were to be imbedded inside the inner list, it would switch it squares. You can however change this order by using the type attribute. The type attribute is placed inside the <ul> tag like so:
   
   

   <ul type="square">
     <li>Red</li>
     <li>White</li>
     <li>Blue</li>
   </ul>
   
   

   Results:
   
   
   • Red
   • White
   • Blue
   
   
   The type attribute can also be imbedded inside the <li> tag:
   
   

   <ul>
     <li type='disc'>Red</li>
     <li type='circle'>White</li>
     <li type='square'>Blue</li>
   </ul>
   
   

   The results are:
   
   
   • Red
   • White
   • Blue
   
   
   
2. Ordered Lists
   An Ordered list sturcture looks the same as an Unordered list except it uses the <ol> tags:
   
   

   <ol>
     <li>Input</li>
     <li>Process</li>
     <li>Output</li>
   </ol>
   
   

   The results are:
   
   
   1. Input
   2. Process
   3. Output
   
   
   Ordered Lists have three different types: Numbers, Letters, and Roman Numbers. For example:

   <ol>
     <li>Input</li>
     <ol type="A">
       <li>Collect Data</li>
       <li>Store Data</li>
     </ol>
     <li>Process</li>
     <li>Output</li>
   </ol>
   
   

   The results are:
   
   
   1. Input
      
      1. Collect Data
      2. Store Data
   2. Process
      
   3. Output
      
   
   
   Both Letters and Roman Numbers are case sensitive.
   These three types can be used to create an outline structure:
   
   

   <ol type='I'>
     <li>Program Outline</li>
     <ol type='A'>
       <li>Input</li>
       <ol type='1'>
         <li>Collect Data</li>
         <ol type='a'>
           <li>Design Data Collection Form</li>
           <li>Design Data Verification Code</li>
         </ol>
         <li>Store Data</li>
       </ol>
       <li>Process</li>
       <li>Output</li>
     </ol>
     <li>Program Documentation</li>
     <li>User's Manual</li>
   </ol>
   
   

   The results are:
   
   
   1. Program Outline
      1. Input
         1. Collect Data
            1. Design Data Collection Form
            2. Design Data Verification Code
         2. Store Data
      2. Process
      3. Output
   2. Program Documentation
   3. User's Manual
   
   Note how the first <ol> is not closed until the last line and everything in between is indented. All imbedded <ol> tags are done the same way. Also note the fourth <ol> tag has a type="a" and the "a" is lower case. Study this example carefully.
   
   
   
3. Dictionary Lists
   A Dictionary listing has three tags:
   

   <dl>	Dictionary Listing
   <dt>	Dictionary Term
   <dd>	Dictionary Defination

   
   
   

   <dl>
     <dt>Cat</dt>
     <dd>Any of various other carnivorous mammals of the family Felidae,
     which includes the lion, tiger, leopard, lynx, and domestic cat.</dd>
   </dl>
   

   
   The results are:
   
   

   Cat

   Any of various other carnivorous mammals of the family Felidae,
   which includes the lion, tiger, leopard, lynx, and domestic cat.

   
   

Web Page Design: Exercise 5

If any of these images are not in the images folder copy them to the images folder:

NOTE: You may have to remove the [1] from the name of the copied images.
For example, the letter.gif may copy over to the images folder as letter[1].gif

Add this content to the Contact page just below the </h2> in the Main Body:

    There are four different ways to contact us here at Global Company:
    <br><br>

    <ol>

      <li><img src='images/letter.gif' align='right'>
      Write Us:
      <br><br>
      Global Company<br>
      000 Cold Old Road<br>
      Nowhereville, Oo 00000-0000
      <br><br><hr></li>

      <li><img src='images/ring.gif' align='right'>
      Ring Us:
      <br><br>
      000-000-0000
      <br><br><hr></li>

      <li><img src='images/email.gif' align='right'>
      E-mail Us:
      <br><br>
      <a href='mailto:ContactUs@GlobalCompany.com?subject=Email to Global
      Company'>ContactUs@GlobalCompany.com</a>
      <br><br><hr></li>

      <li><img src='images/form.gif' align='right'>
      Fill Out Our Form:
      <br><br>
~under construction~
      <br><br></li>

    </ol>

Save and View.

---