Sams Teach Yourself HTML 4 in 24 Hours
- 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
- 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
Workshop
Quiz
- You have a 200x200-pixel image named quarters.gif for your Web page. When viewers click the top-left quarter of the image, you want them to get a page named toplft.htm. When they click the top-right quarter, they should get toprgt.htm. Clicking the bottom left should bring up btmlft.htm, and the bottom right should lead to btmrgt.htm. Write the HTML to implement this as a client-side imagemap.
- If you want people using older browsers that don't support client-side imagemaps to get a page named oldies.htm when they click any part of the imagemap, how do you modify the HTML you wrote for question 1?
- How could you implement the effect described in question 1 without using imagemaps at all?
Answers
-
<map name="quartersmap"> <area shape="rect" coords="0,0,99,99" href="toplft.htm" /> <area shape="rect" coords="100,0,199,99" href="toprgt.htm" /> <area shape="rect" coords="0,100,99,199" href="btmlft.htm" /> <area shape="rect" coords="100,100,199,199" href="btmrgt.htm" /> </map> <img src="quarters.gif" width="200" height="200" usemap="#quartersmap" />
-
Replace the <img /> tag above with:
<a href="oldies.htm"> <img src="quarters.gif width="200" height="200" ismap usemap="#quartersmap" /></a>
-
Use a graphics program such as Paint Shop Pro to chop the image into four quarters and save them as separate images named toplft.gif, toprgt.gif, btmlft.gif, and btmrgt.gif. Then write this:
<a href="toplft.htm"><img src="toplft.gif" width="100" height="100" border="0" /></a> <a href="toprgt.htm"><img src="toprgt.gif" width="100" height="100" border="0" /></a> <br /> <a href="btmlft.htm"><img src="btmlft.gif" width="100" height="100" border="0" /></a> <a href="btmrgt.htm"><img src="btmrgt.gif" width="100" height="100" border="0" /></a>
(Be careful to break the lines of the HTML inside the tags as shown in this code, to avoid introducing any spaces between the images.)
Exercises
- If you have some pages containing short lists of links, see if you can cook up an interesting imagemap to use instead.
- Imagemaps are usually more engaging and attractive than a row of repetitive-looking icons or buttons. Can you come up with a visual metaphor related to your site that would make it easier—and maybe more fun—for people to navigate through your pages? (Thinking along these lines is a good preparation for the issues you'll be tackling in Part VI, "Building a Web Site," by the way.)
Hour 15. Advanced Layout with Tables | Next Section
Account Sign In
View your cart