LIS 390W1A - Lab 9: Writing Valid HTML/XHTML

In this lab we will be validating several HTML documents: Your feedback webpage, and your constitution website. I have saved copies of the assignments you turned in, so any changes you make won't affect your grade since both labs are currently ungraded.

Part I

1. In your web browser, open up the W3C HTML Validator
2. In a new window, open up the webpage you used to give me feedback for Lab 8. Make sure that you are opening up the webpage you have saved on a server, and not a webpage that is saved on your own, personal machine.
   • Web-based validators will not validate web pages unless they are "on the web", i.e., hosted on a web server.
3. Also open up a copy of the webpage in a text editor. This can be either via WebDAV so that you are editing the page remotely. Or, you can save a copy to your local machine, and edit it directly (and then move it back over to the server either via WebDAV or SCP).
4. Copy the URL of your webpage and paste it into the textbox in the W3C HTML Validator page. Hit enter or click on the "check" button.
   1. If the webpage that loads has a green bar near the top with the text: "This Page Is Valid XHTML 1.0 Strict!", then your HTML is valid! Skip the rest of this sub-list of instructions and go on to major step 5.
   2. If the webpage that loads has a red bar near the top with the text: "This page is not Valid XHTML 1.0 Strict!", then your HTML is invalid.
   3. If your HTML is invalid, then start scrolling through the errors that come up. Edit your file to fix the errors as they come up, one by one. Common errors include:
      • Missing quotes from attribute values
      • Ampersands (and other special characters) which have not been properly escaped: & when it should be &
      • Missing a close tag
      • etc.
   4. Edit your file to fix the errors in a sequential order: start at the top and work your way down. Remember, the same mistake in the file can often cause multiple errors, and it can cause the validator to screw up reading the file, so that it produces phantom errors.
   5. When you think you've fixed a chunk of errors, then save the file, and (if applicable) re-upload the file to the server. Note: this chunk of errors may be big or small: the newer you are to validation, the fewer errors you should aim to fix before testing out your fixes.
   6. Once you have uploaded the file, on the validation page, click on the box with the URL next to the word "Address:" and hit enter, and the validator will try again with the newly uploaded file. You will probably find that many more errors disappeared than you fixed, and most any new error will be on top. That's because some of the errors toward the bottom of the page were false errors, detected because the validation algorithm used an incorrect interpretation of the file to read the HTML.
   7. Now repeat the error fixing process. Once you get a page that successfully validates, continue on to major step 5.

5. Now paste some version of the following HTML into the bottom of your page, right above the </body> tag (this is a modified and embellished version of the HTML that appears on the "valid" page when you have successfully validated your HTML):

   <div class="footer">
       <div class="cluster">
           <div>Created by Ingbert Floyd (<a href="mailto:ifloyd2@uiuc.edu">email me</a>)</div>
       
           <div>Last updated: Wednesday, 3rd of October, 2007</div>
       </div>
           
       <div class="cluster">
           <div>HTML Validation:</div>
       
           <div>
               <a href="http://validator.w3.org/"><img
                   src="http://www.w3.org/Icons/valid-xhtml10"
                   alt="Valid XHTML 1.0 Strict" 
                   style="border:0;width:88px;height:31px"></img></a>
           </div>
   
           <div>Last validated: Wednesday, 3rd of October, 2007</div>
           <div><a href="http://validator.w3.org/check?uri=referer">Validate the HTML of this page yourself.</a></div>
       </div>
   
   </div>
   		

6. In the text you just pasted into your document, make the obvious changes (e.g.: edit the name of the author, edit the email address, edit the date last modified, the date last validated, etc.). Feel free to make unobvious changes as well.

7. Now paste the following HTML into your <head> section (anywhere not within other tags present in the <head> section of your HTML document is fine):

   <style type="text/css" media="all">
   
   .cluster {
   	margin: 1em 0em 1em 0em;
   	}
   
   .footer {
   	padding: 1em 1em 1em 1em;
   	font-style: italic;
   	font-size: 80%;
   	border-top: 2px solid black;
   	}
   
   </style>
   		

Part II

Now repeat Part I for your constitution pages from Lab 7. Make sure you validate each page of the constitution assignment (i.e., articles.html, billofrights.html, and constitution.html).

To submit this assignment, resend me the URLs for both Lab 7 (constitution) and Lab 8.

Out of 25 points total.

• Each page validates: 4 points for each page (16 points total)
• Included a validation link for each page: 1 point for each page (4 points total)
• Included correct authorship, dates, styles: 1 point for each page (4 points total)
• Emailed me your links: 1 point