Deciding on an HTML 4.01 or XHTML 1.0 Approach | Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)

First, let me explain the difference between HTML 4.01 and XHTML 1.0. The HTML specification dictates which HTML tags are valid. XHTML describes how to write HTML so that it conforms to the XML specification. When you want to know whether a particular tag or attribute is valid, check out the HTML specification. When you want to know how to close a tag that has no closing tag, such as <br>, consult with the XHTML spec. In earlier lessons, you learned about the various flavors of HTML 4.01 and XHTML 1.0 and how each of them is geared toward users of older or newer browsers:

HTML 4.01 or XHTML 1.0 Transitional For those who want to provide support for older browsers
HTML 4.01 or XHTML 1.0 Frameset For sites that want to use frames in a standards-compliant manner
HTML 4.01 or XHTML 1.0 Strict For those who want to develop pages that strictly adhere to the HTML 4.0 or XHTML 1.0 specification by not using deprecated elements or attributes

HTML 4.01 and XHTML 1.0 Transitional

If you expect your visitors to use a wide variety of different browsers, it's probably to your advantage to design your web pages around the HTML 4.01 or XHTML 1.0 Transitional specification. By doing so, you provide backward compatibility with older browsers. The Transitional specification provides the flexibility to use tags that are deprecated in the strict HTML 4.01 specification. Therefore, you can use presentation attributes that were introduced in HTML 3.2, such as the center or align attribute for alignment or bgcolor and color attributes for background and foreground colors.

For example, look at the Halloween House of Terror page that you created in Lesson 7, "Adding Images, Color, and Backgrounds." Here, the page has undergone yet another facelift, as shown in the following code. This page uses HTML 3.2-compatible tags to display the page. Fonts, colors, and alignment are formatted with tags that have been deprecated in the Strict specification.

The deprecated tags and attributes are shown in italics in the following code example. In addition, a table is used to create a staggered layout of links, descriptions, and images on the page.

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>Welcome to the Halloween House of Terror</title> </head> <body bgcolor="#ff9933" link="#990000"> <h1 align="center">   <font face="Arial, sans-serif">   The Halloween House of Terror!!</font></h1> <div align="center">   <p>    <img src="/books/2/631/1/html/2/skel05.gif" alt="skel05.gif" width="140" height="100" />    <img src="/books/2/631/1/html/2/skel07.gif" alt="skel07.gif" width="140" height="100" />    <img src="/books/2/631/1/html/2/skel06.gif" alt="skel06.gif" width="140" height="100" />   </p> </div> <hr /> <p>   <font face="Arial, sans-serif">    Voted the most frightening haunted house three years in a row, the    <font color="#cc0000"><b>Halloween House of Terror</b></font>    provides the ultimate in Halloween thrills. Over 20 rooms of thrills and    excitement to make your blood run cold and your    hair stand on end!   </font> </p> <hr /> <p><font face="Arial, sans-serif">    Don't take our word for it .. preview some images of what awaits!   </font> </p> <div  align="center">  <table border="0" width="75%" cellspacing="5" cellpadding="5">   <tr>      <td width="30%">       <font face="Arial, sans-serif">       <img src="/books/2/631/1/html/2/skel01.gif" alt="skel01.gif" width="140" height="100" />       </font>      </td>    <td width="40%" bgcolor="#CC0000"> <font face="Arial, sans-serif">     Watch out for Esmerelda. You never know what she has in her cauldron.     </font> </td>    <th width="30%" bgcolor="#FF6600"> <b><font face="Arial, sans-serif">     <a href="entry.gif">The Entry Way</a></font></b> </th>    </tr>    <tr>    <th width="30%" bgcolor="#FF6600"> <b><font face="Arial, sans-serif">     <a href="bedroom.gif">The Master Bedroom</a> </font></b> </th>    <td width="40%" bgcolor="#CC0000"> <font face="Arial, sans-serif">     Don't open the closet door, whatever you do!</font></td>      <td width="30%">        <font face="Arial, sans-serif">        <img src="/books/2/631/1/html/2/skel02.gif" alt="skel02.gif" width="140" height="100" />        </font>      </td>    </tr>    <tr>    <td width="30%">        <font face="Arial, sans-serif">        <img src="/books/2/631/1/html/2/skel03.gif" alt="skel03.gif" width="140" height="100" />        </font></td>    <td width="40%" bgcolor="#CC0000"> <font face="Arial, sans-serif">     More than a few innocents have been cast in chains for eons. They just     aren't the same anymore. </font></td>    <th width="30%" bgcolor="#FF6600"><b> <font face="Arial, sans-serif">     <a href="galley.gif"> The Galley</a></font></b></th>    </tr>    <tr>    <th width="30%" bgcolor="#FF6600"> <b><font face="Arial, sans-serif">     <a href="dungeon.gif"> The Dungeon</a> </font> </b></th>    <td width="40%" bgcolor="#CC0000"> <font face="Arial, sans-serif">     Better listen to the tour guides, or you'll get lost! </font> </td>      <td width="30%">      <font face="Arial, sans-serif">      <img src="/books/2/631/1/html/2/skel04.gif" alt="skel04.gif" width="140" height="100" />      </font></td>    </tr>   </table> </div> <hr /> <p><font face="Arial, sans-serif"> The   <font color="#cc0000">Halloween House of Terror</font>   is open from October 20 to November 1st, with a gala celebration   on Halloween night. Our hours are: </font></p> <ul>   <li>    <font face="Arial, sans-serif">    Mon-Fri 5PM-midnight</font>   </li>   <li>    <font face="Arial, sans-serif">    Sat & Sun 5PM-3AM</font>   </li>   <li>     <font face="Arial, sans-serif">    Halloween Night (31-Oct): 3PM-???</font></li> </ul> <p align="center"> <font face="Arial, sans-serif"> The   <font color="#cc0000">Halloween House of Terror</font>   is located at:<br />   The Old Waterfall Shopping Center<br />   1020 Mirabella Ave<br />   Springfield, CA 94532 </font></p> </body> </html>

Figure 17.2 shows the result of the preceding code as it's displayed in a browser.

Output

Figure 17.2. An example of HTML 4.01 Transitional code.

HTML 4.01 and XHTML 1.0 Frameset

If your site uses frames and you want to adhere to standards, the specification of choice is HTML 4.01 or XHTML 1.0 Frameset. It includes all the tags and attributes that are "legal" in the HTML 4.01 or XHTML 1.0 Transitional specification. In addition, you can use all tags and attributes that pertain to framesets and frames.

The key to good frameset design is to create as few frames as possible, while making the navigation system easy to understand. The hard decision, however, is which resolution to use for your frameset, because the browser is divided into multiple sections. The more frames you create in the frameset, the smaller each page will be in each frame.

In Figure 17.3, the Halloween House of Terror web page has been converted to a frameset. The main frame displays exactly the same page you saw in Figure 17.2, but the links in the left frame take the visitor to the pictures and descriptions of each room in the haunted house. When you add the links in the left frame, the visitor no longer has to use his Browse button to take a small virtual tour through the haunted house. This simplifies the navigation greatly.

Figure 17.3. An example of HTML 4.01 Frameset code.

The code for the frameset divides the browser window into two frames: left and right. The navigation.html page loads into the left frame, and the main page (main.html) loads into the right frame. The code for the frameset looks like the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/frameset.dtd"> <html> <head> <title>Halloween House of Terror Frameset</title> </head> <frameset cols="170,*">  <frame name="left" src="/books/2/631/1/html/2/navigation.html" />  <frame name="right" src="/books/2/631/1/html/2/main.html" />  <noframes>  <body>  <p> .. insert noframes content here .. </p>  </body>  </noframes> </frameset> </html>

The code for the left frame in the frameset (navigation.html) displays each page in the right frame when the user selects one of the image links (as defined by the <target="right"> tag). Each image link displays alternative text when the user hovers his mouse over the button or when images are turned off in the browser. The code for the left frame looks like the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd"> <html> <head> <title>The Halloween House of Terror</title> <base target="right" /> </head> <body bgcolor="#ff9933" text="#000000"> <p><font face="Arial"> The Halloween<br /> House of<br /> Terror</font></p> <p><a href="main.html" target="right">   <img src="/books/2/631/1/html/2/button01.gif" alt="Home" width="125" height="50" />   </a></p> <p><a href="entry.html" target="right">   <img src="/books/2/631/1/html/2/button02.gif" alt="The Entry Way" width="125" height="50" />   </a></p> <p><a href="bedroom.html" target="right">   <img src="/books/2/631/1/html/2/button03.gif" alt="The Master Bedroom" width="125" height="50" />   </a></p> <p><a href="galley.html" target="right">   <img src="/books/2/631/1/html/2/button04.gif" alt="The Galley" width="125" height="50" />   </a></p> <p><a href="dungeon.html" target="right">   <img src="/books/2/631/1/html/2/button05.gif" alt="The Dungeon" width="125" height="50" />   </a></p> <p><a href="location.html" target="right">   <img src="/books/2/631/1/html/2/button06.gif" alt="Hours and Location" width="125" height="50" />   </a></p> </body> </html>

HTML 4.01 and XHTML 1.0 Strict

The Transitional and Frameset specifications enable you to provide support for Netscape Navigator 4.0 or Microsoft Internet Explorer 4.0, and older browsers. The HTML 4.01 or XHTML 1.0 Strict specification, however, is designed for people who want to abandon the idea of making pages look the same in old browsers as they do in new ones in favor of using modern layout techniques, such as building page layout using CSS exclusively. To comply with the HTML 4.01 or XHTML 1.0 Strict specification, you must avoid using any HTML tags and attributes that are marked as deprecated. Instead, use cascading style sheets in place of the deprecated tags.

If you're willing to abandon the idea of presenting your page identically to all users, there are several advantages to using the HTML 4.01 or XHTML 1.0 Strict specification. As you learned in Lesson 9, "Creating Layouts with CSS," CSS technology gives you greater control over page layout and appearance. In many ways, you can lay out your pages as if you were using a page layout or word processing program. Another advantage is that cascading style sheets level 2, or CSS2 for short, incorporates additional features for nonvisual browsers. This means that you can design pages for people who are visually impaired or have other special needs.

The following code example illustrates how you can implement the page shown in Figure 17.2 into the XHTML 1.0 Strict specification. In this example, the Halloween House of Terror uses embedded style sheet properties and values to format the text and images on the page. The colors for the text, links, and table cells are defined in the style section at the beginning of the page. Margins are added to the top, bottom, left, and right of the page. Also, rather than using standard bullets, the bulleted list at the bottom of the page displays image bullets as defined by the style sheet.

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd"> <html> <head> <title>Welcome to the Halloween House of Terror</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> body { background-color: #ff9933;      color: #000000;      font-family: Arial, sans-serif;      font-size: 12pt;      margin-left: 20px;      margin-right: 20px;      margin-top: 10px;      margin-bottom: 10px } a:link{ color: #990000 } a:visited{ color: #CC00CC } a:active{ color: #CC0000 } h1{ font-family: Arial, sans-serif;     font-size: 24pt } table { text-align: center } th { background-color: #ff6600;    color: #000000;    font-family: Arial, sans-serif;    font-size: 12pt;    font-weight: bold } td { color: #000000;    font-family: Arial, sans-serif;    font-size: 12pt } td.red { background-color: #cc0000 } ul { list-style-image: url("bullet.gif") } .bloodred { color:#CC0000 } .bloodredbold { color: #CC0000; font-weight: bold } .center { text-align: center } </style> </head> <body> <h1 >The Halloween House of Terror!!</h1> <div > <dl> <dd> <img src="/books/2/631/1/html/2/skel05.gif" alt="skel05.gif" width="140" height="100" /> <img src="/books/2/631/1/html/2/skel07.gif" alt="skel07.gif" width="140" height="100" /> <img src="/books/2/631/1/html/2/skel06.gif" alt="skel06.gif" width="140" height="100" /> </dd> </dl> </div> <hr /> <p>Voted the most frightening haunted house three years in a row, the <span >Halloween House of Terror</span> provides the ultimate in Halloween thrills. Over 20 rooms of thrills and excitement to make your blood run cold and your hair stand on end!</p> <hr /> <p>Don't take our word for it .. preview some images of what awaits!</p> <table border="0" summary="House of Terror" width="75%" cellspacing="5"      cellpadding="5"> <tr> <td> <img src="/books/2/631/1/html/2/skel01.gif" alt="skel01.gif" width="140" height="100" /> </td> <td >Watch out for Esmerelda. You never know what she has in her cauldron.</td> <th><a href="code/entry.gif">The Entry Way</a></th> </tr> <tr> <th><a href="code/bedroom.gif">The Master Bedroom</a></th> <td >Don't open the closet door, whatever you do!</td>   <td>   <img src="/books/2/631/1/html/2/skel02.gif" alt="skel02.gif" width="140" height="100" /></td> </tr> <tr>   <td><img src="/books/2/631/1/html/2/skel03.gif" alt="skel03.gif" width="140" height="100" /></td> <td >More than a few innocents have been cast in chains for eons. They just aren't the same anymore.</td> <th><a href="code/galley.gif">The Galley</a></th> </tr> <tr> <th><a href="code/dungeon.gif">The Dungeon</a></th> <td >Better listen to the tour guides, or you'll get lost!</td>   <td><img src="/books/2/631/1/html/2/skel04.gif" alt="skel04.gif" width="140" height="100" /></td> </tr> </table> <hr /> <p>The <span >Halloween House of Terror</span> is open from October 20 to November 1st, with a gala celebration on Halloween night. Our hours are:</p> <ul> <li>Mon-Fri 5PM-midnight</li> <li>Sat & Sun 5PM-3AM</li> <li>Halloween Night (31-Oct): 3PM-???</li> </ul> <p >The <span >Halloween House of Terror</span> is located at:<br /> The Old Waterfall Shopping Center<br /> 1020 Mirabella Ave<br /> Springfield, CA 94532</p> </body> </html>

Figure 17.4 shows the result of the preceding code in a browser.

Output

Figure 17.4. An example of XHTML 1.0 Strict code.