Let's get started with a Lists Web Page!

  1. Open Notepad++
    1. Open your index.html file
    2. Open your styles.css file
    3. Choose: File -> New
    4. Copy the HTML Lists Page Template (HTML) code (below)
    5. Paste that code into your new file
    6. Choose: Save
    7. Save the file as: lists.html
    8. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    9. Change your page title, your Author name, and your page heading to something appropriate
    10. In your index.html file
    11. Add a link to this page.
      Change: <li>Create a List Page</li>
      to: <li><a href="lists.html">Create a List Page</a></li>
    12. Save your changes
    13. Click: Run
    14. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    15. View your web page
    16. Make any changes
    17. Save your changes

HTML Lists Page Template (HTML)

<!doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- Author: put your name in this comment line --> 
    <link href="includes/styles.css" rel="stylesheet"/>
  </head>
  <body>
    <h2>put page heading here</h2>
    <ol>
      <li>This is an ordered list</li>
      <li>This is an ordered list</li>
      <li>This is an ordered list</li>
    </ol>
    <ul>
      <li>This is an unordered list</li>
      <li>This is an unordered list</li>
      <li>This is an unordered list</li>
    </ul>
    <dl>
      <dt>This is a definition list</dt>
        <dd>This is a definition list item</dd>
        <dd>This is a definition list item</dd>
      <dt>This is a definition list</dt>
        <dd>This is a definition list item</dd>
        <dd>This is a definition list item</dd>
      <dt>This is a definition list</dt>
        <dd>This is a definition list item</dd>
        <dd>This is a definition list item</dd>
    </dl>
    <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
  </body>
</html>

Example