HTML and CSS Reference
In-Depth Information
four bars on right
used as links
Figure 5-36
3. Using Notepad++, create a new HTML file with the title Apply 5-1 in the title section. Add the
heading (using an h1 heading and the color #000064) and text, as shown in Figure 5-36. Use the
¦ special character (broken vertical bar) to separate the text links.
4. Use Paint to determine the dimensions of the image for the <img> tag. Align the image so that it is
to the left of the text.
5. Use the usemap attribute usemap="#chart" in the <img> tag.
6. Enter the <map> </map> tags required to create the image map named chart.
7. Enter the <area> tags required to define four clickable areas on the image barchart.png. Use the
x- and y-coordinates determined in Step 2 and set the href attribute to link to the sample.html file
from the Data Files for Students or create your own secondary Web pages.
8. Save the HTML file in the Chapter05\Apply folder using the filename apply5-1solution.html
Validate the Web page(s) using W3C. Print the HTML file.
9. Open the file apply5-1solution.html in your browser and test the image map and text links to the
sample.html Web page provided. As a bonus, link to other Web pages of your choosing.
10. Print the main Web page.
11. Submit the completed files in the format specified by your instructor.
