- Benefits of Transitional Methods Used in These Chapters
- Basic Approach (Overview)
- First Pass Markup: Same as Last Pass Markup
This chapter is from the book
This chapter is from the book
This chapter is from the book
First Pass Markup: Same as Last Pass Markup
On this and the next few pages, you'll find our first pass at the site's markup from <body> to </body>. It is also our final pass at the site's markup. Any subsequent design adjustments were handled entirely in CSS. That is one benefit of offloading as much presentational stuff as possible to your style sheets, even in a hybrid layout like this one. To save space in this book, we've replaced the lovely body copy used in the template with generic placeholder text.
Note, too, that in this markup we've used relative image file reference links (img src="images/logo.gif") instead of absolute ones (img src= "/images/logo.gif") because we're working off our desktop instead of on the staging server. The final markup will use absolute file reference links. (Absolute URLs are more reliable than relative URLs because they don't break if file locations change; for instance, if /events.html moves to /events/ index.html, the absolute reference to /images/logo.gif will still work. Also, absolute URLs help avoid a CSS bug in some old browsers that misunderstand relative file references in style sheets.)
Technically speaking, the "final" markup differs slightly from the first pass markup by replacing relative file references with absolute file references. Not that most of you care, but there is always one reader who views page source to verify claims made in a book.
You might find it easier to view source at the source. As mentioned earlier in this chapter, the project is archived at http://i3.happycog.com/.
Navigational Markup: The First Table
What follows is the navigation section, from the body element on. To keep things interesting, we'll tell you in advance that this portion of the markup, although it validates, commits a "sin" of nonpresentational markup purity. See if you can spot the sin.
<body bgcolor="#ffffff"> <div class="hide"><a href="#content" title="Skip navigation." accesskey="2">Skip navigation</a>.</div> <table id="nav" summary="Navigation elements" width="600" border="0" align="center"
cellpadding="0" cellspacing="0"> <tr> <td rowspan="3" id="home" width="400"><a href="/" title="i3Forum home page.">
<img src="images/logo.gif" width="400" height="75" border=""0" alt="i3forum home" /></a></td> <td width=""100" height="25" id="events"><a href=""events.html">Events</a></td> <td width="100" height="25" id="schedule"><a href="schedule.html">Schedule</a></td> </tr> <tr id="nav2"> <td width="100" height="25" id="about"><a href="about.html">About</a></td> <td width="100" height="25" id="details"><a href="details.html">Details</a></td> </tr> <tr id="nav3"> <td width="100" height="25" id="contact"><a href="contact.html">Contact</a></td> <td width="100" height="25" id="guestbios"><a href= "guestbios.html">Guest Bios</a></td> </tr> </table>
Presentation, Semantics, Purity, and Sin
How big a standards geek are you? Did you spot the worst sin in our XHTML? The primary offense took place in the first line—namely the use of the outdated bgcolor (background color) attribute to the body element to specify, even in non-CSS browsers, that the page's background color should be white (#ffffff). Here it is again:
<body bgcolor="#ffffff">
Writing old-school markup like that could get us thrown out of the Pure Standards Academy faster than a greased meteor. After all, CSS lets us specify the body background color, and the W3C recommends that CSS, not HTML or XHTML, be used for this purpose. In the eyes of many standards fans, our use of bgcolor is a sin.
A Transitional Book for a Transitional Time
To the kind of standards geek who spends hours each week arguing about the evils of presentational markup on W3C mailing lists, what we've done here is evil and harmful. For that matter, we've also sinned by using tables as anything other than containers of tabular data, by specifying widths and heights in our table cells and by setting image margins to zero in markup. In fact, in the eyes of some, this entire chapter is sinful. Some standards geeks might not think much of this book, quite frankly. In their view, we should be telling you how to write semantic markup instead of letting you think it's okay to sometimes use tables for layout.
But the thing is, it is okay. Maybe it won't be okay some years from now, when designers use and browsers support purely semantic future versions of XHTML and rich future versions of CSS and SVG. But this is a transitional book for a transitional time. "Web standards" is not a set of immutable laws, but a path filled with options and decisions. In our view, people who insist on absolute purity in today's browser and standards environment do as much harm to the mainstream adoption of web standards as those who have never heard of or are downright hostile toward structural markup and CSS.
Making Allowances for Old Browsers
Why did we use the scarlet bgcolor attribute in spite of its shameful wickedness? The hybrid site we're producing makes no assumptions about the browsers used by its visitors. In an old, non-CSS-capable browser, if the default background color were set to any color other than white, the site's transparent GIF logo image would be afflicted by nonangelic halos caused by mismatched edge pixels. No client wants his logo to look shoddy in any browser, even if the rest of the site is just so-so in some old browsers.
One popular old browser that did not support CSS set medium gray as its default background color. Our logo is not antialiased against medium gray but against white. If we hadn't set the background color via the XHTML bgcolor attribute, our logo would look bad in such browsing environments.
In reality, you might not care what your site looks like in a 2.0 or 3.0 browser. For that matter, you might not care what it looks like in a 4.0 browser—neither might your boss or your client. The semantically impure techniques used in this chapter do not attempt to create the same visual experience in all browsers. In a non-CSS browser, our layout will not look any better than what you see in Figure 8.3. And that's okay.
){kind=link}
We used tables for this site and included bgcolor to show you that such compromises can be made in XHTML 1.0 Transitional and the site will still validate. We also did this to suggest that any effort to include standards in your work—even a compromised (but realistic) effort that uses some presentational markup—is worth making.
Content Markup: The Second Table
The "content" table immediately follows the navigational one and should be self explanatory to anyone who's ever written HTML or XHTML. The two things worth noting are the compactness of this markup and its use of id:
<table id="content" summary="Main content." width="600" border="0" align="center" cellpadding="0"
cellspacing="0"> <tr> <td width="200" id="sidebar" valign="top"> <img src="images/astro.jpg" width="200" height="200" border="0" alt="i3Forum. Breeding leadership."
title="i3Forum. Breeding leadership." /> <h2>Subhead</h2> <p>Text</p> </td> <td width="400" id="primarycontent"> <h1>Headline</h1> <p>Copy.</p> <p>Copy.</p> <p>Copy.</p> <p>Copy.</p> <div id="footer"> <p>Copyright © 2003 <a href="/" title="i3forum home page.">i3Forum</a>, Inc.</p> </div> </td> </tr> </table> </body>
In Chapter 9, we'll explore CSS basics. Then, in Chapter 10, we'll use CSS to add visual control and panache to our hybrid site.