文章基本信息

标题：True Web Power: XHTML with CSS2
作者：John C. Fish
期刊名称：ExtremeTech
印刷版ISSN：1551-8167
出版年度：2002
卷号：June 2002
出版社：Ziff Davis Media Inc.

True Web Power: XHTML with CSS2

John C. Fish

Welcome to the third part of our XHTML 1.1 with CSS2 tutorial series. We'll continue where we left off in Part Two adding a left menu and accessibility features to the pages (including a site map), and we'll flow text around images, topped off by dressing up the text using "span".

I'd like to point out that my good friend and adviser James Pickering from AWD&D (my employer), has recommended that a monotype font be added to the CSS, and this change is reflected in our CSS code.

The index.html page we'll build in this tutorial will look like the following:

There are images showing other pages from the tutorial site template as we get to them in this article.

The XHTML pages and tutorial.css code are updated from the Part Two Tutorial and displayed in their entirety below. You can either copy the code from below, or add to the original tutorial code as we progress, which is probably more fun. This can be done in your favorite text editor.

The Executive Director of Access World Design and Development, Cathy Hardman, saw the end result of this tutorial, and requested that our site be updated to use this design, and you can see the results at http://www.accessworlddd.com/.

I also updated http://www.johncfish.com/ with a variation of this template. Because of consistency in design, the conversion was relatively simple; most of the changes were in the CSS with very few XHTML modifications-- this is one of the advantages to using valid XHTML 1.1 with CSS2.

The index.html and other XHTML pages from this tutorial, as well as the tutorial.css and all images, need to be saved in the same folder to function properly. If you decide to use a different folder structure, make sure that the links in the XHTML and to the CSS reflect the folder differences.

First let's add the left menu to the XHTML and CSS.

Place this code under the logo division in the index.html:

&lt;!-- the main-body division is used to keep 
      the left menu and the main divisions
      properly placed --&gt;
     &lt;div class="main-body"&gt;
&lt;!-- the left menu div is placed as the first 
      section in the main body division --&gt;
    &lt;div class="left-menu"&gt;  
      &lt;p class="menu-links"&gt; 
      &lt;a href="#body"  
      title="Jump to Main Text"&gt; 
      Main&lt;br /&gt; 
      Text&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt; 
      &lt;p class="menu-links"&gt;  
      &lt;a href="sitemap.html"
      title="link to the site map" &gt; 
      Site&lt;br /&gt;  
      Map&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
      &lt;p class="menu-links"&gt;  
      &lt;a href="someotherpage.html" 
      title="link to Some Other Page"&gt;  
      Some&lt;br /&gt;
      Other&lt;br /&gt;
      Page&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
      &lt;p class="menu-links"&gt;  
      &lt;a href="anotherpage1.html" 
      title="link to Another Page"&gt;  
      Another&lt;br /&gt;
      Page&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
    &lt;/div&gt;

To avoid the "adjacent links with only white space" error, we have put "&nbsp;" after the close tag for the links in the left-menu. Any adjacent links need something besides a space between them-- you can actually use any other character for this.

A close tag needs to be added at the bottom of the main division to close the main body division- for placement, see the full code version.

&lt;!-- close tag for the main-body division --&gt;
    &lt;/div&gt;

The main-body division keeps the content properly placed across all browsers, and placing the left-menu in its own division makes a stable "placeholder" for the contents of the left-menu.

The Main Text link is an example of a link to an in-text target, and is placed as the first link found on a page. This is for someone with adaptive equipment to jump to the main body text in the page, bypassing the repeated content from page to page. A variation of this technique is to place the Site Map first, but one of the two links should be the first navigational link.

We need to add a target for the link. In valid XHTML 1.1 this needs to be the "id" tag- we will place the target at the beginning of the body text, and note that this target does not show in the end display of the page.

The "id" tag does not work in some older browsers. Also, the "name" tag, which is the deprecated tag replaced by the "id" tag, does not validate as XHTML 1.1, so we use the "id" tag because it works for the people that really need it. Using both would work, but then the pages won't validate.

For placement, see the Full Code.

&lt;!-- target for the Main Text Link 
      also &amp;nbsp; added to link above --&gt;
      &lt;a id="body"&gt;&lt;/a&gt;

Add to the tutorial.css:

/*

       the main body division is to keep 
       the floated left menu functioning 
	 properly with the main content --&gt;

*/

div.main-body {      
	text-align: center;    
	background: #66CCFF;      
	color: #000000;      
	margin: 0% 10% 0% 10%;
	border: 5px ridge #CC0000;    
	}    

 /*

         division and link definitions 
         for the left menu

 */

 div.left-menu {   
	text-align: center;   
	font-family:Arial,Helvetica,sans-serif,monospace;   
	background: #6699FF;   
	color :#000000;   
	float: left;   
	clear: none;   
	width: 10%;   
	margin: 0px 2px 0px 0px;      
	padding: 0em;     
	border: 1px;    
	}   
   
  p.menu-links {      
	text-align: center;    
	background: #FFFFCC;    
	color: #000000;    
	margin: 0%;      
	padding: .3em;     
	border: 3px ridge #FF6633;    
	}

The "float" on the left-menu division places the menu to the left of other content in the main-body division, and "clear" defines where content is NOT allowed in relation to the division.

Float and clear should always be used in conjunction with each other. So, "clear: right;" would not allow content to be displayed to the right of the floated division, "clear: left;" would not allow content to be displayed to the left of the floated division, "clear: both;" would not allow content on either side, and "clear: none;" allows content on both sides, and has the least chance of conflict on the page. For more information on "float" and "clear"- http://www.zvon.org/xxl/css1Reference/Output/index.html

As one of the first links and the last link on your pages, we'll place links to the site map. On an extremely long page, you may want to place other "id" tags and a corresponding table of contents, similar to page navigation targets, including a "top of page" link.

We try to restrict page size, and instead create lots of pages, but sometimes this isn't possible. By creating a page table of contents at the top of a very long page with in-page navigational links to key points in the page, you can have a large amount of information on one page-- like a mini-site in a page. Many reference pages at the W3C are done this way.

This is an example of a targeted link to an in-text target of an externally linked page.

&lt;!-- link to site map as the last 
      item on the page --&gt;
      &lt;p class="nav-links"&gt;
        &lt;a href="sitemap.html#body" title=
        "link to The Site Map"&gt;Link to The 
        Site Map&lt;/a&gt; .
      &lt;/p&gt;

The validators division should only be placed on the index.html page, so update the code we created for "someotherpage.html" and "anotherpage1.html" in the first tutorials without the validators division to retain consistency in your site templates, then save one of them also as "sitemap.html" in the same folder to create the site map.

The site map is an accessibility feature for all users, and adds convenience in navigation for everyone by providing a "table of contents" for your site.

In the sitemap.html add:

&lt;!-- content for the site map --&gt;
      &lt;h2&gt;
        Site Map
      &lt;/h2&gt;
      &lt;ul class="sitemap"&gt;
        &lt;li class="pad"&gt;
          &lt;a href="index.html" 
          title="link to Home Page"&gt;
          Home Page&lt;/a&gt;&amp;nbsp;
           &lt;ul&gt;
             &lt;li class="pad"&gt;
             &lt;a href="http://www.extremetech.com/"   
      	      title="Link to ExtremeTech ezine."&gt;  
      	      ExtremeTech, our favorite ezine&lt;/a&gt;.
             &lt;/li&gt;
             &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="pad"&gt;
          &lt;a href="someotherpage.html" 
          title="link to Some Other Page"&gt;  
          Some Other Page&lt;/a&gt;&amp;nbsp;
        &lt;/li&gt;
        &lt;li class="pad"&gt;
          &lt;a href="anotherpage1.html" 
          title="link to Another Page"&gt;  
          Another Page&lt;/a&gt;&amp;nbsp;
        &lt;/li&gt;
      &lt;/ul&gt;

In the tutorial.css add:

/*

	Definition for the ul and li in the sitemap.  
	
*/

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

The full code for sitemap.html is provided below, this will look like:

This is an example of using an unordered list, "ul", with list includes, "li". The bullets are automatically added in the default style in this example. Other bullet styles or numbering systems can be used. More information on list options is available at- http://www.w3.org/TR/REC-html40/struct/lists.html.

Let's use the someotherpage.html for an example of flowing text around images. The text is nonsensical, used for text filler on examples, and we'll use the logo.gif.

In the someotherpage.html add:

&lt;!-- text flowed around an image example  --&gt;       
      &lt;p class="left"&gt;
        &lt;img class="float-left" width="250" height="50" src=
        "logo.gif" alt=
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;
        Lorem ipsum dolor sit amet, consectetuer adipiscing
        elit, sed diam nonummy nibh euismod tincidunt ut
        laoreet dolore magna aliquam erat volutpat. Ut wisi
        enim ad minim veniam, quis nostrud exerci tation
        ullamcorper suscipit lobortis nisl ut aliquip ex ea
        commodo consequat. Duis autem vel eum iriure dolor in
        hendrerit in vulputate velit esse molestie consequat,
        vel illum dolore eu feugiat nulla facilisis at vero
        eros et accumsan et iusto odio dignissim qui blandit
        praesent luptatum zzril delenit augue duis dolore te
        feugait nulla facilisi. Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit, sed diam nonummy nibh
        euismod tincidunt ut laoreet dolore magna aliquam erat
        volutpat.
      &lt;/p&gt;
      &lt;p class="left"&gt;
        &lt;img class="float-right" width="250" height="50" src=
        "logo.gif" alt=
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;
        Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor
        in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis
        at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis
        dolore te feugait nulla facilisi.
      &lt;/p&gt;
      &lt;p class="left"&gt;
        Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat
        facer possim assum. Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit, sed diam nonummy nibh
        euismod tincidunt ut laoreet dolore magna aliquam erat
        volutpat. 
      &lt;img class="float-left" width="250" height=
        "50" src="logo.gif" alt=
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;
        Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. 
      &lt;img class="float-right" width="250" height=
        "50" src="logo.gif" alt=
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;
        Duis autem vel eum iriure dolor
        in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis.
      &lt;/p&gt;

Some older browsers act unpredictably when float is used on an image, to get the best results possible, we have to use the @import rule to separate the offending code into another CSS page.

The way this works is that the older browsers don't handle some CSS code very well, and they also don't handle the @import and ignore it. This means that it may not be consistent in the way it's viewed in older browsers, but it will be readable if done correctly, anytime you use a work-around like this, it is even more important to check your results in a variety of browsers and validators.

The @import needs to be the first line of non-comment code of the tutorial.css, so at the top of the tutorial.css add:

/* 
	
	Older browsers can't handle some CSS styles
	- they also don't see the  @import code.
	So any code that makes them act unpredictably
	goes into a separate CSS file, and the offending 
	browsers ignore it.
	
*/

@import url(other.css);

Then make a new CSS file called "other.css", and place this code in it- this would be a regular text file named other.css:

/*

     	@import example, and 
    	 text flowed around an image example  
	
*/

  img.float-left {
	float: left;   
	clear: none;   
	margin: 1%; 
	padding: 0em; 
	border: 0px;
	}

  img.float-right {
	float: right;   
	clear: none;   
	margin: 1%; 
	padding: 0em; 
	border: 0px;
	}

The full code for someotherpage.html is provided below, in Linux, with Galeon1.0.1, and Mozilla1.0, this will look like:

This is consistent in other newer browsers.

In Netscape 4.76 in Win 2000 Pro, this will look like the following:

Though the contents are not completely consistent, the page remains readable in older browsers. The floated area's borders will also overlap to an extent-- this is acceptable as long as the content is readable. The left menu has become a standard on the WWW--this is the best way I've found to present a left menu and still follow the recommendations of the W3C.

You can also use for text with different formatting inside a paragraph structure , and add text decorations, colors, fonts, etc. to specific pieces of text.

A very good list of properties that can be used in the CSS for "span" is available at- http://www.zvon.org/xxl/css1Reference/Output/index.html .

There is an excellent compatibility chart at- http://www.webreview.com/style/css1/charts/mastergrid.shtml and will give you an indication of what works in what browsers- e.g.: "blink" as a text decoration is very poorly supported, and should not be used. Although not on the list at all, another one not to use is "marquee"- it is proprietary to MS Internet Explorer. These are very distracting for people with sight disorders.

For bold text can be used, and for italicized text can be used in line in the code.

In the anotherpage1.html add:

<h2> Introduction to XHTML 1.1 with CSS2 </h2> 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. The only limitation to the width is the width plus formatting on the largest image on the page. Then, just by adding another paragraph structure, everything automatically falls into line.

In the tutorial.css add:

/* 
 
	Definitions for span examples.   
	 
*/ 

  span.red-black {       
	background: #000000;     
	color: #FF0000;     
	}     

  span.black-yellow {       
	background: #FFFF99;     
	color: #000000;     
	}     

  span.white-red {       
	background: #FF0000;     
	color: #FFFFFF;     
	}

The full code for anotherpage1.html is provided below, and will look like:

Many other properties can be used with the "span" in the CSS, and when you are done, make sure you test in a variety of browsers, and that the code validates.

Make sure that all text and background colors properly contrast, and the final test- is the text decoration really necessary for presentation of the content?

At this point in the tutorial series you have a fully functional template set to build a site, by adding more pages, providing in-site navigation to the pages, and keeping the Site Map updated, you can have the site grow to whatever number of pages you want.

I encourage you to play with different colors and code in the XHTML 1.1 and CSS2, and build your own templates with the fully tested results.

As your template gallery grows, you will find that you can develop sites just as fast as with a WYSIWYG editor, only they will be fully validated code, and will work on any piece of equipment anywhere on the WWW. If you use this template with Macromedia's new release, Studio MX, which includes a WYSIWYG editor called Dreamweaver MX, it will retain all this valid code. It's the first WYSIWYG editor I've found that will do this properly.

Another advantage is the updating and maintenance of a site developed this way is a breeze, and mass replacing of portions of the XHTML is possible because of the consistency from page to page. And changing a couple of lines in the CSS will give your site a whole new look.

The next tutorials in the series will handle advanced Meta tags, RDF- Resource Description Framework metadata, how to get your site seen using the advantages of an Accessible Site on the WWW, and how you sell the concept of Accessible Web Design to someone who doesn't understand why it's necessary.

Remember, you can dress it up, but check it out before you take it anywhere.

&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;  
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"&gt; 
&lt;head&gt; 
   &lt;title&gt; 
XHTML Tutorial Page 
   &lt;/title&gt; 
  &lt;meta http-equiv="Content-Type"  
  content="text/html; charset=iso-8859-1" /&gt; 
  &lt;link href="tutorial.css" rel="stylesheet" type="text/css" /&gt; 
&lt;/head&gt; 
   &lt;body&gt; 
&lt;!-- add the XHTML for your page between the body tags. --&gt; 
&lt;!-- this is the division to hold the logo image and h1 text --&gt;
    &lt;div class="logo"&gt;  
      &lt;p class="image"&gt;  
      &lt;img width="250" height="50" src="logo.gif" alt=  
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;   
      &lt;/p&gt;  
&lt;!-- the h1 goes under the logo paragraph. --&gt;
      &lt;h1&gt;  
      XHTML Tutorials  
      &lt;/h1&gt; 
    &lt;/div&gt; 
&lt;!-- the main-body division is used to keep the left 
menu and the main divisions
      properly placed --&gt;
     &lt;div class="main-body"&gt;
&lt;!-- the left menu div is placed as the 
        first section in the main body division --&gt;
    &lt;div class="left-menu"&gt;  
      &lt;p class="menu-links"&gt; 
      &lt;a href="#body"  
      title="Jump to Main Text"&gt; 
      Main&lt;br /&gt; 
      Text&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt; 
      &lt;p class="menu-links"&gt;  
      &lt;a href="sitemap.html"
      title="link to the site map" &gt; 
      Site&lt;br /&gt;  
      Map&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
      &lt;p class="menu-links"&gt;  
      &lt;a href="someotherpage.html" 
      title="link to Some Other Page"&gt;  
      Some&lt;br /&gt;
      Other&lt;br /&gt;
      Page&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
      &lt;p class="menu-links"&gt;  
      &lt;a href="anotherpage1.html" 
      title="link to Another Page"&gt;  
      Another&lt;br /&gt;
      Page&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
    &lt;/div&gt;  
    &lt;div class="main"&gt;  
      &lt;p class="nav-links"&gt;  
      &lt;a href="index.html" title="link to Your Home page"&gt;  
 		 Your Home page  
      &lt;/a&gt; |   
      &lt;a href="someotherpage.html" title="link to Some Other Page"&gt;  
		 Some Other Page  
      &lt;/a&gt; |   
      &lt;a href="anotherpage1.html" title="link to Another Page"&gt;  
		 AnotherPage  
      &lt;/a&gt;&amp;nbsp;
      &lt;/p&gt; 
&lt;!-- target for the Main Text Link also &amp;nbsp; added to link above --&gt;
      &lt;a id="body"&gt;&lt;/a&gt;
&lt;!-- the h2 and text is under the nav-links in the main division --&gt;
      &lt;h2&gt;  
      Introduction to XHTML 1.1 with CSS2  
      &lt;/h2&gt;  
      &lt;p class="left"&gt;  
       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.  
      &lt;/p&gt;  
      &lt;p class="left"&gt;  
		The only limitation to the width is the width plus formatting   
		on the largest image on the page.   
      &lt;/p&gt;  
      &lt;p class="left"&gt;  
       Then, just by adding another paragraph structure, everything   
		automatically falls into line.   
      &lt;/p&gt;  
      &lt;p class="left"&gt;  
       Each paragraph is in its own &lt;p&gt; &lt;/p&gt; structure.    
      &lt;/p&gt;  
&lt;!-- the h3 and text is the last section in the main division --&gt;
      &lt;h3&gt;  
      Our Favorite Ezine  
      &lt;/h3&gt;  
      &lt;p class="left"&gt;  
      This is an example of a link in text to   
      &lt;a href="http://www.extremetech.com/"   
      	title="Link to ExtremeTech ezine."&gt;  
      		ExtremeTech, our favorite ezine  
      &lt;/a&gt; .  
      &lt;/p&gt; 
&lt;!-- link to site map as the last item on the page --&gt;
      &lt;p class="nav-links"&gt;
        &lt;a href="sitemap.html#body" title=
        "link to The Site Map"&gt;Link to The Site Map&lt;/a&gt; .
      &lt;/p&gt;
    &lt;/div&gt;  
&lt;!-- close tag for the main body division --&gt;
    &lt;/div&gt; 
&lt;!-- the validators division is placed under the main division --&gt;
    &lt;div class="validators"&gt;  
      &lt;a href="http://validator.w3.org/"  
      title="Valid XHTML 1.1!"&gt;  
 		 &lt;img src="valid-xhtml11.gif" 
		   width="88" 
		   height="31" 
		   class="linked-image" 
		   alt="&#91;Valid XHTML 1.1 Icon and link&#93;" /&gt;&lt;/a&gt;.
      &lt;a href="http://jigsaw.w3.org/css-validator/validator-uri.html" 
      title="Valid CSS!"&gt; 
 		 &lt;img src="vcss.gif" 
		   width="88" 
		   height="31" 
		   class="linked-image" 
		   alt="&#91;Valid CSS Icon and link&#93;" /&gt;&lt;/a&gt;.
      &lt;a href="http://www.cast.org/bobby/" 
      title="Link to Bobby Validation Services"&gt; 
 		 &lt;img src="approved_508.gif" 
		   width="88" 
		   height="31" 
		   class="linked-image" 
		   alt="&#91;Bobby 508 Validation Icon and link&#93;" /&gt;&lt;/a&gt;
      &lt;/div&gt; 
   &lt;/body&gt; 
&lt;/html&gt;

/* 

	Older browsers can't handle some CSS styles
	- they also don't see the  @import code.
	So any code that makes them act unpredictably
	goes into a separate CSS file, and the offending 
	browsers ignore it.
	
*/

@import url(other.css);

/*
	tutorial.css

	color scheme: 
		body background =&gt; #6699FF   
		main-body division background =&gt; #66CCFF
		main division background =&gt; #CCFFFF
		text color =&gt; #FFFFFF
		nav-links background =&gt; #FFFFCC

	main-body =&gt; ridged border
	main =&gt; ridged border
	nav-links =&gt; 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,monospace;  
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,monospace;  
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,monospace;  
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,monospace;  
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,monospace;  
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 main body division is to keep the 
       floated left menu functioning 
       properly with the main content 

*/

  div.main-body {      
	text-align: center;    
	background: #66CCFF;      
	color: #000000;      
	margin: 0% 10% 0% 10%;
	border: 5px ridge #CC0000;    
	}    

/*

	Definition for the left menu and the
        menu links.   
	
*/

  div.left-menu {   
	text-align: center;   
	font-family:Arial,Helvetica,sans-serif,monospace;   
	background: #6699FF;   
	color :#000000;   
	float: left;   
	clear: none;   
	width: 10%;   
	margin: 0px 2px 0px 0px;      
	padding: 0em;     
	border: 1px;    
	}   
   
  p.menu-links {      
	text-align: center;    
	background: #FFFFCC;    
	color: #000000;    
	margin: 0%;      
	padding: .3em;     
	border: 3px ridge #FF6633;    
	}    

/*

	Definition for the ul and li in the sitemap.  
	
*/

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

/* 
 
	Definitions for span examples.   
	 
*/ 

  span.red-black {       
	background: #000000;     
	color: #FF0000;     
	}     

  span.black-yellow {       
	background: #FFFF99;     
	color: #000000;     
	}     

  span.white-red {       
	background: #FF0000;     
	color: #FFFFFF;     
	}

/*

     @import example, and 
     text flowed around an image example  
	
*/

  img.float-left {
	float: left;   
	clear: none;   
	margin: 1%; 
	padding: 0em; 
	border: 0px;
	}

  img.float-right {
	float: right;   
	clear: none;   
	margin: 1%; 
	padding: 0em; 
	border: 0px;
	}

&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;  
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"&gt; 
&lt;head&gt; 
   &lt;title&gt; 
Site Map 
   &lt;/title&gt; 
  &lt;meta http-equiv="Content-Type"  
  content="text/html; charset=iso-8859-1" /&gt; 
  &lt;link href="tutorial.css" rel="stylesheet" type="text/css" /&gt; 
&lt;/head&gt; 
   &lt;body&gt; 
&lt;!-- add the XHTML for your page between the body tags. --&gt; 
&lt;!-- this is the division to hold the logo image and h1 text --&gt;
    &lt;div class="logo"&gt;  
      &lt;p class="image"&gt;  
      &lt;img width="250" height="50" src="logo.gif" alt=  
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;   
      &lt;/p&gt;  
&lt;!-- the h1 goes under the logo paragraph. --&gt;
      &lt;h1&gt;  
      XHTML Tutorials  
      &lt;/h1&gt; 
    &lt;/div&gt; 
&lt;!-- the main-body division is used to keep 
      the left menu and the main divisions
      properly placed --&gt;
     &lt;div class="main-body"&gt;
&lt;!-- the left menu div is placed as the first 
      section in the main body division --&gt;
    &lt;div class="left-menu"&gt;  
      &lt;p class="menu-links"&gt; 
      &lt;a href="#body"  
      title="Jump to Main Text"&gt; 
      Main&lt;br /&gt; 
      Text&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt; 
      &lt;p class="menu-links"&gt;  
      &lt;a href="sitemap.html"
      title="link to the site map" &gt; 
      Site&lt;br /&gt;  
      Map&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
      &lt;p class="menu-links"&gt;  
      &lt;a href="someotherpage.html" 
      title="link to Some Other Page"&gt;  
      Some&lt;br /&gt;
      Other&lt;br /&gt;
      Page&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
      &lt;p class="menu-links"&gt;  
      &lt;a href="anotherpage1.html" 
      title="link to Another Page"&gt;  
      Another&lt;br /&gt;
      Page&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
    &lt;/div&gt;  
    &lt;div class="main"&gt;  
      &lt;p class="nav-links"&gt;  
      &lt;a href="index.html" title="link to Your Home page"&gt;  
 		 Your Home page  
      &lt;/a&gt; |   
      &lt;a href="someotherpage.html" title="link to Some Other Page"&gt;  
		 Some Other Page  
      &lt;/a&gt; |   
      &lt;a href="anotherpage1.html" title="link to Another Page"&gt;  
		 AnotherPage  
      &lt;/a&gt;&amp;nbsp;
      &lt;/p&gt; 
&lt;!-- target for the Main Text Link also &amp;nbsp; added to link above --&gt;
      &lt;a id="body"&gt;&lt;/a&gt;
&lt;!-- content for the site map --&gt;
      &lt;h2&gt;
        Site Map
      &lt;/h2&gt;
      &lt;ul class="sitemap"&gt;
        &lt;li class="pad"&gt;
          &lt;a href="index.html" 
          title="link to Home Page"&gt;
          Home Page&lt;/a&gt;&amp;nbsp;
            &lt;ul&gt;
              &lt;li class="pad"&gt;
                &lt;a href="http://www.extremetech.com/"   
      	       title="Link to ExtremeTech ezine."&gt;  
      	       ExtremeTech, our favorite ezine&lt;/a&gt; .
              &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="pad"&gt;
          &lt;a href="someotherpage.html" 
          title="link to Some Other Page"&gt;  
          Some Other Page&lt;/a&gt;&amp;nbsp;
        &lt;/li&gt;
        &lt;li class="pad"&gt;
          &lt;a href="anotherpage1.html" 
          title="link to Another Page"&gt;  
          Another Page&lt;/a&gt;&amp;nbsp;
        &lt;/li&gt;
      &lt;/ul&gt;
&lt;!-- link to site map as the last item on the page --&gt;
      &lt;p class="nav-links"&gt;
        &lt;a href="sitemap.html#body" title=
        "link to The Site Map"&gt;Link to The Site Map&lt;/a&gt; .
      &lt;/p&gt;
    &lt;/div&gt;  
&lt;!-- close tag for the main body division --&gt;
    &lt;/div&gt; 
   &lt;/body&gt; 
&lt;/html&gt;

&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"&gt;
  &lt;head&gt;
    &lt;title&gt;
      XHTML Tutorial Page
    &lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content=
    "text/html; charset=iso-8859-1" /&gt;
    &lt;link href="tutorial.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- add the XHTML for your page between the body tags. --&gt;
    &lt;!-- this is the division to hold the logo image and h1 text --&gt;
    &lt;div class="logo"&gt;
      &lt;p class="image"&gt;
      &lt;img width="250" height="50" src="logo.gif" alt=
      "&#91;gif image of a Test Image with swirly background&#93;" /&gt;
      &lt;/p&gt;
      &lt;!-- the h1 goes under the logo paragraph. --&gt;
      &lt;h1&gt;
      XHTML Tutorials
      &lt;/h1&gt;
    &lt;/div&gt;
    &lt;!-- the main-body division is used to keep the 
          left menu and the main divisions
          properly placed --&gt;
    &lt;div class="main-body"&gt;
&lt;!-- the left menu div is placed as the first section 
      in the main body division --&gt;
    &lt;div class="left-menu"&gt;  
      &lt;p class="menu-links"&gt; 
      &lt;a href="#body"  
      title="Jump to Main Text"&gt; 
      Main&lt;br /&gt; 
      Text&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt; 
      &lt;p class="menu-links"&gt;  
      &lt;a href="sitemap.html"
      title="link to the site map" &gt; 
      Site&lt;br /&gt;  
      Map&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
      &lt;p class="menu-links"&gt;  
      &lt;a href="someotherpage.html" 
      title="link to Some Other Page"&gt;  
      Some&lt;br /&gt;
      Other&lt;br /&gt;
      Page&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
      &lt;/div&gt;
    &lt;div class="main"&gt;  
      &lt;p class="nav-links"&gt;  
      &lt;a href="index.html" title="link to Your Home page"&gt;  
 		 Your Home page  
      &lt;/a&gt; |   
      &lt;a href="someotherpage.html" title="link to Some Other Page"&gt;  
		 Some Other Page  
      &lt;/a&gt; |   
      &lt;a href="anotherpage1.html" title="link to Another Page"&gt;  
		 AnotherPage  
      &lt;/a&gt;&amp;nbsp;
      &lt;/p&gt; 
&lt;!-- target for the Main Text Link also &amp;nbsp; added to link above --&gt;
      &lt;a id="body"&gt;&lt;/a&gt;
&lt;!-- text flowed around an image example  --&gt;       
      &lt;p class="left"&gt;
        &lt;img class="float-left" width="250" height="50" src=
        "logo.gif" alt=
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;
        Lorem ipsum dolor sit amet, consectetuer adipiscing
        elit, sed diam nonummy nibh euismod tincidunt ut
        laoreet dolore magna aliquam erat volutpat. Ut wisi
        enim ad minim veniam, quis nostrud exerci tation
        ullamcorper suscipit lobortis nisl ut aliquip ex ea
        commodo consequat. Duis autem vel eum iriure dolor in
        hendrerit in vulputate velit esse molestie consequat,
        vel illum dolore eu feugiat nulla facilisis at vero
        eros et accumsan et iusto odio dignissim qui blandit
        praesent luptatum zzril delenit augue duis dolore te
        feugait nulla facilisi. Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit, sed diam nonummy nibh
        euismod tincidunt ut laoreet dolore magna aliquam erat
        volutpat.
      &lt;/p&gt;
      &lt;p class="left"&gt;
        &lt;img class="float-right" width="250" height="50" src=
        "logo.gif" alt=
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;
        Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor
        in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis
        at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis
        dolore te feugait nulla facilisi.
      &lt;/p&gt;
      &lt;p class="left"&gt;
        Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat
        facer possim assum. Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit, sed diam nonummy nibh
        euismod tincidunt ut laoreet dolore magna aliquam erat
        volutpat. 
      &lt;img class="float-left" width="250" height=
        "50" src="logo.gif" alt=
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;
        Ut wisi enim ad minim veniam, quis nostrud exerci
        tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. 
      &lt;img class="float-right" width="250" height=
        "50" src="logo.gif" alt=
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;
        Duis autem vel eum iriure dolor
        in hendrerit in vulputate velit esse molestie
        consequat, vel illum dolore eu feugiat nulla facilisis.
      &lt;/p&gt;
      &lt;!-- link to site map as the last item on the page --&gt;
      &lt;p class="nav-links"&gt;
        &lt;a href="sitemap.html#body" title=
        "link to The Site Map"&gt;Link to The Site Map&lt;/a&gt; .
      &lt;/p&gt;
      &lt;/div&gt;
      &lt;!-- close tag for the main body division --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;  
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; 
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"&gt; 
&lt;head&gt; 
   &lt;title&gt; 
XHTML Tutorial Page 
   &lt;/title&gt; 
  &lt;meta http-equiv="Content-Type"  
  content="text/html; charset=iso-8859-1" /&gt; 
  &lt;link href="tutorial.css" rel="stylesheet" type="text/css" /&gt; 
&lt;/head&gt; 
   &lt;body&gt; 
&lt;!-- add the XHTML for your page between the body tags. --&gt; 
&lt;!-- this is the division to hold the logo image and h1 text --&gt;
    &lt;div class="logo"&gt;  
      &lt;p class="image"&gt;  
      &lt;img width="250" height="50" src="logo.gif" alt=  
        "&#91;gif image of a Test Image with swirly background&#93;" /&gt;   
      &lt;/p&gt;  
&lt;!-- the h1 goes under the logo paragraph. --&gt;
      &lt;h1&gt;  
      XHTML Tutorials  
      &lt;/h1&gt; 
    &lt;/div&gt; 
&lt;!-- the main-body division is used to keep the left 
      menu and the main divisions properly placed --&gt;
     &lt;div class="main-body"&gt;
&lt;!-- the left menu div is placed as the first section 
      in the main body division --&gt;
    &lt;div class="left-menu"&gt;  
      &lt;p class="menu-links"&gt; 
      &lt;a href="#body"  
      title="Jump to Main Text"&gt; 
      Main&lt;br /&gt; 
      Text&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt; 
      &lt;p class="menu-links"&gt;  
      &lt;a href="sitemap.html"
      title="link to the site map" &gt; 
      Site&lt;br /&gt;  
      Map&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
      &lt;p class="menu-links"&gt;  
      &lt;a href="someotherpage.html" 
      title="link to Some Other Page"&gt;  
      Some&lt;br /&gt;
      Other&lt;br /&gt;
      Page&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
      &lt;p class="menu-links"&gt;  
      &lt;a href="anotherpage1.html" 
      title="link to Another Page"&gt;  
      Another&lt;br /&gt;
      Page&lt;/a&gt;&amp;nbsp;
      &lt;/p&gt;  
    &lt;/div&gt;  
    &lt;div class="main"&gt;  
      &lt;p class="nav-links"&gt;  
      &lt;a href="index.html" title="link to Your Home page"&gt;  
 		 Your Home page  
      &lt;/a&gt; |   
      &lt;a href="someotherpage.html" title="link to Some Other Page"&gt;  
		 Some Other Page  
      &lt;/a&gt; |   
      &lt;a href="anotherpage1.html" title="link to Another Page"&gt;  
		 AnotherPage  
      &lt;/a&gt;&amp;nbsp;
      &lt;/p&gt; 
&lt;!-- target for the Main Text Link also &amp;nbsp; added to link above --&gt;
      &lt;a id="body"&gt;&lt;/a&gt;
&lt;!-- Examples of text decoration in line and using "span" --&gt;
      &lt;h2&gt;
        &lt;span class="red-black"&gt;
        Introduction to XHTML 1.1 with CSS2
        &lt;/span&gt;
      &lt;/h2&gt;
      &lt;p class="left"&gt;
        &lt;strong&gt;By setting up the margins correctly in the
        CSS,&lt;/strong&gt; you can &lt;em&gt;resize this page&lt;/em&gt; to
        whatever screen size you want, and it will remain 
        &lt;span class="black-yellow"&gt;readable without left right
        scrolling.&lt;/span&gt;
      &lt;/p&gt;
      &lt;p class="left"&gt;
        &lt;span class="white-red"&gt;The only limitation to the
        width&lt;/span&gt; is the width plus formatting on the
        largest image on the page.
      &lt;/p&gt;
      &lt;p class="left"&gt;
        &lt;strong&gt;&lt;em&gt;&lt;span class="black-yellow"&gt;Then, just by
        adding another paragraph structure, everything
        automatically falls into line.&lt;/span&gt;&lt;/em&gt;&lt;/strong&gt;
      &lt;/p&gt;  
&lt;!-- link to site map as the last item on the page --&gt;
      &lt;p class="nav-links"&gt;
        &lt;a href="sitemap.html#body" title=
        "link to The Site Map"&gt;Link to The Site Map&lt;/a&gt; .
      &lt;/p&gt;
    &lt;/div&gt;  
&lt;!-- close tag for the main body division --&gt;
    &lt;/div&gt; 
   &lt;/body&gt; 
&lt;/html&gt;