Below this explanation, I have pasted the converted code. Here are
the steps I followed to comply with XHTML (Transitional):
1. Add a <!DOCTYPE> that identifies XHTML Transitional.
2. Add namespace information to the <html> tag.
3. Make sure that other tags are lower case. (Example: change META to
meta).
4. Make sure all tags have a closing tag. (Example: <BR> becomes
<BR />).
Other popular tags to check <img>, create </p> and </li> tags
5. Make sure attributes are in " " format. (width=620 to
width="620")
6. Make sure attributes are in lower case. (WIDTH becomes width)
7. Make sure tags are properly nested <table>, <tr>, <td>, <div>,
<font>, etc.
8. Added alt property to <img> tags.
9. Removed invalid colspan="2" and valign attributes from the <table>
tags
10. Test with validation at http://validator.w3.org/
Here are the steps I used to put formatting into CSS:
1. Create <style> </style> just before the </head>
This could be pulled into your external stylesheet if preferred.
2. Put hr color and height in the style section.
3. Replace nested <div> center tags with center alignment in a.nav.
4. Removed errant </font> close tags.
5. Removed <font> tag from bottom of page since it did not wrap any
text.
6. Created a.nav, a.nav2 and td.blbar2 in the <style> section.
Note that a.nav and a.nav2 seem to have the same values in your
source.
You may want to make all references to a.nav for simplicity.
The following are excellent resources for DOCTYPE, XHTML, and CSS:
A List Apart: "Fixing Your Site with the Write DOCTYPE"
http://www.alistapart.com/stories/doctype/
BeeandNee: "Converting HTML documents to XHTML" by B. A. Jaison, July
2002
http://www22.brinkster.com/beeandnee/techzone/articles/htmltoxhtml.asp
DevGuru: "XHTML Coding Rules and Syntax"
http://www.devguru.com/Technologies/xhtml/quickref/xhtml_coding_rules.html
New York Public Library: "XHTML: Authoring Tips & Tools"
http://www.nypl.org/styleguide/xhtml/tips.html
W3 Schools: "CSS How To"
http://www.w3schools.com/css/css_howto.asp
W3C Markup Validation Service to validate your pages
http://validator.w3.org/
Search Strategy: Find XHTML conversion tutorials
Search Terms: convert HTML XHTML
://www.google.com/search?q=convert+HTML+XHTML
I hope you have found this information useful and easy to understand.
If you have any questions about this information, please do not
hesitate to post a clarification request before rating the answer.
This took a little bit of extra time due to some errors present in the
various codes for the table layout. Ultimately, I was able to have
the code pass XHTML validation. In addition to the description above,
I included comments in the source code to help you identify where
significant changes were made. Below is the XHTML compliant converted
source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<base href="http://ctep-dev.cancer.gov/camp/" />
<title>Mockup of Administrative Directory Redesign</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<meta name="description" content="National Cancer Institute" />
<link rel="stylesheet" type="text/css" href="/camp/ncimaster.css"
title="master" />
<style type="text/css">
body { background-color: #FFFFFF; color: #000000;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 12pt; font-style: normal; font-weight:
normal;
text-decoration: none; }
hr { color: #0a1278; height: 3px;}
a { color: #551a8b;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 12pt; font-style: normal; font-weight:
normal;
text-decoration: underline; }
td.blbar2 { background-color: #0000a0; height: 30px }
a.nav { color:#FFFFFF;
font-weight: bold;
text-align: center; text-decoration: none; }
a.nav2 { color:#FFFFFF;
font-weight: bold;
text-align: center; text-decoration: none; }
</style>
</head>
<body>
<center>
<table width="625" border="0" cellspacing="0" cellpadding="2"
bgcolor="#ffffff">
<tr>
<td>
<table width="620" border="0" cellspacing="0" cellpadding="0"
bgcolor="#ffffff">
<tr>
<td colspan="2">
<table width="620" border="0" cellspacing="0"
cellpadding="0">
<tr><td width="110"><img width="110" height="72"
border="0"
name="ncilogo"
src="/camp/images/ncilogo.gif" alt="ncilogo"
/></td><td width="520"
align="center"><span class="title">The Administrative Directory: <br
/>
Your Desktop Yellow Pages</span></td>
<!-- this appears to be a stray </td> -->
</tr></table>
<!-- in these sections there are closing font tags, but no open font
tag. Removed -->
<table border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="11"><img src="/images/spacer.gif"
height="2" width="620" alt=" " /><br /><hr width="620" /></td></tr>
<tr><td><table width="620" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td class="blbar2"><a
class="nav" href="">Home</a></td>
<td bgcolor="#ffffff"><img src="/images/spacer.gif" height="2"
width="2" alt=" " /></td>
<td class="blbar2"><a
class="nav2" href="">Subject
Index</a></td>
<td bgcolor="#ffffff"><img src="/images/spacer.gif" height="2"
width="2" alt=" " /></td>
<td class="blbar2"><a
class="nav" href="">Feedback</a></td>
<td bgcolor="#ffffff"><img src="/images/spacer.gif" height="2"
width="2" alt=" " /></td>
</tr>
</table>
<!-- not sure what to make of this closing table tag with with closing
comment mark -->
<!-- decided to remove the two dahes to make it a closing table tag
-->
<!-- also added closing td and tr tags so that tags nest properly
-->
</td></tr>
</table>
<table width="620" border="0" cellspacing="0"
cellpadding="0">
<tr><td colspan="11"><img src="/images/spacer.gif"
height="2" width="620" alt=" " /><br /><hr width="620" /></td></tr>
</table>
</td></tr></table>
</td>
</tr>
<!-- services section -->
<!-- Validator says the following closing tag was not opened -->
<!-- </tr> -->
<tr>
<td valign="top" width="490" height="400"
align="right">
<table width="490" border="0" cellspacing="0" cellpadding="0"
bgcolor="#ffffff">
<tr>
<td valign="top">
<table width="620" cellpadding="2" border="0"><tr><td valign="top"><p>
</p>
<table width="620" border="0">
<tr>
<td valign="top" width="240">
<h3><a href="">Agreements</a></h3>
<ul>
<li>CRADAs</li>
<li>Cooperative Agreements</li>
<li>Other Types of Agreements</li>
</ul>
<p> </p>
<h3><a href="">Administrative Resource Centers</a></h3>
<ul>
<li>ARC Staff Contact Lists</li>
</ul>
<h3><a href="">Budget/Financial Management</a></h3>
<ul>
<li>Current Year Budget</li>
<li>NCI Factbook</li>
<li>Gift Fund</li>
<li>Royalties</li>
<li>Other Financial Management Subjects</li>
</ul>
<h3><a href="">Budget/Financial Management</a></h3>
<ul>
<li>Current Year Budget</li>
<li>NCI Factbook</li>
<li>Gift Fund</li>
<li>Royalties</li>
<li>Other Financial Management Subjects</li>
</ul>
<h3><a href="">Building Services</a></h3>
<ul>
<li>Copy Centers</li>
<li>Mail</li>
<li>Maintenance</li>
<li>Office/Lab Moves</li>
<li>Other Building Services</li>
</ul>
<h3><a href="">Computers</a></h3>
<ul>
<li>Computer Support</li>
<li>Support Contracts</li>
<li>E-mail</li>
<li>Security</li>
<li>Training</li>
<li>Year 2000</li>
</ul>
<h3><a href="">Grants</a></h3>
<ul>
<li>Grants</li>
<li>Activities Associated with their Award</li>
</ul>
<h3><a href="">Management Analysis</a></h3>
<ul>
<li>Delegations of Authority Handbook</li>
<li>Forms</li>
<li>OMB</li>
<li>Forms Clearance</li>
<li>Management Studies</li>
<li>Organization Information</li>
<li>Policy Issuances</li>
<li>Leave Issues</li>
<li>Records Management</li>
<li>NCI Suggestion Program</li>
</ul>
</td>
<td valign="top">
<p> </p>
<p> </p>
<h3><a href="">Organizational Links</a></h3>
<ul>
<li>Links to NCI websites</li>
</ul>
<h3><a href="">Other Support Services</a></h3>
<ul>
<li>Support Services</li>
<li>Guidance Not Included in other Subject Chapters</li>
</ul>
<h3><a href="">Personnel/Human Resources</a></h3>
<ul>
<li>Recruitment</li>
<li>Merit Promotion</li>
<li>Classification</li>
<li>Benefits</li>
<li>And other personnel subjects</li>
</ul>
<h3><a href="">Procurement Contracts</a></h3>
<ul>
<li>Contracts</li>
<li>Written Purchase Orders</li>
<li>And other instruments for procuring goods and services</li>
</ul>
<h3><a href="">Property</a></h3>
<ul>
<li>Surplus Property</li>
<li>Property Policy</li>
<li>Property Points of Contact</li>
<li>And training issues</li>
</ul>
<h3><a href="">Timekeeping</a></h3>
<ul>
<li>Payroll</li>
<li>Leave issues</li>
<li>Listing of NCI TAIMS Systems Administrators</li>
</ul>
<h3><a href="">Travel</a></h3>
<ul>
<li>Travel advances</li>
<li>Currency Exchange</li>
<li>Frequent flyers</li>
<li>Ober United Travel</li>
<li>Passports and visas</li>
<li>Sponsored travel</li>
<li>Hotel taxes</li>
<li>Travel contracts</li>
</ul>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td> </td>
<td valign="bottom">
</td>
</tr>
</table>
<br /><br />
</td></tr></table>
</td>
<td valign="top">
<p> </p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height="30" valign="bottom">
<!-- Removed valign attribute from this table tag, not valid for
table, is valid for td -->
<table bgcolor="#FFFFFF" cellspacing="0" cellpadding="0"
border="0" width="620">
<tr>
<td align="center" width="620" height="20"><hr width="620"
/></td>
</tr></table>
</td>
</tr>
</table>
<!-- The validator says the following closing tags do match any open
tags -->
<!-- </td> -->
<!-- </tr> -->
<!-- </table> -->
</center>
</body>
</html> |
