Let's Get Started with Lists!

  1. Open Notepad++
    1. Choose: File -> New
    2. Name the file: lists.html
    3. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    4. Open your index.html file
    5. Open your styles.css file
    6. Copy the List Page Template (HTML) code (below)
    7. Paste that code into your lists.html file
    8. Change the words in each list
    9. Add some CSS styles to the ul, ol, dl, and li tags in your styles.css file.
      For example: list-style, color, font-family, etc.
    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

List 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>
    <h1>Page heading goes here</h1>
    <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>
  </body>
</html>

Example