INTN 2201: Lab Assignment 1: HTML Pages

See important notes at the bottom of this page

Due Date and Marking

Lab 1 is due by January 23th, 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 a few days, 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 to create two HTML pages with a common look and feel. These two pages will be uploaded to the course webserver (opentech.durhamcollege.ca) using WinSCP. The pages must be visible from the server with a Web browser before they can be marked. Pages that are stored only on the local workstation disk drive cannot be viewed from any other system, and therefore cannot be marked.

For this assignment you should try to find a web resource that has a list and explains each of the XHTML 1.0 supported tags. As an example, here is a link to the W3Schools tag library (w3schools is an excellent website). Feel free to try and find your own.

The HTML pages must conform to the W3C XHTML 1.0 Transitional specification, as checked by the W3C validator.

You can create your own images, or simply "borrow" them from the Web or other souces (e.g. stock image CD, scan, framegrabber). If you use someone else's work, please acknowledge the source somewhere on the page (HINT: HTML comments would work well for this). Please avoid using images with the copyright symbol on them.

Specific Requirements

  • Create two HTML pages, one which will act as your site's home page (this file should be named index.html) and the other will be named lab1.html. Each page is to incorporate a "logo" (the smae image) in the top-left corner of the page.
  • Be sure to include appropriate (i.e. relevant) <title>s and <h1> header tags on each page. Additionally, for each page you are to include HTML comments (<!-- -->) that minimally must state your name, the file name, the date the page was created and a brief description of what the page does.
  • You must set the background-colour (i.e. bgcolor attribute) and text color (i.e. text attribute on the <body> tag for each page. Set them to the same value on each page (this will give your pages a consistent look and feel).
  • Each page should have a hypertext link to the other at the top of the page (it can be placed underneath the <h1> tag created above).
  • Any images used on your pages must exist in an images sub-directory, relative to your working directory.

  • In addition to the title, logo image, header and link, your index.html page must satisfy the following:
    • Include a detailed paragraph explaining what the purpose of the site is (i.e. it was created as course requirement for INTN2201). The course code should be a link to the course web server (i.e. http://opentech.durhamcollege.ca/~pufferd/intn2201)
    • Additionally, in the paragraph mention Durham College, these words should become a link to the Durham College website (http://www.durhamcollege.ca).
    • Finally, you are to incorporate the Durham College logo as an image on your index.html page, this image should also act as a link to the Durham College website (this can be achieved by placing <a> tags around an <img> element on your page.

  • In addition to the title, logo image, header and link, your lab1.html page must satisfy the following:
    • Implement all the HTML elements that will create the page output displayed below. N.B. Each section should have an HTML header (<h3> tags) as a title to the section, and paragraph (<p> tags) explaining which tags and/or special characters were used. TURN ON YOUR IMAGES, YOU NEED TO SEE THIS!
  • As OpenBSD is a UNIX-like operating system, students are recommended to make ALL file names and extensions LOWER-CASE. This makes debugging/development easier.
  • The 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". BE SURE TO ADD THE XHTML VALIDATION IMAGE AT THE BOTTOM EACH PAGE

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.
  • You also need to specify the character set used on your page. English doesn't use any accented characters like è and ü but many languages do. The character set specification tells the browser which alphabet to use.
  • Place these lines at the top of your html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

       Inside your <header> tags, specify the character set to be used:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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!