• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 8. Adding Lists > Building a Page with Lists

Building a Page with Lists

In this task, you'll build a page with both an ordered and unordered list.

  1. Begin with an HTML shell and title it lists.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    
    <HTML>
    <HEAD>
    
    <TITLE>lists</TITLE>
    </HEAD>
    
    <BODY>
    
    
    </BODY>
    </HTML>
    
  2. Now add an unordered container:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    
    <HTML>
    <HEAD>
    
    <TITLE>lists</TITLE>
    </HEAD>
    
    <BODY>
    
    <UL>
    
    </UL>
    
    </BODY>
    </HTML>
    
  3. Add several list items with a description and appropriate formatting:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    
    <HTML>
    <HEAD>
    
    <TITLE>lists</TITLE>
    </HEAD>
    
    <BODY>
    
    What's on my desk:
    <P>
    
    <UL>
    
    <LI>A reading lamp
    <LI>A telephone
    <LI>A clock
    <LI>A computer
    <LI>Stacks of paper
    <LI>Books
    
    </UL>
    
    </BODY>
    </HTML>
    
  4. Now separate the ordered list with a paragraph and add a new description:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    
    <HTML>
    <HEAD>
    
    <TITLE>lists</TITLE>
    </HEAD>
    
    <BODY>
    
    What's on my desk:
    <P>
    
    <UL>
    
    <LI>A reading lamp
    <LI>A telephone
    <LI>A clock
    <LI>A computer
    <LI>Stacks of paper
    <LI>Books
    
    </UL>
    <P>
    
    What's in my purse:
    <P>
    
    </BODY>
    </HTML>
    
    
    					  
  5. Add the ordered list container:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    
    <HTML>
    <HEAD>
    
    <TITLE>lists</TITLE>
    </HEAD>
    
    <BODY>
    
    What's on my desk:
    <P>
    
    <UL>
    
    <LI>A reading lamp
    <LI>A telephone
    <LI>A clock
    <LI>A computer
    <LI>Stacks of paper
    <LI>Books
    
    </UL>
    <P>
    
    What's in my purse:
    <P>
    
    <OL>
    
    </OL>
    </BODY>
    </HTML>
    
    
    					  
  6. And the list items:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    
    <HTML>
    <HEAD>
    
    <TITLE>lists</TITLE>
    </HEAD>
    
    <BODY>
    
    What's on my desk:
    <P>
    
    <UL>
    <LI>A reading lamp
    <LI>A telephone
    <LI>A clock
    <LI>A computer
    <LI>Stacks of paper
    <LI>Books
    
    </UL>
    <P>
    
    How to find my wallet:
    <P>
    
    <OL>
    <LI>Go up the stairs.
    <LI> Open the door to my office.
    <LI>Climb over the mess.
    <LI>Move all the papers off my desk.
    <LI>My wallet will be at the bottom of the pile.
    
    </OL>
    </BODY>
    </HTML>
    
    
    					  
  7. Save the file as lists.html and compare it to Figure 8.4.

    Figure 8.4. An unordered and ordered list on the same page. The unordered list is a random list of items; the ordered list describes a sequence of actions.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint