CISC103, Fall 2006

lab05: validating your HTML

What we've learned so far

In lab01, you learned how to create a basic .html file, and upload it on to the web server for student web pages at UD, namely copland.udel.edu.
In lab02, you learned how to make a basic web page, complete with headers, title, content, and some very basic CSS to give it style (e.g. choosing colors for the different levels of headers, etc.)
In lab03, you turned in this into a web site with at least three pages, and hyperlinks connecting those pages.
In lab04, you learned how to use Server Side Includes (SSI) to create a common header for all the pages on your site—plus, you learned about the <div> element, and the id attribute, and using that along with CSS selectors that start with a #

What's new this week

This week, in lab05, we are going to learn how to validate our HTML.
That is, we are going to make sure that our HTML is valid, according to the HTML 4.01 standards issued by the World Wide Web Consortium (W3C)
We will also learn about DOCTYPE definitions and <meta> tags.

This week, you need your textbook

In particular, you need to read pages 223 through 242.
If you don't have your textbook with you, your TA might have a few copies of the pages you need, but they are fuzzy photocopies, and you'll have to share.
Please remember to bring your HTML book—and starting next week, your JavaScript book too—with you to lab.

Step by Step Instructions

Step 1: Read over pages 223 through 242 in the textbook.

As you read, you'll learn about "validation", and why it is important.

The book walks you through

adding a DOCTYPE definition into an HTML file (on p. 231)
adding a <meta> element into the <head> element of an HTML file (on p. 241)

More importantly, the book explains why you want to do that.

Then, the book explains:

how to validate an HTML file using the web site http://validator.w3.org
how to fix errors if they arise

Since that's what you'll be doing in Steps 2, 3 and 4 of this week's lab, reading over this will be very helpful. Since the book explains what to do in great detail, I will not be providing as much detail this week in the lab file as I have in weeks past.

Step 2: Create directories for lab05, and copy your lab04 content

Step 2a: Create a "working folder" for lab05

Create a folder lab05 on the hard drive of the computer where you are working. That is where you should be editing your files this week.

If you are working in Memorial Hall 028/033, you create this folder on the "H drive", under your personal folder. If you are working on your own PC at home, create this folder under your cisc103 folder (the one where you do all your cisc103 work).

Step 2b: Copy your lab04 files into this lab05 working directory

Use the SSH Secure File Transfer program to copy your lab04 files from ~/public_html/cisc103/lab04 on the copland.udel.edu server into your lab05 working directory on your hard drive. (Here, ~ stands for your "home directory").

Consult previous labs if you are not sure how to do this.
If still cannot figure it out, then you need to get some extra help—please make an appointment to come see your TA and/or instructor during office hours.

Step 3: Add the DOCTYPE definition into each of the "full" HTML documents in your lab05 directory

Step 3a: Make the change

In your lab05 folder, edit each of your HTML documents from lab04 (except your navigation.html file, which is not a "full" HTML document), using Notepad, Wordpad, or something equivalent.

Add the following line immediately at the top of the file, before the <html> open tag, and before any comments that may appear there:

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

Step 3b: Create a lab05 directory on the copland.udel.edu server

Follow the same procedure as in previous weeks.

Step 3c: Copy the modified files from your lab05 directory on your hard drive, up to the web server on copland

Follow the same procedure as in previous weeks.

Step 3d: Verify that the DOCTYPE definitions show up in the source

Open your files in the web browser using the address http://copland.udel.edu/~yourusername/cisc103/lab05

If you get a "Forbidden" error, fix it the same way we fixed this in previous labs. (Consult lab01 if you don't remember how.)

Open each file, and do a "view source". Make sure that the DOCTYPE shows up at the top of the file.

Step 4: Try validating the file

Following the instructions on p. 234 through 237 of your textbook, use the validator at http://validator.w3.org to see if your HTML is valid.

Hopefully, you should get a result similar to that on p. 238... "This Page is Tentatively Valid HTML 4.01 Transitional"... something like this:

If so, continue to step 4. If instead, you get a red bar with one or more errors, like this:

Step 5: Now, add the meta tag in to get rid of the "tentative" business

Now, follow the instructions on p. 240 and 241 to add a meta tag into the <head> element of all the HTML documents on your lab05 site.

Be sure to save them to the hard disk, and then recopy them back to the copland.udel.edu web server when you are finished with your edits.

Once you have done that, try validating again. Hopefully, you now get a nice clean validation message, like the one on p. 242 (show below).

If not, check your results, and/or ask your TA for help.

That's it—you are done!

Evaluation and Grading (100 pts total)

Specifications for the lab05 web site

Page should come up at http://copland.udel.edu/~yourusername/cisc103/lab05
All specifications from lab04 still apply
In addition, the following should be visible when you view source on each file:
- a DOCTYPE at the top of each file, and
- a <meta> element in the <head> element
In addition, all files on the page should validate at http://validator.w3.org as HTML 4.01 Transitional with no errors or warnings.

Due date: This is "due" on 10/12/06 by 11:55pm. There is nothing to "turn in"... we'll just check your page on the web.

Grading: 50 points for correctly including DOCTYPE and <meta> in each of the HTML documents, 40 points for correct validation, 10 points for overall correct submission and following instructions.

Your next steps

If you haven't done so yet, fill out the JavaScript textbook survey on WebCT (http://www.udel.edu/webct)

If you haven't done so already, read up through Chapter 6 in your Head First HTML textbook.

Also, read the JavaScript Notes from the Wiki, and pages 11-19 in the JavaScript textbook.

Copyright 2006, Phillip T. Conrad, CIS Dept., University of Delaware. Permission to copy for non-commercial, non-profit, educational purposes granted, provided appropriate credit is given; all other rights reserved.