HTML and CSS Reference
In-Depth Information
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
style sheet.
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,
as requested.
