Getting Started

All of your work for this lab must be in a folder named lab3 inside your www folder. You should start by creating this folder: Open your home folder, double-click www to open it, then right click in the window and select "New Folder" from the pop-up menu. Name the folder lab3. Open the lab3 folder by double-clicking it.

Next, you will need a copy of the file prizes.html. You should get a copy in one of two ways. Either

1. While viewing this page in a web browser, right click this link: prizes.html, select "Save Link As" from the popup menu, and save the file in your lab3 folder; or
2. Open the folder /classes/cs120 in a window and drag prizes.html from that folder into your lab3 folder. (To open /classes/cs120, open another window showing your home directory. Click on "File System" in the left edge of the window. Double-click the classes folder, then double-click the cs120 folder.)

Finally, open prizes.html with the text editor, gedit.

Dividing the File

Prizes.html has eight sections, seven on departmental prizes and one on Honors. You want to copy each of the eight sections into its own HTML file. Each section is a <div>, and you can just copy-and-paste each <div> into a new file.

To create a new file, use the "New" command in gedit, and use "Save" to save the new file into the lab3 folder.

Don't forget that the name of the file must end with ".html"! Furthermore, the file should be a valid HTML file, with all the usual required tags. You might copy some of the format from prizes.html. Note that the first two lines of prizes.html are a DOCTYPE. While HTML documents don't absolutely require a DOCTYPE, it's a good idea to have one, so you should copy the DOCTYPE into each file as well.

You should be able to do this pretty quickly if you make a basic page outline, duplicate it several times, then copy-and-paste sections from prizes.html.

An Index File

Many web sites have an "index" file named index.html that serves as an entry point to the site and contains links to other pages.

Create a new file named index.html in your lab3 folder. It should be a regular HTML document that contains links to all of the other eight files that you have created. You probably want to make a list to contain the eight links.

The page should also contain, at least, a main headline for the site and a little introductory text to welcome people to the site and explain what it's about.

Note: If you user name is zz9999, then the URL for the index page on the Web would be http://math.hws.edu/~zz9999/lab3/index.html. However, "index.html" is a default file name that is used when no file name is given in the URL. This means that the URL

http://math.hws.edu/~zz9999/lab3

will also get people to your site and will display the index.html file in lab3. (Don't forget that when I say zz9999, you actually have to use your own user name.)

Navigation

You want to provide links for users of your site to help them navigate the site. The links on the index page are a start. However, you should also add links to the other eight pages. At a minimum, you should have a "Next Page" link to take the user from page to page. You might want to add other links, such as "Back to Contents" to take the user back to index.html.

Style

After you have the content of the site finished, it's time to add style. You should create a new file to hold the style rules. Name the file style.css and save it in your lab3 folder. (The name of a CSS style file must end with ".css", but the first part of the name can be anything; style.css is a common choice.) Such a file is called a "style sheet."

You should use the same style sheet on all seven prize pages. For the index page and for the Honors page, you can also use the same style sheet, but if you want you can design somewhat different styles for those two pages. (Note that it's OK for a style sheet to include rules that don't apply to any elements on a page where it is used. This makes it possible to have one style sheet, style.css, that has some rules that apply only to index.html, some that apply only to prize pages, some that apply only to the Honors page, and some that apply to several kinds of page.)

To use the style sheet on an HTML page, you should include the following line in the <head> section of the HTML:

<link rel="stylesheet" type="text/css" href="style.css">

Remember that the rules that you put in a CSS style sheet look the same as the rules that you would put between <style> and </style> in an HTML file. (But do not put <style> and </style> in the CSS file — just the stuff that would go between them.)

The HTML code that you copied from prizes.html uses lots and lots of class attributes. I expect you to use them to define different styles for different classes. You can also have rules that apply to headlines, div's, body's, etc. You can consider using background images, either for the whole page or for individual elements such as headlines. If there is some effect that you want to achieve and you don't know how to do it, ask me about it!. Try to make the pages look good!