Lists

Another handy feature of HTML is the ability to construct lists.  Lists can be ordered (numbered) or unordered or definition lists.

In the left pane are two examples of lists.

In the right page is the way that those lists will render in your browser.

Following that is an explanation of each element of this snippet.

  
  
 <html>
  <head>
  </head>       
   <body>
<p>Tags this tutorial has yet to cover:</p>
        <ul type="circle">
         <li>Lists</li>
         <li>Breaks</li>
         <li>Lines</li>
         <li>Symbols</li>
         <li>Images</li>
         <li>Links</li>
         <li>Tables</li>
        </ul>
   </body>
</html>

Tags this tutorial has yet to cover:

  • Lists
  • Breaks
  • Lines
  • Symbols
  • Images
  • Links
  • Tables

After the start of our body tag in the short web page example above, we start with a short paragraph introducing the list (this was optional).  Next the
<ul type="circle"> tag starts the list and begins each item in the list with a bulleted hollow circle. You can also use "square" or the default "disc".  Each line item in the list is enclosed in a pair of <li>list item</li> tags.  The </ul> tag ends the list.

Below is another example, this time using a fancier list.  There are also more list tag attributes available if you choose to delve further into list structures.

 
<h3>Topics which may be included in HTML 102</h3>
<!--** we are using an ordered list **-->
<ol type="1" start="1">
   <li>Frames</li>
   <li>Uploading your site</li>
   <li>Document headers</li>
   <li>Image maps
     <!--** nested list **-->
     <ol type="a" start="1">                 
        <li>Server side maps</li>
        <li>Client side maps</li>
     </ol>
     <!--** end of nested list **-->
   </li>
   <li>Forms</li>
   <li><u>CSS</u>
    <dl>
     <dt>Acronym for:</dt>
         <dd>Cascading Style Sheets</dd>
     <dt>Three Types:</dt>
         <dd>External, Embedded, Inline</dd>
    </dl>
   </li>
   <li>Standards</li>
</ol>
<!--** end of ordered list **-->

Topics which may be included in HTML 102

  1. Frames
  2. Uploading your site
  3. Document headers
  4. Image maps
    1. Server side maps
    2. Client side maps
  5. Forms
  6. CSS
    Acronym for:
    Cascading Style Sheets
    Three Types:
    External, Embedded, Inline
  7. Standards
Above we tried to get a little slick with our lists, nesting three lists inside each other.  We introduce the list with an optional <h3> heading statement followed by a line of comment.

Next we specify an <ol> ordered list using a couple of the attributes for the list tag.  type="1" means number the items in the list,  start="1" means start the list at number 1 (the expected default for that matter).

At item #4, "Image maps", we insert another list type, also ordered, but this time we chose to order the list with alphabetic notations, type="a" start="1" which means use lower case letters for each entry, starting with "a".

Inside item #6, which we happened to <u>nderline, we introduce another list type, the definition list.  Here, <dl> starts the definition list. Each entry in the list has two parts, the <dt>Acronym for:</dt> is known as the definition term and it must be followed by the definition definition (Yes, that's what it's called!) as we did with our  <dd>Cascading Style Sheets</dd> tag.  We followed with another <dt>...<dd> set and then closed the definition set with our </dl> tag.  Finally, make note of the fact that we had to close the <li> tag of the list that contained our <dl> list of definition items with a </li> tag.  This is important to understand when using nesting levels as we did and is an easy place to make a mistake.

 

Previous Page

Next Page

 

Email:   

 raykelly@rakelly.com