INTN 2201: Lab Assignment 3:
Text and Content Formatting with Styles

Due Date and Marking

Lab 3 is due by February 6th 2010, by midnight. This means that you must have sent an email with your link by that time (see "Handing In" section below). Be sure to include the course code, and the lab number in the subject line of the message (i.e. "INTN2201 Lab #3"). 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

Produce a style sheet to be used by your web site. The style sheet you are to produce should be called intn2201.css and reside in a css subdirectory relative to where your web pages reside (i.e. your working directory). For this assignment your need to go through your html files for the first two assignments (i.e. "index.html", "lab1.html", and your "lab2.html") and remove any attributes defined in the <body> tags on the page, an instead refer to the external stylesheet.

In addition to updating the three (3) files listed above, you are to produce a file named lab3.html that shows each of the ten tags you defined in your intn2201.css cascading style sheet file.

Specific Requirements

  • All the HTML pages submitted for this lab must pass the W3C HTML validator XHTML 1.0 Transitional specification. Specify the DOCTYPE and charset as explained in the first two labs. BE SURE TO INCLUDE THE XHTML VALIDATION IMAGE ON THE BOTTOM OF EACH PAGE.
  • Your CSS must be validated on each of your pages using the CSS validator found at http://jigsaw.w3.org/css-validator/. Be sure to place the BE SURE TO INCLUDE THE CSS VALIDATION IMAGE ON THE BOTTOM OF EACH PAGE.
  • Use an inline style on the two validation images so that they stay fixed on your page (See the images on this page as an example). To do this use the postion: absolute; or postion: fixed; property/value in the style.
  • Create styles for ten (10) different html tags (or a class of tags) in an external CSS file (this file should be named "intn2201.css", and be located in a "css" sub-directory (relative to your working directory). NOTE:All of the header tags (i.e. <h1>, <h2>, <h3> ... <h6>) counts as one tag. Not six..
  • You must create a style for your <body> tag (i.e set up a body selector), this should define styles font-family, background-color, text-color. You should remove the bgcolor and text attributes from the <body> tags on each of your pages.
  • You must include the <a> tag styles, with all of its pseudo elements (i.e. link, visisted, active and hover). Make sure each different state is noticeably different. You can now remove the link, vlink, and alink from the attributes on your <body> tags on each of your pages.
  • NOTE: All of the header tags (i.e. <h1>, <h2>, <h3> ... <h6>) counts as one tag. Not six.
  • Be sure for each tag you are displaying you include a paragraph (<p>) that explains each of the styles you created. i.e. have ten (10) paragraphs.
  • Produce a new "lab3.html" page that implements each of the ten (10) tags defined in your "intn2201.css" file, and produce a clearly labelled link on your existing pages that will take you to your lab3.html page.
  • Use the created external style sheet on all existing and new pages.
  • Create styles for your links (<a> tag), as discussed in class. Your anchor tag can count as one of your ten tags listed above (be sure to incorporate the pseudo-elements - linked, visited, hover, active). These count as only one tag (i.e. the <a> tag)
  • Re-visit your "index.html" and "lab1.html" and lab2.html files, and remove any attributes for tags that have been defined in the above described file. One of the tags defined should be the <body> tag, for the background and text colours
  • Be sure to turn off your stylesheets (just change your href attribute on the <link> tag to an incorrect filename, then save the file and refresh the page) and see that your page still looks acceptable.
  • Don't go wild with the colours and fonts! The colour scheme should be the same as what you had for the first two assignments. In fact, there should not appear to be any major changes to the existing files.

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!