Project 1: Review Web Site (due Friday, February 6, 11:59 PM)

Summary

For this project, you will create a web site that reviews something, for example, a place you've travelled to, a restaurant you've eaten at, a movie you've watched, etc... It would be a good idea to read this whole page before you start.

Required files

You will create four files in total. Three of the files will be HTML pages called index.html, review.html, and pics.html. The last file will be the CSS style file called mystyle.css.

Directory Structure

Create a proj1 directory under your fit100 directory. Add two more directories called review and images as follows:

Home page (index.html)

The home page should have some introduction to your web site or the review. There should be a link to the review page, review.html. You can also have a link to the picture page. End the introduction with a copyright symbol (refer to Escape Sequences in the slides) and the current year, 2009.

Like the previous two labs, there should be a link at the bottom of the page using an absolute pathname to where your web site is located on Dante (for UW staff, Homer).

Review page (review.html)

The review page should be split in two by a horizontal rule. The top half should have brief facts about the thing reviewed like name, location, fun fact, etc... You should have at least three (3) brief facts. Write the brief facts either as bullets or as a paragraph with breaks after each fact. Additionally, you are to give a rating. Download this image: and use at least 3, but no more than 5 copies to display the rating of your review. The stars are to appear on a single line. Store the image of the star in the images directory.

The bottom half of the page (below the horizontal rule) will contain your review. Use your own words. There should be a link to the picture page.

There should be a link at the bottom of the page that links back to the home page.

Picture page (pics.html)

The picture page should have at least 5 pictures. The pictures should relate to your review. Above each picture, put a description about the picture and credit where you found the picture (a link suffices).

You can find any pictures online that relate to your review. At least three (3) of the images referenced in your picture page must have been downloaded and put in your images directory. Put another way, the src attribute of at least 3 of your pictures are going to be relative pathnames.

There should be a link at the bottom of the picture page that links back to the review page (see directory structure above).

Stylesheet

All three web pages should be linked to the stylesheet.

Styling requirements:

• Style the following elements: body, strong, h1, and em.
• Style an additional element
• Use the following properties at least once: color, text-decoration, background-image, border, and font-family.
• Use an additional property

Your stylesheet should look neat. Do not put all properties of one element on a single line! Look at Lab 4 for an example on how to structure the CSS rules.

Grading Criteria

In addition to all the requirements stated above, all HTML files must:

• validate!
• be indented properly
• have meaningful alt attributes for the images
• have all working links

Other requirements:

• All tags from this Lab #3 page must be used across your web site. Make sure that each tag appears on at least one of the three web pages. For example, you don't need a horizontal rule on all three pages.
• The page should be generally aesthetically pleasing. We won't be very picky, but we want you to at least have thought about the aesthetics of your page. What we do NOT want to see is all the required styling properties in one element just for the sake of using all the properties. Think about the aesthetics even if you aren't artistically inclined.

Useful Tips

• If you made changes to your HTML or CSS file but did not see the expected changes when you refreshed (reloaded) the page, make sure that you are viewing the right file. Some students would make changes on their local copy (on their computer), but the file they were viewing were from the remote copy (on Dante/Homer).
• Also, for efficiency reasons, browsers sometimes save older versions of web pages and refreshing the page won't actually get you the latest version. You have to "force" a refresh to get the latest page. In Firefox, the shortcut is Ctrl+Shift+R.

Turn-in instructions

When submitting, make sure you have the right section. Some TAs have two sections, so make sure you know which of the two sections is the right one. Turn in all 4 files here.

Back to Home page