\n"); } else { header("Content-type: text/html; charset=utf-8"); } ?> CS-081 Assignment 5

Introduction

The topics for this assigment are lists and the CSS box model.

Reference Material

The Assignment

Be sure you have completed Assignment 4 successfully before you start working on this one. It is too late to receive credit for Assignment 4, but you cannot receive credit for this assignment without completing that one first.

The first part of this assignment is to construct two lists on your blog page: an ordered list to hold blog entries, and an unordered list to hold navigation links.

  1. Each h2 element and all the p elements that follow it, until the next h2, make up a blog entry. Wrap each complete blog entry in a li element, and wrap all these list items in an ol element. Give this list the id the value, "blog-entry-list".

    Do not include the paragraphs with the navigation links in the last blog entry.

    Load your web page and make sure it validates with no warnings or errors. The difference you should see from the previous assignment is the appearance of a number to the left of each h2:

    screenshot of blog list item

  2. In Assignment 4, the navigation links were in a paragraph with the id of "nav-links". Change that p tag to an ul tag. Wrap each a element in a li element; remove any characters or character entities from between the links, except for normal spaces.

    Again, check your page for errors. The nav links should be centered and each one should have a bullet next to it:

    screenshot of nav list

The second part of the assignment is to use the CSS Box Model to change the appearance of various boxes on the blog page.

Give the entire list of blog entries a different background-color from the rest of the page. Make sure the text remains easy to read: adjust the color if necessary.

Give the list of navigation links yet a different background-color. Adjust the color of the a elements as well.

There is already a rule in your stylesheet for all paragraphs with the class "lead-paragraph". Edit main.css to make those paragraphs distinctive:

Submit The Assignment

Be sure to check your blog page carefully using Firefox: there must be no errors or warnings, and all the CSS rules have to cause their intended effects. You must also double-check the page using to the W3C validators: there must be no warnings or errors that they can detect either.

Check your home page to make sure it is still legible and functional.

Run a link check on your site before submitting the assignment; fix any errors. (Right click in the Files panel on the right, select Check Links, then select Entire Local Site (keyboard shortcut: Control-F8). Fix any broken links.

Submit the assignment by midnight of the due date:

  1. To submit this assignment, simply send me an email message telling me that your web page is ready for me to look at: I will copy it from Oak to Babbage, and check it out there.

    If your have trouble with the roaming profile feature of the lab, copy your My Website directory to your H:\ drive. Mention that in your email message, and I will copy your My Website directory to Babbage from your home directory instead of from your profile directory on Oak.

  2. Be sure to put your name in the body of your email message!
  3. The Subject line must be CS-081 Assignment 5 to avoid my spam filters.
  4. Send your email to Christopher.VickeryATqc.cuny.edu. (Fix up the 'AT' part.)

See the course home page for grading and late homework policies.