The Assignment

1. Read

   the XHTML5 Setup web page. Then, duplicate your Assignment 2 web page. (There are directions for doing this in the Dreamweaver Setup web page; basically, you select the file and press Control-D.) Rename the copy from index.html to index.xhtml. This name is special in two ways:
   1. Because of the the way the Apache server is set up in the lab, index.xhtml is the file that will be delivered when both index.html and index.xhtml are in a directory.
   2. Again, because of the way the Apache server is set up in the lab, files with the .xhtml extension are recognized as containing PHP code. (.html files are not.) In order to get our HTML5 code to be delivered as XHTML, we use PHP to generate the appropriate message headers, XML declaration, DOCTYPE, and html tag for browsers that can process XHTML5 documents correctly, and the corresponding plain HTML values for other browsers.

2. Replace

   everything in your index.xhtml document from the beginning through the html tag with the PHP code given in the first white box in the XHTML5 Setup page.

3. Replace

   the /body and /html tags at the end of your index.xhtml file with the code from the second white box in the XHTML5 Setup page. This will insert the two links to the W3C validators that are required for all web pages you do for this course.

4. View

   your web page! It should look exactly like your web page for Assignment 2 except for the added links to validators at the bottom. If not, there are several things you need to check:

   • Are you testing with a browser that processes XHTML5 documents correctly?

     If you are using IE9, Firefox, Chrome, or Safari in the lab, the answer should be “yes.” But to be sure, you should check the XHTML5 Setup page to be sure that page is being delivered to your browser using the application/xhtml+xml MIME type.

   • Is there an XML parsing error message being displayed?

     Browsers indicate XML errors in various ways: Firefox draws ------^ characters to point at where it found the problem; Chrome shows the web page up to the line of code that caused the problem; all browsers also display error messages that can be seem obscure until you get used to them.

     If there is an XML syntax error, you have to correct it.

   • Is the page content garbled?

     If the page just doesn’t look right, you have to track down what tag(s) got messed up when you edited the page. Look at the browser output for clues, and then read your code to see where the problem is. It might be helpful to use the browser’s “view source” option to see exactly what code was delivered to the browser.

5. Validate your page.

   Use the XHTML Validator link at the bottom of the page to make sure that the page is recognized as valid HTML5. There must be no errors, and only the single warning about HTML5 being experimental. If there are any errors or any other warnings, you have to figure out what went wrong and fix the document.

   Try the CSS Validator too. Your web page has no CSS rules yet, so there will be no errors. But be sure the link is set up correctly and does indeed take you to the validator.

Submit the Assignment

When your page is ready for me to review, send an email message to Christopher.Vickery@qc.cuny.edu with CS‑081 Assignment 3 as the Subject line. All you have to do is to put your name in the body of the message so that I know who sent the message. I will then copy your website from your profile on the server (oak) in the lab to the web server on babbage, where I will verify that it works correctly.

• The web server on babbage is on a case-sensitive file system. That means that if you don't capitalize file and directory names exactly right, your site will no longer work when it is copied to babbage, even though it may have worked perfectly well in the lab, where the file system is case-insensitive. Be sure the name of you web page is index.xhtml using all lowercase letters.
• Your site will not be copied to the DocumentRoot on babbage, so any links with absolute pathnames (ones that start with a / character) will not work: make sure that all internal links in your site use relative, not absolute, pathnames. This is not an issue for this assignment (there are no internal links), but important to keep in mind for future assignments.