INTN 2201: Lab Assignment 2:
Working with HTML Tables

See important notes at the bottom of this page

Due Date and Marking

Lab 2 is due by January 30th 2010, by midnight. This means that you must have sent an email with your link by that time (see "Handing In" section below). You will receive an email back within a day or two, giving you your mark out of ten, and the reasons for any loss of marks, to be used as constructive criticism (i.e. fix the problems before the next lab is submitted)

General

You are going to re-visit your existing two HTML files index.html and lab1.html from Lab 1 so that they implement an intuitive and consistent layout.

Additionally, you are going to produce a new lab2.html file, that will incorporate tables of data (in addition to the page layout.

Important: as was mentioned in lecture, be sure to make a paper sketch of what your layout will look like before you start coding (if you don't know where you're going, you will have a miserable time getting there).

Specific Requirements

  • You are to create a new web page that is to be called lab2.html. This page is to implements the same colouring scheme chosen for the first assignment (i.e same background and foreground colours as index.html and lab1.html, the background colour is NOT to be white), and incorporate the same layout as described below.
  • Each page on your website will have a layout that is based entirely on a table. In other words, the first tag after the start <body> tag should be a <table border="0" ... > tag, and the last tag before the closing </body> tag should be the closing </table> tag;
  • The layout on your pages should include at the top of your pages a table row with at least two cells: a cell that places your logo in the top-left hand corner of the page, and a cell with a banner (<h1> tag element) in the cell beside it.
  • Underneath the first row you should include another. On the left-hand side of this row (in a table cell) there should be a navigation bar, with links to all of your existing web pages (including the page that you are on). This will give your pages a consistent look and feel as you navigate around your site. Be sure to vertically align your nav bar cell (using the valign attrbute) to the top of the cell it is in, so that it is always visible when the page loads (no matter how large the page becomes).
  • There should be a third row, this one has only one cell (that should be right-aligned, it should span the whole page and include the XHTML validation image, and a copyright symbol (©) with the current year beside it.
  • Your lab2.html page, in addition to implementing the table layout, should have a paragraph explaing the purpose of the page, and will incorporate three (3) tables of data:
    1. A table (ironically) of the five (5) different table related html tags (i.e. the <table>, <tr>, <th>, <td>, and <caption> tags), and what each tag does. NOTE: you will have six (6) rows, as you are to incorporate a header row.
    2. A table of your three (3) favourite books, this table should have headings/cells (using <th> tags) for the following pieces of information: Title, Author, Year of Publication, and Description. NOTE: you will have four (4) rows total (one for the header, and three for the books).
    3. For the third table you are to create your acedemic schedule for this semester. This table is to have the days of the week across the top row (using <th> tags), and rows for each hour from 8am until 6pm. You should use the rowspan attribute for any class that is longer than one hour, and you MUST incorporate at least one (1) instance of a colspan somewhere on your schedule (HINT: you could show your preferred lunch hour, or the time of day you go to the gym, or meet with friends etc.). This table should also implement the align and valign so that your cells line up as shown on the output page. Additionally, for your contact hours (i.e. class time) and lunch/meeting times set a bgcolor so that they stand out.
  • All of your pages must pass the W3C validator with a doctype of XHTML 1.0 transitional. Submit your page for validation and keep editing the HTML source until you get "No errors found". Use the same lines at the top of your page to ensure the validator works. You are to include the image provided by the site in the footer of your page.
  • All local images (i.e. the ones found on all of your pages) must be placed in a images sub-directory relative to your working directory. This will require that you put relative paths in your image src attributes. NOTE: this does not apply to the XHTML Validation image (that is not a local image).
  • BE SURE TO INCLUDE A HTML COMMENTS ON EACH OF YOUR PAGES GIVING YOUR NAME, THE FILE NAME, THE DATE THE FILES WERE CREATED AND A BRIEF DESCRIPTION OF THE PURPOSE OF EACH PAGE.
  • To see an example of how your lab2.html page should look, see the image of the output. You should use the align and valign attributes to acheive the same alignment as displayed.

Important Notes

  • You must use the XHTML 1.0 Doctype string, as given on the main course page on all your pages. You can copy the doctype tag from this page: just use View > Page Source to view the HTML source and copy & paste the doctype tag into your own page.

Handing In

Publish your pages on the opentech server and submit the URL of your index page to YOUR lab instructor. The preferred method/location for the various instructor is:

Instructor Method
Stephen Franks Place URL in the appropriate lab drop box on WebCT
John Mather Mail your URL to john.mather@durhamcollege.ca. BE SURE TO INCLUDE THE COURSE CODE AND LAB NUMBER IN THE SUBJECT LINE.
Darren Puffer Mail your URL to darren.puffer@durhamcollege.ca. BE SURE TO INCLUDE THE COURSE CODE AND LAB NUMBER IN THE SUBJECT LINE.

Don't mail your files themselves or save them into WebCT; they are useless away from the server.

To publish your pages, upload them to the server in the directory /var/www/users/intn2201/userid (this is the only folder that will work because that's what the Apache Web server software is configured to look in for your files).
Keep your files on-line until you are sure they have been marked!
Directory and file names on the server are case-sensitive, so be sure to put everything in lowercase letters. The default page name is index.html. Don't use spaces, apostrophes, uppercase letters or quotation marks in your file name (keep it simple, using letters and digits, otherwise people won't find your pages).

Linking file names to URLs

Let's say your login ID is speedy, then your file name on the server is:
 /var/www/user/intn2201/speedy/index.html
The corresponding URL is:
 http://opentech.durhamcollege.ca/~intn2201/speedy/
Don't forget the ~ (tilde) symbol. It means "speedy's home directory".

For the rest of the files in your site, you need to give the name in the URL. The file named:
 /var/www/users/intn2201/speedy/page2.html
has the corresponding URL is:
 http://opentech.durhamcollege.ca/~intn2201/speedy/page2.html

Valid XHTML 1.0 Transitional

Valid CSS!