Developing a Web Site - HTML, CSS, and Dynamic HTML - page 126

Complete the following:
1. Use your text editor to open the contesttxt.htm , childtxt.htm , scenictxt.htm , and
fl owertxt.htm fi les from the tutorial.02\review folder included with your Data Files.
Enter your name and the date within each fi le, and then save them as contest.htm ,
child.htm , scenic.htm , and fl ower.htm , respectively, in the same folder.
2. Go to the child.htm fi le in your text editor. Directly below the header element,
create a navigation list containing an unordered list with the following list items as
hyperlinks:
a. Home linked to the camhome.htm fi le
b. Tips linked to the tipweek.htm fi le
c. Contest linked to the contest.htm fi le
d. Glossary linked to the photogloss.htm fi le
3. Go to the section element and locate the contest1.png inline image. Directly
below the inline image, insert an image map with the following properties:
a. Set the name of the image map as contestmap .
b. Add a polygonal hotspot pointing to the child.htm fi le containing the points (427,
5), (535, 20), (530, 59), and (421, 43). Enter Child Photos as the alternate text for
the hotspot.
c. Add a polygonal hotspot pointing to the fl ower.htm fi le containing the points
(539, 57), (641, 84), (651, 46), and (547, 26). Enter Flower Photos as the alternate
text for the hotspot.
d. Add a polygonal hotspot pointing to the scenic.htm fi le containing the points
(650, 86), (753, 125), (766, 78), and (662, 49). Enter Scenic Photos as the alter-
nate text for the hotspot.
4. Apply the contestmap image map to the contest1 inline image.
5. Locate the three h2 elements naming the three child photo winners. Assign the h2
elements the ids photo1 , photo2 , and photo3 , respectively.
6. Save your changes to the fi le.
7. Go to the fl ower.htm fi le in your text editor. Repeat Steps 2 through 6, applying the
image map to the contest2.png image at the top of the section element.
8. Go to the scenic.htm fi le in your text editor. Repeat Steps 2 through 6 applying the
image map to the contest3.png image at the top of the section element.
9. Go to the contest.htm fi le in your text editor. Repeat Step 2 to insert a navigation list
at the top of the page.
10. Scroll down to the second article. Link the text Child Photos to the child.htm fi le.
Link Flower Photos to the fl ower.htm fi le. Link Scenic Photos to the scenic.htm fi le.
11. Scroll down to the nine thumbnail images (named thumb1.jpg through thumb9.jpg ).
Link each inline image to the corresponding h2 heading in the child.htm, fl ower.
htm, or scenic.htm fi le you identifi ed in Step 5.
12. Scroll down to the aside element. Mark the text Gerry Hayward as a hypertext link
to an e-mail address with [e-mail] as the e-mail address and Photo
Contest as the subject line.
13. Mark the text BetterPhoto.com as a hypertext link pointing to the URL http://www.
betterphoto.com . Set the attribute of the link so that it opens in a new browser win-
dow or tab.
14. Save your changes to the fi le.
15. Open contest.htm in your Web browser. Verify that the e-mail link opens a new mail
message window with the subject line Photo Contest . Verify that the link to BetterPhoto.
com opens that Web site in a new browser window or tab. Verify that you can navigate
through the Web site using the hypertext links in the navigation list. Finally, click each
of the nine thumbnail images at the bottom of the page and verify that each connects to
the larger image of the photo on the appropriate photo contest page.