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

4. Set the base target of the Web page to new so that links on the page open, by
default, in a new browser window or tab.
5. Go to the page body, and then directly below the header element insert a navigation
list with the following content:
a. An h2 heading with the text News Sources
b. An unordered list containing the following entries: Yahoo! News , FOX News ,
CNN , MSNBC , Google News , New York Times , digg , Washington Post , LATimes ,
Reuters , ABCNews , and USA Today .
c. Look up the Web addresses of the 12 news sources and link your list entries to the
appropriate Web sites. Set the rel attribute of each link to external .
6. Scroll down to the last paragraph before the fi gure box and link the text Secretary of
State to the Offi ce of the Kansas Secretary of State Web site.
7. Directly below the fi gure box, create an image map named kansasdistricts contain-
ing four polygonal hotspots for each of the four Kansas congressional districts. Use
the coordinates found in the dcoords.txt fi le as the coordinates of the hotspots.
8. Set the hotspots in your image map to access the district1.htm, district2.htm, dis-
trict3.htm, and district4.htm fi les, using the target attribute value of _self so that
those Web pages open within the current browser window or tab.
9. Apply the kansasdistricts image map to the kansasmap.png inline image.
10. Save your changes to the fi le.
11. Go to the district1.htm fi le in your text editor.
12. Directly below the opening <section> tag, insert a navigation list containing an
unordered list with the items District 1 , District 2 , District 3 , and District 4 . Link
each entry to its corresponding Web page in the ElectionWeb Web site.
13. Scroll down to the last paragraph before the fi gure box and link the text statewide
races to the kansas.htm fi le.
14. Apply the same image map you created in Step 7 for the kansas.htm fi le to the kan-
sasmap.png inline image.
15. Save your changes to the fi le.
16. Open the district2.htm , district3.htm , and district4.htm fi les in your text editor and
repeat Steps 12 through 15 for each fi le.
17. Open the kansas.htm fi le in your Web browser and verify that you can navigate
through Allison's sample pages by clicking the hypertext links within the page body
and within the image maps. Verify that you can access the external Web sites listed
in the news sources and the Offi ce of the Kansas Secretary of State.
18. Submit your completed project to your instructor, in either printed or electronic
form, as requested.

Case Problem 4

Test your
knowledge of
HTML and use
your creativity to
design a Web site
documenting a
Shakespeare play.

Data Files needed for this Case Problem: characters.txt, notes.txt, tempest.jpg,
tempest.txt

Mansfi eld Classical Theatre Steve Karls continues to work as the director of Mansfi eld
Classical Theatre in Mansfi eld, Ohio. The next production he plans to direct is The
Tempest . Steve wants to put the text of this play on the Web, but he also wants to aug-
ment the dialog of the play with notes and commentary. However, he doesn't want his
commentary to get in the way of a straight-through reading of the text, so he has hit on
the idea of linking his commentary to key phrases in the dialog. Steve has created text
fi les containing an excerpt from The Tempest as well as his commentary and other sup-
porting documents. He would like you to take his raw material and create a collection of
linked pages.