HTML and CSS Reference
3. Locate the three strong elements in the two paragraphs and add the class attribute
to each element with the class value set to keyword .
4. Locate the locks.jpg inline image, and below the image create an image map with
the name locks . Add the following hotspots to the image map:
a. A circular hotspot linked to the history.htm fi le, centered at the coordinates ( 52,
52 ) with a radius of 43 pixels; the alternate text should be History .
b. A circular hotspot with a radius of 43 pixels located at the coordinates ( 155, 52 );
link the hotspot to the enigma.htm fi le, and with the alternate text set to Enigma .
c. A circular hotspot with a radius of 43 pixels located at the coordinates ( 255, 52 );
link the hotspot to the algo.htm fi le and set the alternate text to Algorithms .
d. A circular hotspot with a radius of 43 pixels located at the coordinates ( 355, 52 );
link the hotspot to the single.htm fi le and set the alternate text to Single Key .
e. A circular hotspot with a radius of 43 pixels located at the coordinates ( 455, 52 );
link the hotspot to the public.htm fi le and set the alternate text to Public Key .
5. Apply the locks image map to the locks.jpg inline image.
6. Save your changes to the crypt.htm fi le.
7. Go to the c_styles.css style sheet fi le in your text editor. Set the color of the page
body background and text to black and white , respectively. Set the default font to a
list consisting of Century Gothic followed by a generic sans-serif font.
8. Add a style rule for h1 headings nested within a header element to: a) display the
text in yellow ; b) use Courier New , Courier , or another monospace font; c) set the
font size to 28 pixels with a kerning of 20 pixels; and d) center the text.
9. Add a style rule for h2 headings nested within an article element to: a) set the font
size to 24 pixels; b) display the text without boldface; and c) set the kerning to 5 pixels.
10. Align paragraph text within the article element using full justifi cation.
11. For strong elements belonging to the keyword class, create a style rule that displays
the text in a yellow , non-bold font.
12. Center the contents of paragraphs nested within the footer element.
13. You don't want image maps to appear with a colored border. To remove the border,
create a style rule for inline images that contain the usemap attribute and set the bor-
der width to 0 pixels.
14. Document your work with style comments and then save your changes to the fi le.
15. Return to the crypt.htm fi le in your text editor and link the fi le to the c_styles.css
16. Open crypt.htm in your Web browser and confi rm that it matches the design shown
in Figure 3-62.
17. Submit your completed fi les to your instructor, in either printed or electronic form,