Overview

The assignment is to use Cascading Style Sheets (CSS) to format web pages. The basic idea is to write:

The first web page should be named recommend.html, and should describe a movie/band/writer/artist/book that you recommend highly. The second page should be named detail.html, and should explain why you recommend that particular movie/band/writer/artist/book and what makes it stand out from its peers.

You will also create an external style sheet named style.css, which will define the style for both of the web pages you have designed. This will give you practice applying CSS to format HTML code, which you will do for all of your web pages for the rest of the semester.

Turning it in

You'll turn this assignment in by uploading your web pages and all the supporting material, i.e. images and external style sheet document, to your protected folder on the cs server. As with the first assignment, if your files don't properly appear in the browser's window, you will receive no credit.

Requirements

Create a folder called hw2, in the protected folder, which is a subfolder of your public_html folder, on the cs server. Your .html and .css documents should be uploaded into the hw2 folder. Create a subfolder, named images, in your hw2 folder. All your image files (e.g. .jpg and .gif) should go into the images folder.

Your two web pages must be called recommend.html and detail.html. Your external style sheet will be named style.css. Don't forget that you must name and organize folders and files exactly as listed above.

You must include comments at the top of each document (HTML and CSS), stating the name of the file, the name of the author, and the date it was created (as you did for assignment 1).

You must cite your sources in homework for images and code, usually in the form of comments embedded in your HTML code, either at the top of the page or near the element (image, text, code, etc.).

In addition, we will be looking for the following specifics in this assignment:

Web Pages

  1. A descriptive title for the web pages.
  2. Use <h1> in each of your two web pages (you will define the style of <h1> in your external style sheet).
  3. A hyperlink from the first page to the second. Also a hyperlink from the second page back to the first. These links should use a relative URL.
  4. One hyperlink from the second page to an external website that is related to the movie/band/writer/artist/book in some way. This must be an absolute URL.
  5. Add at least one image to each of the web pages, using images in the images folder you created (NOTE: image files should be 100 kB or less in size).
  6. Choose some other tag, such as em, strong, p, blockquote, or even span or div. Use the tag at least once on each of the HTML documents. Customize that tag in your external style sheet.
  7. Just like your last homework assignment, your HTML code must be validated. This means both recommend.html and detail.html should validate. You can choose whether or not to display the HTML validation icon on your page (Valid HTML 4.01 Transitional). Click here for a reminder of how to validate your HTML code.

External Style Sheet

Once your two pages are written, create an external style sheet to define the style of both of your web pages. The external style sheet should specify:
  1. the style of <h1> that you used on your two web pages
  2. the background color, and the font family, size, and color for the text in the body of the web pages
  3. the style of the tag in item 6 above.

You are required to validate your CSS for this assignment. Click here for the WC3 CSS validation page. Once validated, you may add the validation icon Valid CSS! to the bottom of your HTML pages. If you choose not to display the icon, your pages still must validate.

Finally, link the external style sheet to each of your web pages, using a relative address.

Coding Style

Your HTML code and CSS code must be neat, clear, and commented. Make sure that your pages work properly at least on Firefox.

Grade Sheet

This grade sheet will be used to assign a grade for the assignment. The perfect grade is 10. Depending on the errors, there will be subtractions from this grade.

Due Date/Time

After you have uploaded and viewed your assignment from the server to verify that you uploaded your files correctly, you are done. The final upload to the server is how you submit your assignment — we view it directly from there when grading. When you type the URL to access your assignment page, remember that your hw2 folder is uploaded to your protected folder. So to view the recommend.html file for example, type this into your browser's location bar: 

http://cs.wellesley.edu/~myname/protected/hw2/recommend.html
Also notice that, when you visit any page under the protected folder, you will be prompted for a username and password. You should use your own puma account name and password.

Assignments may not be turned in late. Check the syllabus for the exact date and time that the assignment is due. Also, remember that you should not modify turned in work after the due time has passed, so that when we grade it, it's not timestamped late.

Your assignment need not display perfectly in Internet Explorer (which sometimes behaves strangely), as long as it works correctly in Firefox.