CISC474, A04 (continuation of A03)

Introductory remarks

What to do for this activity (summary)

Today you will do these things:

First you'll finish up any uncompleted steps from A03 from Monday. Each group has at least one part still left to finish up. Here's a check list:

Then, do the following new items:

  1. Make one change from the A03 assignment (my bad)... I told you to link to the following page for each group member:

    Instead, please change these links to just be:

    Reason: In H01, I'm going to have you make a file called "index.html" inside your cisc474 directory, so the link should just be the name of that directory.

  2. Add "next group" and "prev group" links to form a "web ring" among the 10 groups. For example, group 5 should have a "prev group" link to group 4, and a "next group" link to group 6. Use wrap around to make a true ring: groups 1's prev is group 10, and group 10's next is group 1.

  3. Add a writeup of the story that goes with you form to A03 web page. You can either put this directly into the web page content, or you can make it a link to an additional page; your choice. If you like, you can "just cut and paste" the original story from WebCT and then add any "enhancements" that your group came up with to make it better match your form, and the result form.

  4. Modify the input form to better match the story by adding default values that lead to your "result" page. (This is probably best explained with an example; I'll show such an example in class today.)

  5. Add code to all the web pages created for this assignment that allow you to validate the page as XHTML 1.1 (details are below).

  6. Make changes to the pages as needed until they all successfully validate as XHTML 1.1

Step 5 Detail: Adding check for XHTML 1.1 validation to your page.

First, you may be wondering why we even care about XHTML 1.1 in the first place. If so, then great! Fortunately, your textbook and the reading notes for the course have some answers. Later on, when you have time, check out:

In the meantime, to enable your page to be validated as XHTML 1.1, you need to do the following:

  1. Add the following at the very top of your page

    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    This is how you let both your browser and the XHTML validator know that you are writing to the XHTML 1.1 standard (as opposed to HTML 4.01, or one of the three flavors of XHTML 1.0)

  2. Change the <html> open tag to read as follows:

    <html xmlns="http://www.w3.org/1999/xhtml">

    This declares the "XML Namespace" for all the tags in your document. It says that unless you specify otherwise, all the tags in your document (things like <p> and <ol>) are XHTML tags, not some other kind of tag. This is very similar to doing using namespace std; in C++.

    You may be asking: "well, duh, what other kind of tag would it be?" As it turns out, XHTML is "Extensible"—that's what the X in XHTML stands for. You can add new tags to the language for special purposes, and these would come from some other namespace. This turns out to be a great idea, but one that, in my experience (because I tried it) the current crop of browsers just isn't quite ready for—I was unable to get Firefox and IE to "agree" on how this is supposed to be done. But once the browser support is there, this will be really cool. If there's time later in the semester, I'll show you my initial attempts at this.

  3. Add a file called .htaccess in your ~/public_html/cisc474 directory (note the dot at the beginning of the file name) with the following contents: 

    AddType 'text/html; charset=UTF-8' .html .htm

    This file tells the Apache web server on copland how to set the Content-Type header for all files ending in .html or .htm. If you don't have this, you'll get warnings from the validation service that the encoding of the file had to be guessed at. So that you understand what you are doing here, you can:

    Read section 1.6 in your Sebesta textbook about MIME types, plus my reading notes on that section

To add a link that enables you to check whether the page is XHTML 1.1, you can do the following:

  1. At the bottom of your content, before the </body> closing tag, put a horizontal rule element <hr />. This will separate the content from the little XHTML 1.1. icon we are going to add.

  2. Between the <hr /> element and the closing </body> tag, add the following code:
    <p>
   <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.udel.edu/CIS/images/valid-xhtml11.png" 
         alt="Valid XHTML 1.1" width="88" height="31"  />
   </a>
</p>
  3. Now, you should have a little XHTML 1.1 icon just like the one at the bottom of this page. When you click on it, it will send you to the XHTML validator at validator.w3.org. The "/check?uri=referer" part of the URL in the code above means "validate whatever page referred you to this web site".

    The little icon comes from the CIS area on the main http://www.udel.edu web server. Normally, this would be "bandwidth stealing", but I'm the maintainer of that area, and I'm giving you permission, so it is ok. (In general, the proper practice would be to download that little .png file to your own web space and link to it there.)

Step 6 detail: Making it validate successfully.

For Step 4, Chapter 2 of Sebesta and my reading notes on it should be helpful. In particular, if you already know HTML a little bit, Section 2.11 and my reading notes on it may be useful.

You can also look for helpful information online. Some good keywords to use in a web search are:

If you find some useful tutorials about XHTML, post links to them on the discussion board on WebCT or on your group's web page.

The goal is that lovely "green" bar instead of the "red bar" after you click on the XHTML 1.1 button you added in Step 3.

Grading: 20 additional points (on top of the points for A03) for each participating group member upon successful completion.

Valid XHTML 1.1 Valid CSS!