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
Trang 1Today, 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
Trang 2Workshop
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
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
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
features?
file:///G|/1/0672328860/ch15lev1sec7.html (1 von 3) [19.12.2006 13:49:49]
Trang 3A 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
Trang 45. 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]
Trang 5Lesson 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
Trang 6Standards 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]
Trang 7When 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
Trang 8Standards 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]
Trang 9Figure 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]
Trang 10Standards 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]