Troy University Creating a Web Page for a Senior Center Project

Problem:You are very involved in volunteer work at your local senior center. You decide to create a Web page similar to the Web page in Figure 5–39, with the file seniorlogo.png as an image map that links to five Web pages of your choosing. The Web page sample.html is provided as a temporary page to which you can link.Instructions:Perform the following steps:

1.Using Paint, open the file seniorlogo.png from the Chapter05IntheLab folder.

2.Determine the x- and y-coordinates necessary to create three rectangular clickable areas and two polygonal areas (for Parcheesi and Poker) on the graphical image. (Hint: For the polygonal shapes, note the coordinates of each point, as discussed in the chapter.) Write down these coordinates for later use.

3.Using Notepad++, create a new HTML file with the title Lab 5-1 in the title section. Add the text links, as shown in Figure 5–39.

4.Insert the image seniorlogo.png. Use the usemap attribute usemap=”#menubar” in the <img> tag.

5.Enter the <map> </map> tags required to create the image map named menubar.

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 Chapter05IntheLab 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.