Creating an Image Map - HTML5 and CSS Comprehensive - page 273

4. Add HTML code to the extend5-1.html file to create an image map that links each clickable area
on the map image to an external Web page of your choice. If you created the Web pages for this
site in Chapter 4, you can copy those and the external style sheet created in Chapter 4 over to the
Chapter 5 folder. It might be best to rename them (e.g., golfch5.html) to separate them from the
original pages. You will also create a Salon or Room Service Web page.
5. Add the code to include a horizontal navigation bar at the bottom of the Web page, similar to what
you created in this chapter. Edit the external style sheet from Chapter 4 to add the styles needed
for the menu bar at the bottom of the Web page.
6. Use the provided file, futurech5.html, to create one of the two new Web pages (Room Service or
Salon). Include a table of relevant information on that page.
7. Save the revised file in the Chapter05\Extend folder using the filename extend5-1solution.html.
Save the external style sheet as extend5-1styles.css.
8. Validate the Web pages to assure that you are in compliance with current standards.
9. Test the links completely.
10. Print the revised HTML home page file. If requested, also print any additional Web pages that
you created.
11. Enter the URL G:\Chapter05\Extend\extend5-1solution.html to view the Web page in your browser.
12. Print the Web page.
13. Submit the completed files in the format specified by your instructor.

Make It Right

Analyze a document and correct all errors and/or improve the design.

Correcting the Travel Agency Web Page
Instructions: Start Notepad++. Open the file makeitright5-1.html from the Chapter05\MakeItRight
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 Web page is a modified version of what you see in Figure 5-38 on the next page.
Make the necessary corrections to the Web page to make it look like the figure. The Web page uses the
image ctmenu.jpg for the image map and should have links from four hotspots. The Web page also uses
the image ctdivider.jpg for the divider between items in the text navigation bar at the bottom of the
Web page. Add five text links at the bottom of the Web page using Table 5-10 for the coordinates and
the filenames of the images that should be displayed when a link is clicked. Be sure to include alt text.
Submit the completed HTML file(s) and Web page(s) in the format specified by your instructor.

Table 5-10 Image Map Coordinates, URLs, and Text Links

Text Link Image Map Coordinates Filename

Near the wall 346,152,493,179 wall.jpg

Indian corn 346,202,493,234 corn.jpg

On the farm 346,253,493,284 farm.jpg

By the lake 346,303,493,334 lake.jpg

Continued >