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

Chapter 10. Adding Lists to XHTML Documents > 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 XHTML shell and title it lists:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Lists</title>
    </head>
    <body>
    </body>
    </html>
    
  2. Now add an unordered container:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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 XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Lists</title>
    </head>
    <body>
    <ul>
    <li>A reading lamp</li>
    <li>A telephone</li>
    <li>A clock</li>
    <li>A computer</li>
    <li>Stacks of paper</li>
    <li>Books</li>
    </ul>
    </body>
    </html>
    
  4. Now separate the ordered list with a paragraph and add a new description:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Lists</title>
    </head>
    <body>
    <p>What's on my desk:</p>
    <ul>
    <li>A reading lamp</li>
    <li>A telephone</li>
    <li>A clock</li>
    <li>A computer</li>
    <li>Stacks of paper</li>
    <li>Books</li>
    </ul>
    <p>What's in my purse:</p>
    </body>
    </html>
    
  5. Add the ordered list container:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Lists</title>
    </head>
    <body>
    <p>What's on my desk:</p>
    <ul>
    <li>A reading lamp</li>
    <li>A telephone</li>
    <li>A clock</li>
    <li>A computer</li>
    <li>Stacks of paper</li>
    <li>Books</li>
    </ul>
    <p>How to find my wallet:</p>
    <ol>
    
    </ol>
    </body>
    </html>
    
  6. Add the list items:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Lists</title>
    
    </head>
    <body>
    
    <p>What's on my desk:</p>
    
    <ul>
    
    <li>A reading lamp</li>
    <li>A telephone</li>
    <li>A clock</li>
    <li>A computer</li>
    <li>Stacks of paper</li>
    <li>Books</li>
    
    
    </ul>
    
    <p>How to find my wallet:</p>
    
    <ol>
    <li>Go up the stairs.</li>
    <li>Open the door to my office.</li>
    <li>Climb over the mess.</li>
    <li>Move all the papers off of my desk.</li>
    <li>My wallet will be at the bottom of the pile.</li>
    </ol>
    
    </body>
    </html>
    
    
    					  
  7. Save the file as lists.html and compare it to Figure 10.4.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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