HTML and CSS Reference
Extend Your Knowledge
Extend the skills you learned in this chapter and experiment with new skills.
Creating an Image Map
Instructions: Start Notepad++. Open the file extend5-1.html from the Chapter05\Extend folder of
the Data Files for Students. See the inside back cover of this topic for instructions on downloading the
Data Files for Students, or contact your instructor for information about accessing the required files.
The extend5-1.html file is a partially completed HTML file that needs to be completed. The Web page
is a continuation of the oceanside.html project that you completed in Chapter 4. In this project, you
will add an image map to take the place of the links inserted in Chapter 4. You can use the linked Web
pages that you created in Chapter 4. Figure 5-37 shows the Extend Your Knowledge Web page as it
should appear in your browser after it is completed.
Perform the following tasks:
1. Enter the URL G:\Chapter05\Extend\extend5-1.html to view the Web page in your browser.
2. Examine the HTML file and its appearance as a Web page in the browser.
3. Using Paint, open the file menubar.jpg from the Chapter05\Extend folder. Determine the x- and
y-coordinates necessary to create six clickable areas on the map image, one each for Home, Golf,
Tennis, Dining, Room Service, and Salon. Use rectangle shapes for the six areas.
image map of icons
used for navigation