HTML and CSS Reference
In-Depth Information
five images in image map
used for navigation; three
rectangular and two polygonal
horizontal navigation
bar separated by special
character ¦
Figure 5-39
6. Enter the <area> tags required to define three rectangular and two polygonal clickable areas on the
seniorlogo.png image. Use the x- and y-coordinates determined in Step 2 and set the href attribute
to display the sample.html Web page provided in the Data Files for Students.
7. Add a navigation bar of text links at the bottom of the Web page. Include the special character
¦ in between the text links to display the broken vertical bar.
8. Save the HTML file in the Chapter05\IntheLab folder using the filename lab5-1solution.html.
Validate the Web page using W3C. Print the HTML file.
9. Open the file lab5-1solution.html in your browser and test the image map and text links to verify
they link to the sample Web page.
10. Print the Web page.
11. Submit the completed HTML files and Web pages in the format specified by your instructor.
In the Lab
Lab 2: Mapping a Horizontal Navigation Bar
Problem:
You are learning how to utilize a button bar on a Web page as seen in many Web sites. Use
your image mapping skills to create a Web page that has four circular links. You plan to create a Web
page similar to the one shown in Figure 5-40, with the file bluebuttons.jpg as an image map that links
to the sample.html Web page.
Continued >
