True Web Power: XHTML with CSS2

Welcome to the second half of our introductory tutorial covering XHTML and CSS2. We'll continue where we left off in Part One, and we'll now jump into the CSS2 code, get deeper into the XHTML, and look at various code validators. We've included the same full code samples at the end of this segment, in addition to the links to external resources.

The definition of CSS is "Cascading Style Sheets", and there are three specifications at this point--the original CSS1, the updated CSS2, and the specification that browsers will eventually support, CSS3, which will add even more functionality. All the CSS in this tutorial follows the rules for CSS2--most of the same rules follow from CSS1 with very few exceptions.

As we displayed in Part One, here is the resultant page we will be creating for reference:

Recall in Part One we suggested you could create your tutorial.css file by copying the provided code sample into your favorite text editor, and saving the file. Alternatively, and probably more fun, you can build the file line-by-line, following the code examples below. Either way, the tutorial.css file needs to be placed in the same folder as the index.html file. This ensures the tutorial.css file can be found via the external reference to the stylesheet listed as <link href="tutorial.css" rel="stylesheet" type="text/css" /> in the head of the index.html file.

In CSS, commenting is done in the format:

/* These are comments to help you to remember how or why you did something in CSS, also to help someone else looking at the code to understand how to maintain it. */

The comments are not run as code, and are ignored in the functioning of the CSS.

So at the top of the tutorial.css, we place a comment describing the CSS:

/*
	tutorial.css

	color scheme: 
		body background => #6699FF   
		main division background => #CCFFFF
		text color => #FFFFFF
		nav-links background => #FFFFCC


	main => ridged border
	nav-links => ridged border
	
*/

The first definition in the tutorial.css file refers to style that will be applied to the body area (the whole screen) of the HTML pages that are linked to it:

body {  
background: #6699FF;  
color: #000000;  
}  

Notice that each definition ends with a semi-colon, and that all definitions are grouped in curly brackets, {….} -- the colors are in hex and can be any properly contrasting colors. A color chart is available at http://www.accessworlddd.com/hextable.htm. Note that "background" is the background color, and "color" is the text color that will be applied to the page body.

You can also use an image for your background by adding the image address to the background definition, e.g.: background: #6699FF url(image001.jpg);

By also defining the background color in a properly contrasting color to the text, you can insure the text will be readable if the background image is not available for some reason.

Next, we define the style for the links, or the definitions between the <a> to </a> in the body section element - see anchor definitions at http://www.w3.org/TR/REC-html40/struct/links.html#edef-A

These are the recommended styles for the links based on their operational status:

/*

	Standard link color definitions. 
	
*/

a:link {    
color: #0000FF;    
background: transparent;
}    
    
a:visited {    
color: #990099;    
background: transparent;
}    
    
a:active {    
color: #000000;    
background: #ADD8E6;
}    
    
a:hover {
color: #000000;    
background: #FFFF99;
}    

We will add other styles to the CSS as we proceed.

If you have chosen to build the file line-by-line, save this code as tutorial.css.

The looks from page to page need to be consistent for ease of navigation, and for the general comfort and convenience of the user.

Naming conventions in the CSS can be done in a variety of ways--what's important to note is that the element being affected is before the period, and the class referred to in the XHTML is after the period, e.g.: in the CSS file, the "div" in div.logo is the element, and "logo" is the class - see CSS Structure and Rules at http://htmlhelp.com/reference/css/structure.html. Also note the naming convention in the CSS file, i.e.: div.logo, differs from the XHTML file's <div class="logo"> convention.

We will be specifically defining the individual style areas in the CSS. It will be expanded on in other tutorials.

For simplicity in this tutorial, we have named the classes for the divisions so they relate to content. We will do it differently in more advanced tutorials.

So let's define the division and add a comment for the logo image in the tutorial.css:

/*

    Border and padding is added in the divisions for consistency in browsers.
	
*/

div.logo {  
background: #6699FF;  
color: #000000;  
margin: 0% 10%;  
padding: 0em 0em 1em 0em; 
border: 1px;
}

The div.logo defines style for the section between the <div class="logo"> and </div> tags in the XHTML code, and is specific only to this division. The margin, padding and border definitions are to provide consistency from browser to browser, and need to be present for interoperability.

The values for the properties are set by in the sequence top, right, bottom, then left. e.g.: margin: 1% 2% 3% 4%; would be top 1%, right 2%, bottom 3%, left 4%.

Only listing two margin attributes as in the above code with: 0% 10%, sets the top and bottom margins to 0%, and the left and right margins to 10%. By using percentage values, they will adjust accordingly when in different screen sizes. If only one value is used, it applies to all four areas, e.g.: in the case of the "border: 1px", it sets the border to 1 pixel all the way around. The "em" unit is defined at http://www.w3.org/TR/REC-CSS2/syndata.html#em-width. For more information on the relationships of margin, border, and padding see http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions. We aren't going into great detail on the CSS2 box model or visual formatting model in this introductory tutorial, but if you must know more detail immediately, we would refer you to the main CSS2 spec.

We will need a paragraph definition in the CSS file for images:

/*

	For placement of images inside any division.
	
*/

p.image {  
text-align: center;  
font-family: Arial, Helvetica, sans-serif;  
background: #6699FF;
color: #000000;  
margin: 1% 10%;  
padding: 0em; 
border: 0px;
}

The p.image section defines style for the section between the <p class="image"> and </p> tags in the XHTML code, and is specific to this class of paragraph, but can be used inside any division- <div class=" "> to </div>.

The text alignment, can be left, center, right, or justify. The text-align will work for text or graphics.

You may have noticed by now that I don't define the font size. I've found that the font size is inconsistent from browser to browser--when it's not defined, it remains more consistent, also users will then see the text in the size based on their browser text size setting.

So I use <strong>Text to be made Bold</strong> and different levels of h-- <h1>Large heading</h1>, <h2>smaller heading than h1</h2>, etc. for titles that need to be relatively sized.

The font family is setup with an MS font first, a Mac font second, and a generic font third. For readability, I use Arial, Helvetica, and sans-serif.

You can also use <span class="(CSS defined style)"> for text with different formatting inside a paragraph structure </span>, and can add text decorations, colors, fonts, etc. to specific pieces of text. This is beyond the scope of this tutorial.

To add the logo image in body area of the XHTML code, it should be placed in between the <body> and the </body> under the comment "<!-- add the XHTML for your page between the body tags. -->":

<!-- this is the division to hold the logo image and h1 text -->
    <div class="logo"> 
      <p class="image"> 
        <img width="250" height="50" src="logo.gif" alt= 
          "[gif image of a Test Image with swirly background]" />  
      </p> 
      
    </div>

The image file is referred by the src="logo.gif" statement above, and is available from http://www.accessworlddd.com/tutorial/logo.gif, which you can download, and place in the same folder with your index.htm--if you replace this image with something else, change the dimensions to fit, and be sure to include its source address in the src= statement. The alt text is for information about the image to be available to people with browsers that can't display the image, or to allow people to learn about the image as it's loading. Having the text inside brackets is a recognized convention.

The browser will render the image in the center of the screen based on the "text-align: center; " statement in the p.image section of the CSS file. Given the image in our example is one of the first items to render, it will automatically be placed near the top of the screen adhering to the margins defined in the div.logo section of the CSS, and also adhering to the formatting information in the p.image section of the CSS file, which applies to placement of images within any division.

The basic format for adding an image is:

<img 
width="number of pixels wide" 
height="number of pixels height" 
src="image source location"
alt="[image of…]" />

If you do end up uploading your page and files to a hosting space, (a server), have your images available at your hosting space as much as possible, linking to other images on the WWW can slow page loading considerably, and if the image is not available for some reason, it will be displayed as a broken link.

Note: If your interactively building your index.html and tutorial.css files, make sure you save them before viewing your progress.

Next we'll define the largest heading in the CSS file called "h1" as follows:

/*

	h1 is placed against body colored background, and 
	is text color #990033
	
*/

h1 {  
text-align: center;  
font-family: Arial, Helvetica, sans-serif;  
background: #6699FF;
color: #990033;  
margin: 0% 10%;  
padding: 0em; 
border: 0px;
}

The text color has been changed to #990033 for variety and contrast.

To add the h1 heading in body of the XHTML, copy this code above the </div> tag in the logo division:

<!-- the h1 goes under the logo paragraph. -->
      <h1> 
        XHTML Tutorials 
      </h1>

The in-site navigational links can be anywhere on the page. To keep them accessible for everyone, I put them either at the top of the page, or at the top of the main text area.

Other placements, as well as other accessibility links, will be explained in a separate tutorial on accessibility issues.

In the CSS we will define the main division area, and the paragraph definition for the nav-links:

/*

	Main division holds navigational links, and the changeable content
	of the page. 
	
*/

div.main {  
background: #CCFFFF;  
color: #000000;  
margin: 0% 10%;  
padding: 0em 0em 2em 0em; 
border: 5px ridge #00FFFF;
}

The background color in the main division is set to #CCFFFF to give proper contrast to the text.

The border for the main division definition is 5 pixels all around, in a ridge, with the color #00FFFF.

/*

	Padded and bordered area for navigational links. 
	
*/

p.nav-links {  
text-align: center;
background: #FFFFCC;
color: #000000;
margin: 0%;  
padding: 3px; 
border: 3px ridge #CCFFFF;
}

The background in the nav-links is set to #FFFFCC for variety and contrast for the link area.

The border for the nav-links paragraph definition is 3 pixels all around, in a ridge, with the color #CCFFFF. Additional information about borders is at http://www.w3.org/TR/REC-CSS2/box.html#propdef-border

To give a little more space to the area around the links, 3 pixels are added all around in the padding, which is inside the border area, the margin is outside of the border area.

Also 2 em is used on the main division to place a pad inside the border at the bottom of the main division. Recall the "em" unit is defined at http://www.w3.org/TR/REC-CSS2/syndata.html#em-width

Basic Format for a Link

The basic format for a link is:

<a href="address" title="address and/or description of the file">Text for the Link</a>

The <a is the anchor element, and needs the end tag </a>. The A element description is at http://www.w3.org/TR/REC-html40/struct/links.html#edef-A

The "href" attribute specifies a Web resource, and can be to a web page, image file, sound file, PHP page, CGI, etc., either at your hosting space, a target location in a Web page, or anyplace on the WWW. The href attribute description is at http://www.w3.org/TR/REC-html40/struct/links.html#adef-href

Realize that when you link outside of your hosting space, the possibility exists that the source will not be there tomorrow. Therefore, it's important to keep up on your links, and make sure they are still active on a regular basis. A great program for this is called Xenu-- http://home.snafu.de/tilman/xenulink.html and will check both internal and external links on your site.

Also realize that you are sending someone away from your site with external links, and sometimes they don't return. It's probably not a good idea when you're trying to sell something. You may consider spawning child browser windows, still keeping your screen active too.

To add the navigational links to your XHTML program, place the following code under the logo division and above the </body>:

<!-- the main division is placed under the logo division -->
   <div class="main"> 
      <p class="nav-links"> 
        <a href="index.html" title="link to Your Home page"> 
 		 Your Home page 
        </a> |  
        <a href="someotherpage.html" title="link to Some Other Page"> 
		 Some Other Page 
        </a> |  
        <a href="anotherpage1.html" title="link to Another Page"> 
		 AnotherPage 
        </a>
      </p>
      
        </div>

Save what you have as index.html, and also save your same work under alternative filenames called "someotherpage1.html" and "anotherpage1.html" to use as templates for other pages with this basic look - and of course we can link to them in our code. These can be any naming you want, as long as the link reflects the change.

Let's put the text and heading definitions for the main division in the tutorial.css file.

For heading size 2 and 3:

/*

	For headings in the main division.  
	
*/

h2, h3 {  
text-align: center;  
font-family: Arial, Helvetica, sans-serif;  
background: #CCFFFF;
color: #000000;  
margin: 1% 10%;  
padding: 0em; 
border: 0px;
}

and paragraph alignment for text and images, left and center:

/*

	Left aligned text in the main division.  
	
*/

p.left {
text-align: left;  
font-family: Arial, Helvetica, sans-serif;  
background: #CCFFFF;
color: #000000;
margin: 2% 10%; 
padding: 0em; 
border: 0px;
}

/*

	Center aligned text in the main division.  
	
*/


p.center {  
text-align: center;  
font-family: Arial, Helvetica, sans-serif;  
background: #CCFFFF;
color: #000000;  
margin: 2% 10%;  
padding: 0em; 
border: 0px;
}

As for the rest of the main division XHTML, the following code should be placed after the </p> for the nav-links, and before the </div> for the main division. Headings cannot be placed inside a paragraph; they must stand-alone in the division.

<!-- the h2 and text is under the nav-links in the main division -->
      <h2> 
        Introduction to XHTML 1.1 with CSS2 
      </h2> 
      <p class="left"> 
         By setting up the margins correctly in the CSS, you  
		can resize this page to whatever screen size you want,  
		and it will remain readable without left right scrolling. 
      </p> 
      <p class="left"> 
		The only limitation to the width is the width plus formatting  
		on the largest image on the page.  
      </p> 
      <p class="left"> 
         Then, just by adding another paragraph structure, everything  
		automatically falls into line.  
      </p> 
      <p class="left"> 
         Each paragraph is in its own <p> </p> structure.   
      </p> 

Now let's set a link to our favorite ezine, ExtremeTech.

Since we have already defined the heading and text styles in the CSS, all we need to do is add code to the index.html. We will use the standard paragraph left class for the in text and link:

<!-- the h3 and text is the last section in the main division -->
      <h3> 
        Our Favorite Ezine 
      </h3> 
      <p class="left"> 
        This is an example of a link in text to  
      <a href="http://www.extremetech.com/"  
      	title="Link to ExtremeTech ezine."> 
      		ExtremeTech, our favorite ezine 
      </a> . 
      </p>

This code is placed after the </p> for the main text, and before the </div> for the main division.

Character entity references are used to keep certain text characters from being misread as code. See this link-- http://www.w3.org/TR/REC-html40/charset.html

Special Characters like < > " must be substituted with entities like < > " in the XHTML to display properly in the browser.

Some of the most common character entity references are shown below:

Symbol Entity Example Less than < < Greater than > > Ampersand & & nonbreaking space   quotation mark " " Copyright sign © © Registered trademark ® ® Trademark ™ ™

Note: HTML 4.0 defines ™ for the trademark sign, but this is not yet as widely supported as ™

What we have so far will display as:

Adding in text, images, and flowing the text around an image will be in the next tutorial.

Keeping an eye on your code, and running your pages through several browsers to see how they look is a good practice to get into - a good variety of browsers today would be IE 6, Netscape 6.02, Mozilla, IE 4.x, Netscape 4.79, and Lynx.

HTML, XHTML, and CSS can be checked using various code validators, which also show where the error is located, and provide a solution to the problem. Using the validators at the W3C http://validator.w3.org/, Bobby http://www.cast.org/bobby/, WDG http://www.htmlhelp.com/tools/validator/, and O'Reilly http://www.xml.com/pub/a/tools/ruwf/check.html, helps to ensure clean code before it gets on the WWW.

Bobby does not recognize the statement xml:lang="en" in <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> yet, so I use the section 508 validator for now. Nonetheless, running your page through the regular Bobby validator can catch things that other validators won't, so it's a good idea to run it through anyway.

Idealistically, a web page should be viewable with or without the CSS--maybe not exactly as the author intended, but close, and on any computer, with any connection, with a reasonable download time. We use under 20 seconds at 28.8 bps with delays as a guideline--many commercial sites cannot do this, but efforts should be made to minimize page weight.

Adding the accessibility icons at the end of your fully validated home page, and validating all the pages in your site is something you can be proud of!

So let's add one more division to the bottom of the page as your tutorial graduation.

This code is placed below the main division, and above the </body>:

<!-- the validators division is placed under the main division -->
    <div class="validators"> 
      <a href="http://validator.w3.org/" 
        title="Valid XHTML 1.1!"> 
 		 <img src="valid-xhtml11.gif"
		   width="88"
		   height="31"
		   class="linked-image"
		   alt="[Valid XHTML 1.1 Icon and link]" />
      </a> . 
      <a href="http://jigsaw.w3.org/css-validator/validator-uri.html"
        title="Valid CSS!">
 		 <img src="vcss.gif"
		   width="88"
		   height="31"
		   class="linked-image"
		   alt="[Valid CSS Icon and link]" />
      </a> . 
      <a href="http://www.cast.org/bobby/"
        title="Link to Bobby Validation Services">
 		 <img src="approved_508.gif"
		   width="88"
		   height="31"
		   class="linked-image"
		   alt="[Bobby 508 Validation Icon and link]" />
      </a> 
        </div>

and add the definition for the validators' class to the CSS:

/*

	Division to align and display the linked validator images.   
	
*/


div.validators {
text-align: center; 
background: #6699FF; 
color: #000000; 
margin: 3% 10% 0% 10%;   
padding: 0em;  
border: 1px;
}

This is also an example of a linked image, and to keep a border from being displayed around the image, we need to add the following to our CSS:

/*

	Border is defined so that linked images do not have a border.   
	
*/

img.linked-image {
border: 0px;
}

You can collect the actual images for the links after you run your page through the validators and correct any problems. All you need to do is click the link, and enter in the address for your web page in the form.

Now save your index.html and tutorial.css, then after downloading your validation images and saving them in the same directory as the other files, your Web page will display as:

Congratulations on building a completely W3C valid web page!

You now have fully valid code to start your web pages, and a CSS file to change the looks to whatever you want. By playing with the colors, margins, looking up new things to try, you can make the page look the way you want.

Remember to validate and check in several browsers as you modify the page, it's easier to catch errors as you build, than to try to figure it out sometime in the future.

Good luck!

<?xml version="1.0" encoding="ISO-8859-1"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
   <title> 
XHTML Tutorial Page 
   </title> 
  <meta http-equiv="Content-Type"  
  content="text/html; charset=iso-8859-1" /> 
  <link href="tutorial.css" rel="stylesheet" type="text/css" /> 
</head> 
   <body> 
<!-- add the XHTML for your page between the body tags. --> 
<!-- this is the division to hold the logo image and h1 text -->
    <div class="logo">  
      <p class="image">  
        <img width="250" height="50" src="logo.gif" alt=  
          "[gif image of a Test Image with swirly background]" />   
      </p>  
<!-- the h1 goes under the logo paragraph. -->
      <h1>  
        XHTML Tutorials  
      </h1> 
    </div> 
<!-- the main division is placed under the logo division -->
    <div class="main">  
      <p class="nav-links">  
        <a href="index.html" title="link to Your Home page">  
 		 Your Home page  
        </a> |   
        <a href="someotherpage.html" title="link to Some Other Page">  
		 Some Other Page  
        </a> |   
        <a href="anotherpage1.html" title="link to Another Page">  
		 AnotherPage  
        </a> 
      </p> 
<!-- the h2 and text is under the nav-links in the main division -->
      <h2>  
        Introduction to XHTML 1.1 with CSS2  
      </h2>  
      <p class="left">  
         By setting up the margins correctly in the CSS, you   
		can resize this page to whatever screen size you want,   
		and it will remain readable without left right scrolling.  
      </p>  
      <p class="left">  
		The only limitation to the width is the width plus formatting   
		on the largest image on the page.   
      </p>  
      <p class="left">  
         Then, just by adding another paragraph structure, everything   
		automatically falls into line.   
      </p>  
      <p class="left">  
         Each paragraph is in its own <p> </p> structure.    
      </p>  
<!-- the h3 and text is the last section in the main division -->
      <h3>  
        Our Favorite Ezine  
      </h3>  
      <p class="left">  
        This is an example of a link in text to   
      <a href="http://www.extremetech.com/"   
      	title="Link to ExtremeTech ezine.">  
      		ExtremeTech, our favorite ezine  
      </a> .  
      </p> 
    </div> 
<!-- the validators division is placed under the main division -->
    <div class="validators">  
      <a href="http://validator.w3.org/"  
        title="Valid XHTML 1.1!">  
 		 <img src="valid-xhtml11.gif" 
		   width="88" 
		   height="31" 
		   class="linked-image" 
		   alt="[Valid XHTML 1.1 Icon and link]" /></a>.
      <a href="http://jigsaw.w3.org/css-validator/validator-uri.html" 
        title="Valid CSS!"> 
 		 <img src="vcss.gif" 
		   width="88" 
		   height="31" 
		   class="linked-image" 
		   alt="[Valid CSS Icon and link]" /></a>.
      <a href="http://www.cast.org/bobby/" 
        title="Link to Bobby Validation Services"> 
 		 <img src="approved_508.gif" 
		   width="88" 
		   height="31" 
		   class="linked-image" 
		   alt="[Bobby 508 Validation Icon and link]" /></a>
        </div> 
   </body> 
</html>

/*
	tutorial.css

	color scheme: 
		body background => #6699FF   
		main division background => #CCFFFF
		text color => #FFFFFF
		nav-links background => #FFFFCC


	main => ridged border
	nav-links => ridged border
	
*/

body {  
background: #6699FF;  
color: #000000;  
}  

/*

	Standard link color definitions. 
	
*/

a:link {    
color: #0000FF;    
background: transparent;
}    
    
a:visited {    
color: #990099;    
background: transparent;
}    
    
a:active {    
color: #000000;    
background: #ADD8E6;
}    
    
a:hover {
color: #000000;    
background: #FFFF99;
}    

/*

	Border and padding is added in the divisions for consistency in browsers.
	
*/

div.logo {  
background: #6699FF;  
color: #000000;  
margin: 0% 10%;  
padding: 0em 0em 1em 0em; 
border: 1px;
}

/*

	For placement of images inside any division.
	
*/

p.image {  
text-align: center;  
font-family: Arial, Helvetica, sans-serif;  
background: #6699FF;
color: #000000;  
margin: 1% 10%;  
padding: 0em; 
border: 0px;
}

/*

	h1 is placed against body colored background, and 
	is text color #990033
	
*/

h1 {  
text-align: center;  
font-family: Arial, Helvetica, sans-serif;  
background: #6699FF;
color: #990033;  
margin: 0% 10%;  
padding: 0em; 
border: 0px;
}

/*

	Main division holds navigational links, and the changeable content
	of the page. 
	
*/

div.main {  
background: #CCFFFF;  
color: #000000;  
margin: 0% 10%;  
padding: 0em 0em 2em 0em; 
border: 5px ridge #00FFFF;
}

/*

	Padded and bordered area for navigational links. 
	
*/

p.nav-links {  
text-align: center;
background: #FFFFCC;
color: #000000;
margin: 0%;  
padding: 3px; 
border: 3px ridge #CCFFFF;
}

/*

	For headings in the main division.  
	
*/

h2, h3 {  
text-align: center;  
font-family: Arial, Helvetica, sans-serif;  
background: #CCFFFF;
color: #000000;  
margin: 1% 10%;  
padding: 0em; 
border: 0px;
}

/*

	Left aligned text in the main division.  
	
*/

p.left {
text-align: left;  
font-family: Arial, Helvetica, sans-serif;  
background: #CCFFFF;
color: #000000;
margin: 2% 10%; 
padding: 0em; 
border: 0px;
}

/*

	Center aligned text in the main division.  
	
*/


p.center {  
text-align: center;  
font-family: Arial, Helvetica, sans-serif;  
background: #CCFFFF;
color: #000000;  
margin: 2% 10%;  
padding: 0em; 
border: 0px;
}

/*

	Division to align and display the linked validator images.   
	
*/


div.validators {
text-align: center; 
background: #6699FF; 
color: #000000; 
margin: 3% 10% 0% 10%;   
padding: 0em;  
border: 1px;
}

/*

	Border is defined so that linked images do not have a border.   
	
*/

img.linked-image {
border: 0px;
}

The W3C's Web Accessibility Initiative

XHTML Tools Web Page Creators - Writing HTML & CSS W3C XHTML Basic W3C XHTML 1.0 Specification Zvon Basic XHTML reference

CSS WDG (Web Design Group) CSS W3C Cascading Style Sheets, level 1 W3C Cascading Style Sheets, level 2 Zvon CSS1 Reference WebReview Master CSS Compatibility Chart WDG CSS Properties Cascading Style Sheets The Definitive Guide

Validators and DTD's W3C HTML Validation Service XHTML DTDs --> HTML DTD's Catalog DTD's W3C Cascading Style Sheet (CSS) Validation Service O'Reilly XML.com RUWF XML Syntax (well-formed) checker WDG XHTML Validator BOBBY (CAST) Access for People with Disabilities checker W3C Link Checker Find broken links on your site with Xenu's Link Sleuth (TM) Info and Use of Lynx Page Valet Site Valet Evaluation, Repair, and Transform Tools for Web Content Accessibility

Copyright © 2004 Ziff Davis Media Inc. All Rights Reserved. Originally appearing in ExtremeTech.