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

Introduction

This assignment builds on the previous one, so if you have not completed Assignmnent 3 yet, do so now even though it is too late to receive full credit for it.

This is an exercise in working with text.

Reference Material

The Assignment

A big part of working with CSS is figuring out which properties can be used with which elements on a page. For this assignment, you are to explore various text-related properties. But first, you need some text to apply those properties to. Set up your blog’s index page so the body looks like this:

<body> <h1>(the blog page title)</h1> <h2>(title of the first blog entry)</h2> <p> </p> <p> </p> <p> </p> <h2>(title of the second blog entry)</h2> <p> </p> <p> </p> <h2>(title of the third blog entry)</h2> <p> </p> <p> </p> <p> </p> <p> </p> <h2>(title of the fourth blog entry)</h2> <p> </p> <p> </p> <p> (links to the home page and the two W3C Validators) </p> </body>
  1. Fill in the text for the headings and paragraphs.

    Pick a general topic for your blog, and use your creativity for the wording of the blog page title (if you didn’t already) and for the titles of the individual blog entries. Requirement: Somewhere in text of the various headings you must use at least the following character entities: curly double quotes, apostrophe, and at least one other visible entity; check the list on Wikipedia for ideas. Grammar counts!

    The last paragraph holds the three links that should already be on the page from the previous assignment. (To the home page and to the two W3C Validators.)

    Now get some dummy Latin text to fill in those empty paragraphs. Go to the Lorem Ipsum Generator website. There are 11 empty paragraphs in the code above, so change the number 5 to 11 in the input box under “Where can I get some?” heading, and click the “Generate Lorem Ipsum” button. The page that show up will give you 11 paragraphs of dummy Latin text; copy and paste them into the 11 empty paragraphs of the blog index page. I know, it’s tedious.

    Save your web page and check it in the browser to be sure there are no errors and that all the paragraphs are in place and separated from each other. Fix any errors before proceeding.

  2. Use class and id attributes

    Make the id of the first h2 be “latest-entry”.

    Mark the first paragraph after each h2 with the class value, “lead-paragraph”.

    Mark the last paragraph (the one with the links in it) with the id of “nav-links”.

    Check your web page using the browser. It should look the same as before; this is a check to make sure you didn’t make any mistakes setting up the attributes.

  3. Adjust the appearance of the page and all the text.

    Edit main.css:

    • Add a rule for both the html and body elements, and set the background-color and color properties for the page to something easy to read other than black on white. (Make the colors different enough from each other to be easy to read, but watch out for too much contrast. For example, pure blue text on a pure red background doesn’t work very well. Experiment.
    • Make the h1 centered on the page using the text-align property.
    • Use the font named “Trajan Pro” for the second-level headings if it is available; otherwise use Verdana or some other sans-serif font.
    • Use the font named “Comic Sans MS” for the text of all the paragraphs; use “cursive” as the fallback.
    • Make the text in all the paragraphs belonging to the lead-paragraph class italic.
    • Apply a distinctive color and background color to the element with the latest-entry.
    • Center the text in the paragraph containing the navigation links.

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. To double-check, you can submit your page to the W3C validators to make sure there are no warnings or errors that they can detect either.

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 4 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.