HTML Project


The IS 201 Web Page project will include:

  1. One or more HyperText Markup Language (HTML) files
  2. A single Cascading Style Sheet (CSS) file.

HyperText Markup Language File Contents

Your HTML file(s) should be interesting to read with correct grammar and spelling.   Avoid "flash and splash."  I prefer to see substance and thought.

Your HTML files(s) should include use of the following HTML elements:

HTML 4.0 Document Type Definition: Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The above document type definition must appear as the first line of your HTML source file.

Head Contents

Meta tags

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="DESCRIPTION" content="Your page description">
<meta name="KEYWORDS" content="Your keywords as a comma separated list">
<meta name="AUTHOR" content="Dana Lee Ling">

Title

<title>Your Page Title</title>

Cascading Style Sheet link

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

Your stylesheet will have a different file name.

Body Contents

The body should make use of the following elements, not necessarily in the following order:

<h1>Your header level one</h1>
<h2>Your header level two</h2>

<p>Your paragraph text
<img src="yourPicture.jpg" alt="your caption" width="yourImageWidth" height="yourImageHeight">
<a href="yourHyperlinkURL">Your hyperlink caption</a>
</p>

Note that the <img and <a tags must be nested inside of a <p> tag set.

<ul><li>your unordered list with at least three list items. The list items could be text or hyperlinks.</li></ul>

Illegal Elements: Deprecated or Obsolete elements

Your HTML file must NOT contain any deprecated or obsolete elements. The use of deprecated elements such as the <font> and <center> tags will cause deductions in the marking of your work.  Deprecated elements are discussed at the following URLs:
http://www.w3.org/TR/1999/REC-html401-19991224/appendix/changes.html#h-A.3.1.2
http://www.w3.org/TR/1999/REC-html401-19991224/conform.html#deprecated

Cascading Style Sheet Contents

Your Cascading Style Sheet must include specifications for all of the elements in your HTML page(s).  Below is an excerpt from the sample style sheet being used by this page. The full stylesheet is available at:
http://shark.comfsm.fm/~dleeling/cis/html_project.css

body {background: white; color: black}
a:link {background: white; color: blue }
a:visited {background: white; color: purple }
a:active {background: blue; color: white }
h1 { background: white; font-family: Verdana, sans-serif; color: maroon }
h2 { background: white; font-family: Verdana, sans-serif; color: maroon }
p { background: white; font-family: Verdana, sans-serif; font-size: smaller; color: maroon }
ul { background: white; font-family: Verdana, sans-serif; font-size: smaller; color: maroon ; list-style-type: circle }

Color notes

The above stylesheet is a valid CSS2 stylesheet.  For colors other than the 16 colors supported by keywords, use RGB values as specified at: http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-color

CSS3 proposes expanding the number of color words. CSS3 proposes using X11 color keywords. The use of these color keywords words is not without controversy within the CSS community. The complete list of proposed color keywords available under the CSS X11 standard is at: http://www.w3.org/TR/css3-color#x11-color   Sample CSS (NOT PRESENTLY LEGAL!)

X11 Color Charts that are more usable:
http://www.mcfedries.com/books/cightml/x11colors.asp or http://www.mcfedries.com/books/cightml/x11color.htm
http://www.enter-net.com/~mpellegr/colors/colors.html
Variable background setting option:
http://www.htmlhelp.com/cgi-bin/color.cgi
Charts with notes on browser capability issues:
http://jen.fluxcapacitor.net/geek/colors-grouped.html#IE-colors.html
Pales, Hues, Saturation and Spectrum:
http://www.varian.net/dreamview/dreamcolor/hues.html

 

Checking For Errors

To check your HTML file for errors, upload your file for validation using the W3C HTML Validation service at:
http://validator.w3.org/file-upload.html
If you receive no errors and no warnings, then you have made a valid HTML file. An icon such as the one see below will appear at the very bottom of the W3C HTML Validation Service Results page if your HTML file is valid HTML 4.01 Strict.
Valid HTML 4.01!

To check your CSS file for errors, cut and paste your CSS file into the text box at:
http://jigsaw.w3.org/css-validator/validator-text.html
If you receive no errors and no warnings, then you have made a valid CSS file. An icon such as the one see below will appear at the very bottom of the W3C CSS Validator Results page if your CSS file is valid.
Valid CSS!