Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • Tell Us What You Think!
  • Put Your HTML Page Online Today
  • I. Your First Web Page
  • Hour 1. Understanding HTML and XML
  • Hour 2. Create a Web Page Right Now
  • Hour 3. Linking to Other Web Pages
  • Hour 4. Publishing Your HTML Pages
  • II. Web Page Text
  • Hour 5. Text Alignment and Lists
  • Hour 6. Text Formatting and Font Control
  • Hour 7. Email Links and Links Within a Page
  • Hour 8. Creating HTML Forms
  • III. Web Page Graphics
  • Hour 9. Creating Your Own Web Page Graphics
  • Hour 10. Putting Graphics on a Web Page
  • Hour 11. Custom Backgrounds and Colors
  • Hour 12. Creating Animated Graphics
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
  • Hour 14. Graphical Links and Imagemaps
  • Hour 15. Advanced Layout with Tables
  • Hour 16. Using Style Sheets
  • V. Dynamic Web Pages
  • Hour 17. Embedding Multimedia in Web Pages
  • Hour 18. Interactive Pages with Applets and ActiveX
  • Hour 19. Web Page Scripting for Non-Programmers
  • Hour 20. Setting Pages in Motion with Dynamic HTML
    • Learning How to Fly
    • Dividing a Web Page into Layers
    • Offering Alternate Content in Plain HTML
    • Being Compatible with Incompatible Browsers
    • Moving a Layer Around with JavaScript
    • Interactive Layer Animation
    • Summary
    • Q&A
    • Workshop
  • VI. Building a Web Site
  • Hour 21. Multipage Layout with Frames
  • Hour 22. Organizing and Managing a Web Site
  • Hour 23. Helping People Find Your Web Pages
  • Hour 24. Planning for the Future of HTML
  • VII. Appendixes
  • A. Readers' Most Frequently Asked Questions
  • B. HTML Learning Resources on the Internet
  • C. Complete HTML 4 Quick Reference
  • D. HTML Character Entities

Offering Alternate Content in Plain HTML

There's one more <div> layer in Figure 20.3 that I haven't mentioned yet. The code for it looks like the following:

<div style="position: absolute;
 left: -250px; top: 10px; width: 250">
Your browser can't cope with this DHTML page.<p>
<a href="nodhtml.htm">Click here for a regular HTML page.</a>
<p></div>

Like the "intro" layer mentioned earlier, this layer is nothing more than a little text positioned completely out of view beyond the edge of the browser window. The point here is that older browsers that don't support style sheet positioning won't know enough to hide this layer; those browsers' users will see the text telling them how lame their browser is and offering a link to an alternative page—presumably one that doesn't use any Dynamic HTML jugglery.

Figure 20.4 shows what the page from Figures 20.1 to 20.3 looks like when viewed with the Opera browser, which doesn't support style sheets or JavaScript. The style and id attributes of the <div> tags have no effect at all in Opera, so the contents of all the layers are displayed one after the other down the page.

Figure 20.4 When the page in Figures 20.1 to 20.3 is viewed in Opera 3.21, a link to an alternate page appears.

When a user follows the "Click here for a regular HTML page" link in Figure 20.4, she gets the nodhtml.htm document shown in Figure 20.5. You can make any page you want and name it nodhtml.htm (or change the "nodhtml.htm" reference to the page of your choice). Instead of telling the user that her browser isn't advanced enough for your state-of-the-art pages, you might choose instead to simply present equivalent content without the fancy DHTML animation.

Figure 20.5 Clicking the link in Figure 20.4 takes the user to a plain-vanilla HTML page, with no DHTML enhancements.

Share This