Exercise 3
Lists
Resources for this exercise:
- See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
- See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
- See the How to Name Files and Directories page. Failure to follow proper naming conventions will result in lost credit.
- See the Our Class Web Server page for information on the server.
- See the HTML & Web Design: Learning Aids section of the Resources page for information on basic HTML tags.
- 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) Using a basic text editor create a new HTML document, separate from your home page. This page will become your exercise 3 page.
2) This page must display your name and "Exercise 3".
3) This page's <title> must indicate that this is your
exercise 3, so it should say something like "John Sky's DM60A Exercise
3".
4) This page must contain the Doctype that will enable you to use an HTML validator:
As explained
in How to Use the W3C HTML and CSS Validators: At
the very beginning of your document, before the <html> tag,
place this line of code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5) 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 4.01 Transitional, not XHTML 1.0 Strict, as you are using an HTML, not XHTML, DocType. (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.)
6) This page must demonstrate the correct use of the three types of lists. Each unordered and ordered list must have at least three list items; each definition list must have at least three definition term and three definition list elements.
7) This page must demonstrate the correct use of the "type" attribute,
and the "square" value, of an unordered list <ul>.
8) This page must demonstrate the correct use of the "type" attribute,
and the "circle" value, of an unordered list item <li>.
9) This page must demonstrate the correct use of the "type" attribute,
and the "A" value, of an ordered list <ol>.
10) This page must demonstrate the correct use of the "type" attribute,
and the "a" value, of an ordered list item <li>.
11) This page must demonstrate the correct use of a nested list, using either ordered or unordered lists (to satisfy this requirement you can nest an ordered list in an ordered list, an unordered list in an unordered list,or nest one of these in the other). This nested list must be separate from, and in addition to, the three lists from step 6. Note that when you are nesting one list in another, you are actually nesting one list into the list item of another list.
12) All list item elements: <li> must
have their ending
tags: </li>.
13) Each of the four lists must be separated by a horizontal rule <hr>.
14) This page must demonstrate the correct use of <h1>,
<h2>, <strong>, <em>, and <br>.
15) In summary, this page demonstrate the correct use of the following tags:
| Description | Element | Attribute | Value |
|---|---|---|---|
| HTML document | <html> |
||
| head section | <head> |
||
| body section | <body> |
||
| title | <title> |
||
| heading 1 | <h1> |
||
| heading 2 | <h2> |
||
| paragraph | <p> |
||
| emphasis | <em> |
||
| strong emphasis | <strong> |
||
| line break | <br> |
||
| horizontal rule | <hr> |
||
| unordered (bulleted) list | <ul> |
type | square |
| ordered (numbered) list | <ol> |
type | A |
| list item | <li> |
type | circle |
| list item | <li> |
type | a |
| 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.
16) Save this file as a text-only file, and when you save the file name it "exercise3.html". Make sure you name it exactly as it says: all lowercase, with no spaces in the file name.
17) Upload this page into 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.
18) View your page (the page on the server, not the page on your disk) in a Web browser:
Go to:
http://webhawks.org/~yourusername/exercise3.html
to view your exercise 3 page.
19) Make sure this page validates (using the HTML 4.01 Transitional DTD) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can now easily do this by clicking on your validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
20) 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/validator-uri.html. 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.
21) If there are any errors, fix them, re-upload the page, and validate it again.
22) Submit the feedback form. To receive full credit for this exercise you must submit the feedback form before it expires. This exercise is due on 6/26/08. 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 06/28/08.