Summary Summary Today, you learned that Dynamic HTML is comprised of three technologies: HTML, style sheets, and scripting. Each one is important to DHTML and plays a distinct role. HTML provides the foundation for the web page. Style sheets enable you to format and position elements to suit your taste. Scripting makes DHTML dynamic. I explained how to use the DOM to manipulate elements on web pages, and some techniques for dealing with cross-browser issues. I also provided some specific examples that demonstrate how to use DHTML, including a page that includes a DHTML pull-down menu. I also explained how AJAX is used to update parts of a page that's being presented with data retrieved from the server. file:///G|/1/0672328860/ch15lev1sec6.html [19.12.2006 13:49:48] Workshop Workshop This workshop includes some questions you might have, a quiz about some of today's most important topics, and some exercises you can do to reinforce your knowledge of DHTML. Q&A Q Is DHTML really worth the time and effort? A DHTML is the key to web applications taking on the functionality of desktop applications. If you use applications such as Google Mail, Yahoo! Mail, or any of the online mapping services, you'll see DHTML used in many ways to make the applications more interactive than the typical web page. If you're working on an application that would benefit from giving the user instant feedback in the user interface, then learning DHTML is for you. If you're publishing a static website, you can probably skip it. Q There's so much information to learn. How do I do it? A First, start with HTML. Become an expert in it! After that, you could take either of two approaches: master everything or learn only what you need. The "master everything" approach leads you, in succession, from HTML to CSS, and then to JavaScript, moving on only when you're competent and comfortable with the technology at hand. After you master all three technologies, study how they interrelate and try your hand at DHTML. The "learn only what you need" approach gets you started more quickly. Find a specific technique that you want to use, such as dynamically changing the visibility of an object, and learn how to do that. After you finish, go on to the next technique that you find interesting. You'll learn a little bit about all the technologies along the way, but will have DHTML to show for it almost immediately. You might also want to find DHTML code on sites around the Web and see how it works. Although most code is protected by copyright, there's certainly nothing wrong with reviewing it and applying the concepts to your own work. Q What about Netscape's LAYER element and other browser-specific DHTML features? file:///G|/1/0672328860/ch15lev1sec7.html (1 von 3) [19.12.2006 13:49:49] Workshop A As far as I'm concerned, cross-browser DHTML is where it's at if you're going to bother with DHTML at all. If you want to reach the greatest number of people (and offend the fewest), you should concentrate on creating web pages that are (relatively) universal. I admit that these proprietary web browser features can be very tempting, and that some of the effects are pretty neat; however, there's nothing more frustrating than spending weeks developing a cool DHTML web page and finding out that most people can't even see it. Quiz 1. Which three technologies make Dynamic HTML possible? 2. What is a Document Object Model? 3. Can you use VBScript or another scripting language to create DHTML? 4. What's the most important element of cross-browser DHTML? 5. Which XmlHttpRequest ready state is the most important? Quiz Answers 1. HTML, cascading style sheets, and scripting. 2. DOM is the language you use when you refer to scriptable objects on a web page. 3. Yes, but you should know that VBScript isn't supported in Netscape Navigator without a special plug-in. Other scripting languages are even less supported. JavaScript is your best choice. 4. Undoubtedly, the capability detection. This enables you to support not only today's browsers, but also browsers that haven't been released yet. file:///G|/1/0672328860/ch15lev1sec7.html (2 von 3) [19.12.2006 13:49:49] Workshop 5. State 4 is the most important, because it indicates that the request is complete and the data returned by the request is ready for you to use on your web page. Exercises 1. Create a list and let users add items to it by entering them in a text field, and remove items from it by clicking on them. (You'll need to add an onclick handler to your list items.) 2. Create a <div> that only appears when you move the mouse over a particular element on a page. 3. Copy the pull-down menu example and add a second menu. file:///G|/1/0672328860/ch15lev1sec7.html (3 von 3) [19.12.2006 13:49:49] Lesson 16. Writing Good Web Pages: Do's and Don'ts Lesson 16. Writing Good Web Pages: Do's and Don'ts You won't learn about any HTML tags today, or how to convert files from one strange file format to another. You're mostly done with the HTML part of web page design. Next come the intangibles. These are the things that separate your pages from those of a designer who just knows the tags and flings text and graphics around and calls it a site. Armed with the information from the previous 15 days, you could put this book down now and go off and merrily create web pages to your heart's content. However, if you stick around, you can create better web pages. Do you need any more incentive to continue reading? In this Lesson Today's lesson includes hints for creating well-written and welldesigned web pages, and it highlights do's and don'ts concerning the following: ● How to decide whether to use standard XHTML 1.0 tags, a subset of HTML 4.01 tags that works with older browsers, style sheets, HTML extensions, or a combination of two or more ● How to write your web pages so that they can be easily scanned and read ● Issues concerning the design and layout of your web pages ● When and why you should create links ● How to use images effectively ● Other miscellaneous tidbits and hints file:///G|/1/0672328860/ch16.html [19.12.2006 13:49:49] Standards Compliance Standards Compliance 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: ● HTML 2.0 tags ● HTML 3.2 features such as tables, divisions, backgrounds, and color, which are supported by most, but not all, browsers ● HTML 4.01 and related features such as cascading style sheets, Dynamic HTML, and framesets ● XHTML 1.0, the enhancement to HTML 4.0 that makes HTML markup more uniform and makes it compatible with XML ● Plug-ins and other embedded objects, which use files and data that are external to the browser ● Browser-specific tags (from Netscape or Internet Explorer) that may or may not end up as part of the official HTML specification and whose support varies from browser to browser 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. file:///G|/1/0672328860/ch16lev1sec1.html (1 von 6) [19.12.2006 13:49:50] Standards Compliance 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 ● HTML 4.01 or XHTML 1.0 Transitional is geared toward the web developer who still uses deprecated tags rather than migrating to CSS. For example, if you want to write valid pages that include <font> tags, and attributes of the <body> tag like bgcolor or text, this is your best bet. ● HTML 4.01 or XHTML 1.0 Frameset is a strict specification that includes the frame-related tags. You should use this standard when you're writing framed pages. ● HTML 4.01 or XHTML 1.0 Strict is for people who don't have deprecated tags in their documents. This specification basically mandates that tags are used strictly for page structure, and that all of your look-and-feel modifications are accomplished using CSS. 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 file:///G|/1/0672328860/ch16lev1sec1.html (2 von 6) [19.12.2006 13:49:50] Standards Compliance 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. [View full size image] 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 file:///G|/1/0672328860/ch16lev1sec1.html (3 von 6) [19.12.2006 13:49:50] Standards Compliance 16.2. Figure 16.2. Error messages produced by the W3 validator. [View full size image] 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. [View full size image] file:///G|/1/0672328860/ch16lev1sec1.html (4 von 6) [19.12.2006 13:49:50] Standards Compliance 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. file:///G|/1/0672328860/ch16lev1sec1.html (5 von 6) [19.12.2006 13:49:50] . 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. 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. 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