University of Bahrain

Information Technology College

Computer Science Department

Semester 1, Year 2006/2007

ITCS 373: Class Lab Work

XHTML

 

 

Instructor: Dr. Eshaa M. Alkhalifa

 

Go to the URL http://www.itcs.silvertair.com/files/outline.htm and use your browser to see the page.  Click on View and then Source to see the source code of the file.  If it doesn’t open in HTML-Kit then copy and paste the Source to HTML-Kit.  Save the file as Myoutline.htm.

 

  1. Open a new browser window to the URL http://validator.w3.org/
  2. Copy the whole source code from your HTML Kit file to the box that says Validity by Direct Input.  Click on check.
  3. Take a look at the number of errors that you get.  Your job now is to start to fix these errors until none exist.
  4. In this Lab you will get general instructions of how to achieve your target by reminding you of the main requirements that must be changed when changing from HTML to XHTML.
  5. Start by changing the document type; from HTML to XHTML by replacing this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

With this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd">

  1. In my test I got the result Failed validation, {you will get a number here} errors
  2. Now it will be your job to correct these errors.  Do not be alarmed because most are easy to fix.
  3. In Slide number 3 of your XHTML lecture you will find the first rule to check.  All tags must be in lower case.  You can see from your list of errors that it doesn’t like the elements <HTML> and <HEAD> and <TITLE> so change all these to lower case.  Do not change the DOCTYPE because it has to be the way it is.  Notice that it was not mentioned in the list of errors.
  4. Save your work and copy and paste the whole code to the same box Validity by Direct Input.  You will notice a reduction in the number of errors that appear.
  5. If you go to Slide 4 you will find that you already changed the document type so you do not need to change anything for this. Slide 5 continues from 4.
  6. Go to Slide 6 of your XHTML lecture, and read that all documents have to be properly formed.  You will find that your document is indeed properly formed so no changes here.
  7. Slide number 7 says that all tags must be closed, and if you look at the list of errors you will find Error Line 5 column 67: end tag for "meta" omitted, but OMITTAG NO was specified.  This says that the tag is not closed.  You can close tags in two ways, either add a closing tag for all tags that require two parts or turn it into the format <hr /> for one part tags. 
  8. Go to your HTML-Kit and click on Edit and then on Replace.  You will get a popup window.  For Find what type <br> and for Replace with type <br /> Then click on Replace All.  It will fix all occurances of this particular tag.
  9. Continue closing all tags either using the method described above or doing it manually.
  10. Validate your code again and see that you fixed a large number of the errors.
  11. Now go to your code again and find all <font tags that are not closed..you should find at least 4.  Write the </font> tags at the correct position.  Your change must not alter the way the fonts look.
  12. Take a look at this Error Line 24 column 14: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.  This means that your code has numbers without quotations and this is not allowed.
  13. Use the Replace function again to replace all size=4 with size =’4’ and size=5 with size=’5’ and border=1 with border=’1’.  You will also fine one size=6 to correct making it size=’6’.
  14. Replace colspan=2 with colspan=’2’.
  15. Error Line 50 column 104: end tag for "b" omitted, but OMITTAG NO was specified.  This indicates that the <b> tag in line 50 was not closed.
  16. Error Line 51 column 32: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.  <tr><td width='20%'><font color=red> Read: </font></td><td> <a href="http://www
  17. This indicates that the attribute does not have quotes around the value so it should be color=’red’ Use the replace function to correct this.
  18. Error Line 61 column 50: end tag for "font" omitted, but OMITTAG NO was specified.
...='20%'><font color='red'> Watch: </td><td></font><a href="http://www.soi.wide
  1. This indicates that the nesting order is wrong the last tag opened is font so it must be the first closed.  Correct all these occurrences with the Replace function. Replace </td><td></font> with </font></td><td>
  2. Continue correcting until you get the result This Page Is Valid XHTML 1.0 Transitional
  3. Save your page and submit it for marking.