# Lab 3 - Formatting and Layout with Styles

# General

Produce a style sheet to be used by your web site. The style sheet you are to produce should be called webd2201.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 colour attributes (i.e. text, bgcolor, link, vlink or alink) 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 webd2201.css cascading style sheet file.

# Due Date

The due date for Lab 3 is found on the Important Dates page and in DC Connect. This means that you must have published your website into your development folder on the opentech server and have submitted a clickable HTML link to your website on the opentech server in the Lab 3 assessment dropbox comment section in DC Connect (see "Submission" section).

You will be given a mark out of twenty (20). You will be told of the reasons for any loss of marks, these points are to be used as constructive criticism (i.e. fix the problems as a practice for the term tests).

# Specific Requirements

NOTE: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 implemented in the first two labs. BE SURE TO INCLUDE THE XHTML VALIDATION IMAGE ON THE BOTTOM OF EACH PAGE.
Create a new external CSS file (i.e. a new text file) and name it webd2201.css. This file should be published/located in a css sub-directory, relative to your working directory (i.e. in a /var/www/html/webd2201/userid/css folder).

TIP

For those who are using xampp, make a directory webd2201 in c/xampp/htdocs. Then you will get access to that folder on http://localhost/webd2201

Include CSS comments in your new webd2201.css file (using the multi-line /_ c-style comments _/ syntax) that includes your name, the date the file was create, the filename and the purpose of the file.

Your CSS must be validated on each of your pages using the CSS validator. BE SURE TO INCLUDE THE CSS VALIDATION IMAGE ON THE BOTTOM OF EACH PAGE.
In the webd2201.css file, create style selectors for ten (10) different html elements (or classes of elements). NOTES: Three (3) of your selectors must be for the: body element; th element; and, four (4) pseudo-classes of the a elements.
Create a style selector for the <body>element (i.e set up a body selector), this should define styles (as a minimum) font-family (something other than "TimesNewRoman"), background-color and color. Remove the bgcolor and text attributes from the <body> tags on each of your existing pages.
Create a style selector for the <th> (table heading) element(s) (i.e set up a th selector)). It should be styled to be emphasis to the heading of any table that has a <tr> table row of **<th>**elements.
Create a style selectors for the <a> style pseudo-elements (i.e. the different states four (4) different states of an anchor/link:a:link; a:visited; a:active; and, a:hover), as presented in class). Ensure each unique state is noticeably different from the others. Remove the link, vlink, and alink from the attributes on your <body> tags on the existing pages (if you had them).
NOTE: These four (4) pseudo-elements count as only one selector of the ten (10) required for the lab (i.e. the style for the <a> tag
Produce a new lab3.html page that has a <title> tag that reflects the lab number and giving your name, the file name, the date the file was created and a brief description of the page's purpose. E.g.

<!--
	Name: Bill Smith
	File: lab3.html
	Date: 24 May 2019
	This is the Lab 3 page for Web Development - Fundamentals (WEBD2201)
-->

Implement the created external style sheet on all existing pages (i.e. index.html, lab1.html, lab2.html, and lab3.html) by including a <link> in the <head> of each page to the webd2201.css file.

<head>
  <link rel="stylesheet" type="text/css" href="./css/webd2201.css" />
</head>

The new lab3.html page should have an detailed description paragraph, explaining the purpose of the page PLUS have one paragraph per selector created in the file describing and demo'ing each of the ten (10) selectors created for the lab (i.e. have eleven (11) paragraphs total)

Produce a clearly labelled link on all of your existing pages (i.e. index.html, lab1.html, and lab2.html) that will take you to your new lab3.html page (i.e. make the new lab3.html page part of your overall website).
The new lab3.html is to implement the same table your existing index.html, lab1.html, and lab2.html pages to give your site a consistent look and feel.
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 if your external CSS file becomes deleted or corrupted.

# Rubric

Topic	Description	Weighting
Submission
Submission	-2 files not published into your /var/www/html/webd2201/userid main folder (instead in /home/userid folder). -2 no link submitted in DC Connect Lab 3 assignment drop box -1 link in DC Connect Lab 3 assignment drop box not clickable -1 link in DC Connect Lab 3 assignment drop box does not go to your website	-2 (-1.0 per incident, maximum 2 incidents)
Deliverable Specific Outcomes
Comments/Description paragraphs	-1 no <!-- HTML Comments --> on lab3.html -0.5 incorrect or incomplete <!-- HTML Comments --> on lab3.html (comments to include your name, the filename, the date the file was created and a brief description of the page's purpose) -1 webd2201.css css file missing /* c-style comments */ including your name, the file name, and the date the file was created -1 lab3.html missing description paragraph referencing it is a CSS assignment. -0.5 lab3.html description paragraph is light on content. -0.5 × number of selectors that do not have a description paragraph/demonstrate the style implemented in the external stylesheet (each selector should get their own paragraph)	-4 (-1.0 per incident, maximum 4 incidents)
CSS Setup	-1 CSS file not named webd2201.css exactly -1 webd2201.css not published into a css subdirectory relative to working directory -0.5 css subdirectory not named css EXACTLY -1 th{ ... } selector not created -2 body{ ... } selector not created -0.5 body selector does not include a background-color style -0.5 body selector does not include a color style -0.5 body selector does not include a font-family style -0.5 body selector's font-family style not to be "TimesNewRoman" -2 no a { ... } link/anchor selectors created at all in webd2201.css -0.5 × number of the 4 pseudo-elements of the a selector (link, visited, hover and active) that was not defined or was NOT unique (NOTE: copying/pasting and then changing the pseudo-class name is not good enough for full marks) -0.5 × number of selectors missing from the required ten (10) in webd2201.css file	-8 (-1.0 per incident, maximum 8 incidents)
CSS Implementation	-1 <link> on index.html to the webd2201.css external css file missing/incorrect -1 <link> on lab1.html to the webd2201.css external css file missing/incorrect -1 <link> on lab2.html to the webd2201.css external css file missing/incorrect -1 <link> on lab3.html to the webd2201.css external css file missing/incorrect -1 index.html page missing a link in nav bar to the new lab3.html page -1 lab1.html page missing a link in nav bar to the new lab3.html page -1 lab2.html page missing a link in nav bar to the new lab3.html page -0.5 bgcolor and/or text and/or link and/or vlink and/or alink attribute(s) not removed from <body> tag on index.html page -0.5 bgcolor and/or text and/or link and/or vlink and/or alink attribute(s) not removed from <body> tag on lab1.html page -0.5 bgcolor and/or text and/or link and/or vlink and/or alink attribute(s) not removed from <body> tag on lab2.html page -2 no CSS clickable validation image provide at the bottom of each *.html page -1 CSS not valid index.html page -1 CSS not valid lab1.html page -1 CSS not valid lab2.html page -1 CSS not valid lab3.html page	-6 (-1.0 per incident, maximum 6 incidents)
lab3.html Requirements	-1 new HTML file (that implements/demonstrates the CSS file) not named lab3.html exactly -1 <title> not changed to reflect Lab 3 -2 lab3.html did not implement a table layout (created as part of lab 2) -1 lab3.html did not implement the same table layout as the one created in lab 2 (pages do not look the same)	/2
Other Penalties
XHTML Valid	-1 no clickable XHTML image provided on lab3.html page. -2 <!DOCTYPE> in lab3.html was not Transitional (used HTML 4.01 instead) -1 exactly one XHTML error on lab3.html page. -2 more than one XHTML error on lab3.html page.	-2 (-1.0 per incident, maximum 2 incidents)
Late Submission	-0 lab submitted on time -5 lab submitted late but within 72 hours of due date -20 lab not submitted within 72 hours of due date	/5

# Resources

Paletton : It is hard to pick a proper colour scheme. In the real world there would normally be designers to point you in the right direction. In lieu of that, here is a nice tool you can use to ensure you do not blind your users. Pick a scheme you like, and hit the 'Tables / Export' button in the bottom right to find the exact colour codes to type into your CSS files.

# Submission

Publish your pages on the opentech server and submit the URL of your index page as a clickable link in the comment section of the "Assignment 3" drop box in DC Connect. If you do not submit something into DC Connect, your professor will assume you did not complete the assignment, and the late penalties will apply (including 0/20 if the link was not submitted within the 72 hours late period). The onus is on you to ensure your lab instructor knows that you have work to be assessed.

WARNING

Do not mail or attach your files themselves into DC Connect. They must be published onto the opentech server.

# Important Notes

To relatively link an HTML file to an external Cascading Style Sheet (on the same server) the syntax is:

<link
  rel="stylesheet"
  type="text/css"
  href="./relative_file_location/file_name.css"
/>

To reference a file named webd2201.css that exists in a css sub-directory (relative to the file linking to the stylesheet, the syntax is:

<link rel="stylesheet" type="text/css" href="./css/webd2201.css" />

← L-2 Working with HTML Tables L-4 PHP Chapter Files from Textbook →