CISC103, Fall 2006
lab07: moving to XHTML
Note—textbook references to HFH and JSA6
In this lab, and in the labs that follow, there will be references to your two textbooks:
- Head First HTML with CSS and XHTML
- JavaScript and AJAX, 6th Edition
I'll use the abbreviations HFH and JSA6 to refer to these two books. Please make a note of it.
Where we've been recently
- In lab02, lab03, and lab04, you built a basic web site with at least three pages, links to get around the site, and learned how to use Server Side Includes to put global navigation on the top of each page. You also learned how to use CSS to give the page some style (colors, fonts, etc.)
- In lab05, you learned how to add a <!DOCTYPE ... > declaration and use the http://validator.w3.org validation service to make sure that the HTML on the page was valid according to the rules of HTML 4.01 (Transitional). You also read a bit about why validation is important.
- lab06 was a bit of a departure—we took a look at JavaScript. We are going to come back to JavaScript in lab08. For this week, we are back to the web site we developed in lab02 through lab05.
What's new this week
- This week, in lab07, we are going to learn how to move from valid HTML 4.01 Transitional, to valid XHTML 1.0 Strict.
- The guidelines are in Chapter 7 of your HFH textbook—which hopefully you brought with you to lab this week!
- Please remember to bring HFH and JSA6 with you to lab each week from now on.
- HFH Chapter 7 explains why we might need to move to XHTML 1.0 strict (see, for example HFH pp. 270-271). Please read that over now, if you haven't already.
- JSA6 p. 17 also has information on this topic. Read it too, so that you understand why we are doing this.
- 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)
This week, you need your textbook
- In particular, you need to read pages 266 through 277.
- If you don't have your textbook with you, you are out of luck this week. (The photo copies last week were just to help you get in the habit of bringing your book to class—we warned you last week.
Step by Step Instructions
Step 1: Read over pages 266 through 277 in the HFH textbook, and p. 12-13 in JSA6
As you read, you'll learn about XHTML and why you might need to move to it.
A key reason for us is one not mentioned in the HFH book—namely, that JavaScript and DHTML work a lot better with XHTML than with HTML 4.01.
The book walks you through
- changing the
DOCTYPE definition into an HTML file (step 1 on p. 274)
- adding the
xmlns and lang attributes (step 2 on p. 274)
- making sure that elements with no content like <hr> and <br> use self-closing tags (step 3 on p. 275)
Step 2: Create directories for lab07, and copy your lab05 content
Step 2a: Create a "working folder" for lab07
Create a folder lab07 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 lab05 files into this lab07 working directory
Use the SSH Secure File Transfer program to copy your lab05 files from ~/public_html/cisc103/lab05 on the copland.udel.edu server into your lab07 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: Follow the steps on p. 274-275 for all three of your .shtml files
Step 3a: Make the change
In your lab07 folder, edit each of your HTML documents from lab05 (except your navigation.html file, which is not a "full" HTML document), using Notepad, Wordpad, or something equivalent, and do the changes from p. 274-275 of the text.
Step 3b: Create a lab07 directory on the copland.udel.edu server
Follow the same procedure as in previous weeks.
Step 3c: Copy the modified files from your lab07 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/lab07
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. 277 of your textbook, use the validator at http://validator.w3.org to see if your XHTML is valid. (This works the same as in lab05).
Step 5: Now, validate your CSS as well!
On the page where the XHTML validates, there is a link half way down the page that looks like this:
Click on the link that says "check it for validity". This checks the CSS in your document using the validator at http://jigsaw.w3.org/css-validator
This is just like the validator from http://validator.w3.org, except it validates the CSS.
Find any errors in your CSS and fix them. Be sure to save the changed versions 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.
If not, check your results, and/or ask your TA for help.
That's it—once all your XHTML and CSS validates, you are done!
Evaluation and Grading (100 pts total)
Specifications for the lab07 web site
- Page should come up at http://copland.udel.edu/~yourusername/cisc103/lab07
- All specifications from lab05 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
- Due date: This is "due" on 10/24/06 by 11:55pm. There is nothing to "turn in"... we'll just check your page on the web.
Grading: 30 points for correctly including DOCTYPE and <meta> in each of the HTML documents, 30 points for correct XHTML validation, 30 points for correct CSS validation, and 10 points for overall correct submission and following instructions.
Your next steps
If you haven't done so already, read up through Chapter 8 in HFH, and Chapter 3 in JSA6
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.