HW3 - CS2a/Sum09

Due: Monday 6/8/2009

You are to create three web pages for this assignment.
The pages should be called

   cs2a.html
   hw3.html
   hw3.css
  

The names should be exactly as shown above, do not capitalize the file names or use ".htm" or ".txt" or any other extension besides ".html" Also, both of these files should be in a folder called "cs2a"

The cs2a.html file should contain your name and a list of links to your homework assignments. For now, it will contain a link to hw3.html. It should also contain a link to all of the place you have posted your hw3, e.g. the student server, your unet space, your own purchased server space.

The hw3.html file should contain the features listed below.

1. the body of the hw3.html file should contain at least 4 divs: the header, the sidebar, the content, and the footer. The content should use overflow:auto
2. you should use arrange these div's on the page using absolute positioning (not "float")
3. the sidebar should contain a list of links to interesting pages (including the cs2a.html page)
4. the footer should contain your name and copyright info (using the © character entity to generate the copyright symbol like this 2009 © Tim Hickey, All Rights Reserved
5. the content div should contain the following:
   • lists (see notes)
     • a ul list
     • an ol lists
     • an embedded list (e.g. an ol list of ol lists)
   • links (see notes)
     • a link outside of brandeis
     • a relative link to a page in your folder (e.g. to cs2a.html)
     • links to sections inside your webpage (using the name="..." attribute)
     • a thumbnail image which is a link to a fullsize image
   • a table (see notes) using rowspan and colspan. It should be at least 4 rows and 4 columns.
6. CSS (see notes or WDG ) You should use CSS in the head element to specify the following types of style elements:
   1. font (WDG)
   2. background (WDG)
   3. color (WDG)
   4. border (WDG)
   5. margin (WDG)
   6. padding (WDG)
   7. text-decoration (WDG)
7. You should also use the :link, :visited, :hover, and :active psuedo-elements to have your links change style when the user hovers the mouse over them, when a link is visited, etc.
8. Finally, use the contextual CSS to have different link behavior in the different divs e.g.

     #menu a:hover {.....}
   

   will set the a:hover property for all links in the element with id = menu, but not in any elements...
9. You should also include commments in your HTML containing your name and unetid. For example, I would put:

   <!-- Tim Hickey, tjhickey@brandeis.edu  -->
   

   Note: this comment will not appear in the browser unless someone uses the "view source" menu item, but it will make it easier for the TAs to grade the HW
10. Handing in your homework: Put your webpages on the student server and also copy them to your Brandeis webspace. Finally, if you purchase your own domain name copy them to your domain as well. Include links to all copies of your homework in the cs2a.html file.

Homework Strategy

I strongly suggest that you do this homework in steps. Here is one sequence of little steps that will guarantee that you meet all of the requirements listed above. The goal in having you develop this webpage is to give you practice in using many of the different features available in the HTML and CSS languages. You should do this assignment over several days and you can use the U-method to save and test each individual step. At each of these steps you should save your webpages, view them with a browser to make sure that they work, and validate them to check for "hidden" syntax errors. A key idea in web page development is to frequently alternate between writing and testing. You can catch errors more quickly this way and in the long run it takes less time.