Overview

This assignment gives you practice creating lists: nested lists, both ordered and unordered. You'll be doing two tasks, each of which takes recent United States legislation, and making them into HTML lists.

To review the coding for lists in HTML, see module W22d.

Save your XHTML template file as w22m-task1.htm, and title the page, "Sarah Strong Ordered List" (changing Sarah Strong to your own name). Make sure your name is listed as author.

Open file W22m_s1.txt, copy the text, and paste it into the body of your w22m-task1 file.

An example of what the page should look like in a browser is available. This is shown in Opera 7.1, reduced to 60% in full-screen mode in order to fit the entire document on one screen, so yours will look bigger, longer, and narrower. However, you should be able to see the numbers, indenting, and overall formatting. Link here to view.

This is a list of US Government Web sites. We need to display this as an outline with appropriate numbers and letters for the sections and subsections.

1. Style the body of the document as follows:
   1. Font family: Garamond, Georgia, Times New Roman, serif
   2. Color: Brown
   3. Background color: #fc0
2. The first line of text is a heading 1 and should be centered.
3. The next four lines, "This page contains..." down to "...resources in general", is a paragraph explaining what's on the page.
4. The 6th line of text, "executive branch", is a Heading 2.
5. The rest of the document is in outline form; you will be formatting it as a numbered list.
   1. Lines with no indent are part of the main list, and should be formatted with upper-case roman numerals: I, II, II, IV...
   2. Lines with 1-tab indent are part of list items in the main list, and should be shown with upper-case alphabetic letters: A, B, C, D...
   3. Lines with 2-tab indent are part of list items in the second list, and should be shown with arabic numerals: 1, 2, 3, 4...
   4. Lines with 3-tab indent are part of list items in the third list, and should be shown with lower-case alphabetic letters: a, b, c, d...
   5. Lines with 4-tab indent are part of list items in the third list, and should be shown with lower-case roman numerals: i, ii, iii, iv...

Check your formatting in a browser. Compare what the browser shows with the text file: the indenting should be the same, with the addition of the appropriate numbers and letters at the beginning of each line.

If you have a problem:

The most frequent difficulty with nested lists is when the main list is ended too soon.

• In this document, the main list should begin at the beginning of the outline ("Executive Office of the President"), and not end until the very end of the document, just before </body>.
• Remember also that each list (except the main one) is part of a list item: that list item doesn't end until after the nested list ends.

When you've got the ordered list looking the way it should, save the file and validate it.

Save your XHTML template file again, this time as w22m-task2.htm, and title the page, "Sarah Strong Unordered List" (changing Sarah Strong to your own name).

Open file W22m_s2.txt, copy the text, and paste it into the body of your w22m-task2 file.

This is part of a list of Web site contents from the University of Michigan Medical System. This time, we'll display the contents with various types of bullets.

1. Style the body of the document as follows:
   1. Font family: Verdana, Helvetica, Arial, sans-serif
   2. Color: Navy
   3. Background color: #9cf
2. The first line is a heading 1 and should be centered.
3. The rest of the document is an outline, which you will be formatting as an unordered list.
   1. Lines with no indent are part of the main list, and should be formatted with square bullets.
   2. Lines with 1-tab indent are part of list items in the main list, and should be shown with disc bullets.
   3. Lines with 2-tab indent are part of list items in the second list, and should be shown with circle bullets.
   4. Lines with 3-tab indent are part of list items in the third list, and should be shown with disc bullets.

An example of what this page should look like in a browser is also available. This is shown in Opera 7.1, reduced to 70% in full-screen mode in order to fit the entire document on one screen. Again, your document will look bigger, longer, and narrower. Link here to view.

If you have problems, check the troubleshooting tips at the end of Task 1. When you've got the unordered list looking the way it should, save the file and validate it.

When you're done, double-check that the assignment meets the specifications above. Make sure your code is formatted according to best practices for indenting and commenting.

Attach both files to email to the instructor. Be sure your email meets the formal requirements: name, class, section and exercise (W22m), and that it follows standard business-email practice.