Summary

The purpose of this lab is to get you to practice using images, tables, and CSS classes within a web page. Additionally, you'll debug (aka fix) a broken web page that has a few mistakes that come up often. In the end, you'll verify that your page is XHTML strict.

Due Date / Time

Due to the G20 summit being in Pittsburgh, and owing to the fact that I want to give you all a chance to express yourself/protest/avoid mobs, we will not have class on Thursday September 24th.


This lab will be due by 11:59PM, September 24th. Feel free to turn it in early. Keep in mind that, if you work on it at home, you may need to download FTP software to submit it. You can email me for questions/comments. I won't be able to respond as quickly as I could if we were holding class, so, be sure to give me plenty of time to respond to your email.


Unless things change (and they shouldn't), Sennott Square should be open as normal on Thursday. So, you should be able to turn in the lab on time by coming to where our class is normally held and working on it there / then.


Setup

Download the webpage here and, as in past labs, save it to your computer. Rename it to include your Pitt username (e.g., "rym4_lab3.html"). Then, open it up in your browser of choice and view it.


Now also look through the CSS and XHTML. See if you can spot any obvious errors.


If you view it without fixing anything, the page looks basically okay. Imagine though that you're doing this page for someone who has a certain look in mind:

  1. Make unordered lists use a square bullet
  2. Make h1 and h2 text centered
  3. Change how links look (refer to lab 2):
    1. Unvisited links should be dark blue (not underlined)
    2. Visited links should be dark blue (not underlined)
    3. Links which the mouse is hovering over should be blue (and underlined)
  4. Center the image at the bottom of the page
  5. Make the copyright notice at the bottom of the page centered (using a CSS class)
  6. Make the hr tags used underneath an h1 span the entire width of the page (use a CSS class)
  7. Make the hr tags used underneath an h2 span 50% of the page (use a CSS class)
  8. The table of cockney slang should be changed to actually be a table (i.e., you should use the table element, td elements, etc. as appropriate), instead of just preformatted text.
    1. Use <th> for the table headers. Make the headers bold and underlined.
    2. Use the <em> tag to emphasis each slang word


Now that you're done, do some work to make sure that the page verifies as XHTML strict.



Grading

Normally, labs are not graded (but, I do mark down who did the labs and who did not). Because you will be given more time than usual, I expect the labs will be much closer to perfect. I will not fully grade the labs, but I will assign each lab a grade of 0 (no attempt), 1 (good job, nearly perfect), and 0.5 (missing several things).


Any late submission will not be looked at, unless there are extenuating circumstances. This is just like how normal labs are done.

Submission

  1. Does your page verify as strict XHTML? It should! Use the link above to check.
  2. Enjoy the weekend!