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

In this lab we will be validating several HTML documents.

Part I

1. In your web browser, open up the W3C HTML Validator

2. Open a terminal window (or ssh client) and ssh into one of the classroom servers, e.g.:

   % ssh netid@classrm04.lis.uiuc.edu
   		

3. Change directory as follows:

   % cd /homei/users/netid/courseweb_html/
   		

4. Type in the following command:

   % cp -r constitution constitution_valid
   		

5. In a new window, open up the constitution_valid version of the constitution lab. The URL should be something like:

   http://courseweb.lis.uiuc.edu/~NetID/constitution_valid/constitution.html
   		

   • Web-based validators will not validate web pages unless they are "on the web", i.e., hosted on a web server.

6. 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).

7. 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.

8. 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>
   		

9. 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. Whatever you choose to change, however, be sure to keep the referrer link intact and working.

10. 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 each of your other constitution_valid pages (i.e., articles.html and billofrights.html).

Part III

Create an index page for all of the labs you have created and submitted so far. This should be located in the courseweb_html directory and named "index.html". You may structure it however you want, and add any content you think is entertaining or appropriate. But be sure to have links to each of the labs you have created so far. Then repeat the steps in Part I to validate this page.

To submit this assignment, send me the URLs for both constitution_valid and the new labs page you have created.

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