Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
| In some ways, we're through the dark ages when it comes to cross-browser issues. The generation of browsers that includes Netscape Navigator 4 and Internet Explorer 4 probably marked the low point for web developers in terms of deciding how pages should be written. In the heat of the browser wars, Netscape and Microsoft were adding new features to their browsers hand over fist, with no regard for published standards. These features tended to be at odds with each other, and for web designers to create complex pages that worked in both popular browsers, they had to use some really awful techniques to make things look okay. Worse, the differences made things like CSS and JavaScript nearly useless. Even if you could get things to work properly, the work involved was immense. Since then, Netscape released the source code to its browser and the Mozilla foundation rewrote it to adhere as closely as possible to web standards. Internet Explorer has also been improving on the standards front with every release, although Internet Explorer 6 (the current version) still has some nagging bugs that web developers have to work around. Even so, when you look at the various generations of browsers that have been released, there are still some pitfalls that you might face. Every browser ever released is still being used by somebody; it's up to you to decide the degree to which you want to accommodate them. Here are some examples of the different generations of technology that are out there:
If you're finding all this information rather mind-boggling, you're not alone. Other authors and developers just like you are trying to sort out the mess and make decisions based on how they want their pages to look. Cascading style sheets and Dynamic HTML do give you more flexibility with layout and content in HTML 4.01 and XHTML 1.0. However, they're not supported (or worse, supported improperly) by many older browsers. These browsers are still used by only a small percentage of users, but many high-traffic sites still take them into account. Choosing a strategy for using HTML is one of the more significant design decisions you'll make as you start creating web pages. There are really three approaches you can take with your markup. You can refer to them as "least common denominator," "maximum compatibility," and "graceful degradation." None of the three makes a whole lot of sense just given the name, so I'll explain each of the three approaches. The least common denominator approach basically just involves using the tags and techniques that work everywhere. Rather than worrying about advanced approaches to control look and feel, use the simplest tags possible to convey your information. Taking this approach guarantees that your pages will look fine on old browsers, new browsers, handheld devices, and just about everything else. You won't win any design awards this way, but you'll succeed in communicating with your users. This approach makes sense when you're publishing basic documents to your Intranet or basic text information on the Web. When you're writing up those instructions on how to install a CD burner in a PC, this approach works great. Sticking with paragraphs, lists, links, and basic tables makes it easy to create your pages, and ensures that your pages are viewable by the widest possible audience. The maximum compatibility approach still dominates web design. The goal of this approach is to make sure that your design looks exactly the same for users regardless of the browser and platform that they're using. The design appears the same for Mac users with Netscape 4.5 or PC users with Internet Explorer 6at least that's the goal. Generally this approach involves the heavy use of tables for page layout, invisible singlepixel GIFs for spacing, and lots of other trickery that creates web pages with incredible numbers of tags and brittle layouts that are full of workarounds. This approach is finally starting to fade away, even for the most popular websites. They may use some of the older techniques, but they're moving to more CSS-oriented approaches. The last approach I'll discuss is the graceful degradation approach. It sounds bad, but in fact, it's really nice if you're a web designer. The idea here is that you use basic tags that work with just about any web browser, and you use Cascading Style Sheets to manage the look and feel of your page. Anyone using a modern web browser that offers good support for CSS will see your page in all its splendor, whereas people using older browsers will see a simple page that, although it lacks advanced formatting, at least doesn't look broken. The advantage for you as the web designer is that your pages can be written simply and cleanly without lots of browser-specific workarounds. The downside of this approach is that users with older browsers are treated as lesser citizens by your site. Fortunately, not many people are using older browsers these days, and that number is growing smaller all the time. Tip The graceful degradation approach actually makes a nice complement to the least common denominator approach. Once you've designed your pages using the least common denominator approach, you can modify their appearance using Cascading Style Sheets. That way the pages will look fine in older browsers and will take on the improved appearance you specify in browsers that support CSS.
In light of these different approaches to writing HTML, let's look at the current HTML standards. The HTML 4.01 and XHTML 1.0 definitions include three flavors of HTML, and the main differences between HTML 4.01 and XHTML 1.0 have been noted throughout this book. The three flavors are
Throughout this book, I've explained which tags are part of HTML 4.01 and XHTML 1.0 and which tags are available in which major browsers. For each tag, I've also noted the alternatives you can use if a browser can't view that tag. With this information in hand, you should be able to experiment with each tag in different browsers to see the effect on your design. Regardless of the strategy you use for creating content, the key to making sure everything works is to test it as widely as possible. If you're concerned about how your page looks in Netscape 4.7 on a Macintosh, you'll need to test it in Netscape 4.7 on the Macintosh. After a while, you'll get the feel for how things are going to look, but at first you'll need to test exhaustively. Even after you've been at it for a while, more testing never hurts. Regardless of whether you go with the least common denominator approach, the graceful degradation approach, or the maximum compatibility approach, you should test your pages broadly to ensure that your users won't have problems. You may have a favorite browser, but as a web designer, you can't afford to ignore the others that aren't your favorites. Validating Your Pages
It's all well and good to attempt to write valid pages, but how do you know whether you've succeeded? It's easy enough to determine whether your pages look okay in your browser, but verifying that they're valid is another matter. Fortunately, the W3C, which is responsible for managing the HTML recommendations, also provides a service to validate your pages. It's a web application that enables you to upload an HTML file or to validate a specific URL to any W3C recommendation. The URL is http://validator.w3.org/. Figure 16.1 is a screenshot of the validator in action. I've sent it off to validate http://www.samspublishing.com/. The first problem I ran into was that the character set and doctype were not set, so I had to specify them myself. Once I did that, the validator determined how compliant the page was with the standard specified by the DOCTYPE identifier on the target page. Figure 16.1. The W3 validator.
If you look closely at the screenshot, you can see that at the time I validated this page, it came out with 26 errors, all of which are violations of the XHTML 1.0 Transitional recommendation. The page looks fine in the popular browsers, but it's not really in sync with the recommendation. The errors generally fall into two categories: missing closing tags (usually for the <img> tag) and missing required attributes (mainly the alt attribute for <img> tags). Some of the errors found on the page can be seen in Figure 16.2. Figure 16.2. Error messages produced by the W3 validator.
In the screenshot, you'll see that each error is accompanied by the subset of the page's source where the error appears and a link to an explanation of why it's an error at all. If you do get all the errors on your page fixed, you'll be privileged enough to see the message indicating that your page is valid, as shown in Figure 16.3. Figure 16.3. The W3 validator acknowledges a job well done.
HTML Tidy
If you have some existing pages and you're not up for the challenge of turning them into valid HTML yourself, there's a program that will not only validate your pages, but also correct them as best as it can. This program, HTML Tidy, was originally written by a staffer at the W3C named David Raggett, and has since been handed over to the community for maintenance. You can obtain it at http://tidy.sourceforge.net/. Tidy accepts a number of command-line options that enable you to indicate how you want your page to be validated and modified. For example, if you want to convert your pages to XHTML, you can call it like this: tidy -asxhtml myfile.html
Tidy will strip out all the deprecated <font> tags in your document, along with other tags that can be replaced by CSS properties if you pass it the -clean option, like this: tidy -clean myfile.html Once you've run Tidy on your files, they may still need some cleaning up, but Tidy will fix all the obvious errors. |
Категории