True Web Power: XHTML with CSS2

The goal of this first tutorial on XHTML 1.1 (EXtensible HyperText Markup Language) and CSS2 (Cascading Style Sheets, level 2) is to allow anyone using notepad, or any other text editor, to be able to build a simple web page in XHTML 1.1 that validates according to the World Wide Web Consortium (W3C) Validation Service, http://validator.w3.org, and CSS2 that validates according to the W3C CSS Validation Service, http://jigsaw.w3.org/css-validator/validator-uri.html. This initial lesson will be split into two parts, published separately, and will provide all the basics. First, we'll provide you with some basic information, and we suggest you take a look at many of the links provided to become better prepared for the second segment. Beyond these introductory sessions, in future tutorials, we'll present more advanced design elements.

Basic Definitions and History When reading the following list of W3C specs and documents, note that a Recommendation is work that represents consensus within W3C and has the Director's stamp of approval. W3C considers that the ideas or technology specified by a Recommendation are appropriate for widespread deployment and promote W3C's mission.

We present specs below in chronological order.

Cascading Style Sheets (CSS1) Level 1 Specification - http://www.w3.org/TR/REC-CSS1/ Original – 17 December 1996 – Revised 11 January 1999, Håkon W. Lie, Bert Bos

This specification is a revision of the Cascading Style Sheets, level 1 Recommendation published on 17 December 1996 - http://www.w3.org/TR/REC-CSS1-961217 .

CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writeable, and expresses style in common desktop publishing terminology.

One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps.

Cascading Style Sheets, level 2 (CSS2) Specification - http://www.w3.org/TR/REC-CSS2/ 12 May 1998, Bert Bos, Håkon Wium Lie, Chris Lilley, Ian Jacobs

CSS2 builds on CSS1 and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface.

HTML 4.01 Specification - http://www.w3.org/TR/html401 24 December 1999, Dave Raggett, Arnaud Le Hors, Ian Jacobs

This specification is the latest version of HTML 4. It supersedes the HTML 4.0 Recommendation first published as HTML 4.0 on 18 December 1997 - http://www.w3.org/TR/REC-html40-971218/ and revised as HTML 4.0 on 24 April 1998 - http://www.w3.org/TR/1998/REC-html40-19980424/, since it includes fixes for minor errors in the basic implementation.

XHTML(tm) 1.0: The Extensible HyperText Markup Language--A Reformulation of HTML 4 in XML 1.0 - http://www.w3.org/TR/xhtml1/ 26 January 2000, Steven Pemberton et al.

XHTML 1.0 was the W3C's first recommendation for XHTML, which is a reformulation of HTML 4.01 in XML (Extensible Markup Language). It combines the flexibility and strength of HTML 4.01 with the power of XML. It is the first implementation that is geared to producing web pages that will render on such browser platforms as cell phones, televisions, cars, wallet sized wireless communicators, kiosks, desktops, etc. -- in addition to the familiar graphical & textual Browsers, screen readers, and other types of assistive technologies.

XHTML(tm) Basic - http://www.w3.org/TR/xhtml-basic/ 19 December 2000, Mark Baker, Masayasu Ishikawa, Shinichi Matsui, Peter Stark, Ted Wugofski, Toshihiko Yamakami

XHTML Basic is the second W3C XHTML implementation that is designed for browsers specifically designed for mobile phones, PDAs, pagers, and settop boxes, (i.e. Web TV)-- and where the full XHTML 1.0 implementation is not required.

Also note the following versions of XHTML 1.0 that have been defined.

XHTML 1.0 Strict--requires absolutely clean structural markup, free of any tags associated with layout or deprecated tags. It should be used in conjunction with Cascading Style Sheets (CSS) to produce desired fonts, color, image placement and other layout parameters.

XHTML 1.0 Transitional--The most useful flavor for general use in that the power and flexibility of XHTML 1.0 can be combined with existing Valid HTML 4.01 code.

XHTML 1.0 Frameset--Provides for using HTML Frame constructs to partition the browser window into two or more frames. (Not recommended, please get away from using frames- frames have many accessibility issues).

XHTML(tm) 1.1 - Module-based XHTML - http://www.w3.org/TR/xhtml11/ 31 May 2001, Murray Altheim, Shane McCarron

XHTML 1.1 - Module-based XHTML is the latest XHTML implementation that is a reformulation of XHTML 1.0 Strict standard using XHTML Modules. It utilizes transportable author defined modules including DOCTYPE/DTD constructs.

The W3C has also provided design requirements for XHTML.

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

The full XHTML and CSS2 code is listed at the bottom of this story.

You should copy this code into any text editor, save the XHTML as index.html, and the CSS2 as tutorial.css. The index.html page will display if opened in a browser, either from your hard drive, or the WWW.

Even if you've never looked at HTML, learning basic XHTML is relatively simple-- it is very well-defined in terms of what you can and cannot do. If you already know valid HTML 4.01, the jump to XHTML simply involves learning some new rules, and understanding features that are no longer supported.

The interesting points of building a page like the one shown above, is that it can be displayed at any width and will adjust – see the version below which automatically resizes and uses scroll bars:

Or if the client computer wants to ignore the CSS:

Or users may want images turned off so the page would display as follows:

By designing web pages in accordance with the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG), the information available on the WWW can become available to anyone, anyplace, and on any piece of equipment. It's time to jump into the code. We assume you've copied the code into your favorite text editor as mentioned earlier, and saved the XHTML code as index.html. You should save the index.html file wherever you want in your file structure-- e.g.: C:/temp/et/index.html. Naming the home page index.html ensures that someone entering your site will get to your home page-- this is what browsers look for first. Alternatively, you may want to enter the code line-by-line, and you can build your index.html file incrementally.

The first line is the XML Declaration-- all the code lines begin with "".

<?xml version="1.0" encoding="ISO-8859-1"?>

The ISO-8859-1 character set (also referred to as "Latin-1"), is usable for most Western European languages, and works well on all browsers, but other character sets can be used, see this link for details on usable characters.

The second line is the Document Type Declaration

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

This is the DTD we will be working with in this tutorial, and is the one used for XHTML 1.1. In XHTML 1.1, there is only the Strict version, and no frames or deprecated code. Style is defined in CSS. This sets the level of compliancy with W3C recommendations, in accordance with http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd. The only place that upper case letters are used in the code is in these declarations-- all the rest is lower case.

The html tag starts and ends the html section of the page.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

The last line in the code for entire Web Page will be the html end tag.

</html>

There are no "Open Tags" in XHTML, and this will be explained as we proceed - e.g.: <br> for line break is <br /> in XHTML.

Also any start tag needs an end tag - e.g.: <p> needs </p>. In XHTML, commenting is in the format:

<!-- These are comments to help you to remember how or why you did something in XHTML, 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 XHTML.

The first line in the head is:

<head>

The last line will be:

</head>

In-between can be a large variety of meta tags to inform search robots, RDF schema, and link statements, and is beyond the scope of this article, so we will use the basics. For more information see- http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.4.

First, the title:

<title> XHTML Tutorial Page </title>

This is what browsers will display at the top of the window, and helps identify the page as a unique page.

Next we add the meta tags-- notice in XHTML we have to use the / to close the tag, also anything after the = are encased in quote marks:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Then the link for the CSS:

<link href="tutorial.css" rel="stylesheet" type="text/css" />

The body is defined between and and is placed under the head section.

<body>

And let's add a comment for the body area:

<!-- add the XHTML for your page between the body tags. -->

The last line of the body will be:

</body>

So at this point in the tutorial.htm web page we have:

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

 </body>
</html>

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

We'll stop here for now and pick up in a few days with the second introductory segment that will cover Basic CSS, some more XHTML, and validators.

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