Exercise 4: Lists

Resources for this exercise:

Step 1 - Create your exercise 4 page

1.1) Using a basic text editor create a new HTML document, separate from your home page. This page will become your exercise 4 page.

1.2) This page must display your name and "Exercise 4".

1.3) This page's <title> must indicate that this is your exercise 4, so it should say something like "John Sky's DM60 Exercise 4".

1.4) This page must contain the HTML 5 DocType that will enable you to use an HTML validator, as explained in How to Use the W3C HTML and CSS Validators.

1.5) This page must contain the character encoding meta tag (as explained in Character Encoding for Web Pages). Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the <head> section. So right after the <head> tag, place this line of code:

<meta charset="utf-8">

1.6) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

Make sure you use the correct links (for HTML 5).

1.7) This page must demonstrate the correct use of the three types of lists, and, in addition to three seperate lists, three nested lists. Each unordered and ordered list must have at least three list items; each discussion list (sometimes called definition lists) must have at least three discussion term <dt> and three discussion description <dd> elements. Each nested list must have at least ten items total. This means that, counting each nested list as one list, your page will have a total of six lists

1.8) Horizontal rules must be between (not within) each of the six lists.

1.9) The first list must be an unordered list; followed by a horizontal rule; followed by an ordered list; followed by a horizontal rule; followed by a discussion list; followed by a horizontal rule; followed by a nested list (nesting an unordered list inside an unordered list); followed by a horizontal rule; followed by a nested list (nesting an ordered list inside an ordered list); followed by a horizontal rule; followed by a nested list (nesting an unordered list inside an ordered list).

Note that when you are nesting one list in another, you are actually nesting one list (a <ul> or <ol>) into the list item (an <li>) of another list.

1.10) All list item elements: <li> must have their ending tags: </li>. This is the most important requirement of this exercise.

1.11) Remember that each of the six lists must be separated by a horizontal rule <hr>, and that each list must use different content.

1.12) This page must demonstrate the correct use of <h1>, <h2>, <strong>, and <em>. You could choose, for example, to have one <h1> at the top of the page, and to have an <h2> just before each list.

1.13) In summary, this page demonstrate the correct use of the following tags:

Description Element
HTML document <html>
head section <head>
body section <body>
title <title>
heading 1 <h1>
heading 2 <h2>
paragraph <p>
emphasis <em>
strong emphasis <strong>
horizontal rule <hr>
unordered (bulleted) list <ul>
ordered (numbered) list <ol>
list item <li>
definition list <dl>
definition term <dt>
definition data <dd>

In other words, this page must contain the basic HTML structural tags, some formatting tags, the three different types of lists (an unordered list, an ordered list, and a definition list), and make use of a nested list.

For information on basic HTML tags, see the HTML & Web Design: Learning Aids section of the resources page. In particular, see the HTML Lists section of the w3schools site.

1.14) Save this file as a text-only file, and when you save the file name it "exercise4.html". Make sure you name it exactly as it says: all lowercase, with no spaces in the file name.

1.15) Upload this page into the root of your "public_html" folder on the webhawks.org server.

See the How to Upload to Webhawks.org with Fetch (Macintosh) and How to Upload to Webhawks.org with CoreFTP (Windows) for information on uploading.

1.16) View your page (the page on the server, not the page on your disk) in a Web browser:

Go to:
http://webhawks.org/~yourusername/exercise4.html
to view your exercise 4 page.

1.17) Make sure the HTML on this page validates (using the HTML 5 Doctype) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator link. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

1.18) If you have used any CSS (you probably haven't, as we haven't covered style sheets yet), make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

1.19) If there are any errors, fix them, re-upload the page, and validate it again.

Step 2 - Modify your home page

2.1) Modify your home page to include a relative link that goes to your exercise 4 page.

2.2) Make sure your home page has a a relative link that goes to your exercise 3 page.

2.3) Make both links into list items of an unordered list. As you create more homework exercises, this list of links to your exercises will grow.

2.4) As always, your home page must contain links to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)

2.5) View your home page (the page on the server, not the page on your local disk) in a Web browser to make sure your links work.

2.6) Make sure the HTML on this page validates (using the HTML 5 Doctype) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator link. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

2.7) If you have used any CSS (you probably haven't, as we haven't covered style sheets yet), make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.

2.8) If there are any errors, fix them, re-upload the page, and validate it again.

Step 3 - Submit the feedback form

3.1) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on . Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on //.