ptg16476052Images and Links 2179
Now add the anchors to the images to activate them:
Input ▼
Figure 9.12 shows the result of this addition.
When you click the icons now, the browser jumps to the linked page just as it would have
if you had used text links.
Output ▼
Speaking of text, are the icons usable enough as they are? How about adding some text
describing exactly what’s on the other side of each link? You can add this text inside
or outside the anchor, depending on whether you want the text to be a hot spot for the
link, too. Here, include it outside the link so that only the image is a link. You also can
position the icons so that the text is aligned with the middle of them using the vertical-
align attribute of the tag. Finally, because the extra text causes the icons to move
onto two lines, arrange each one on its own line instead:
Input ▼
<!DOCTYPE html>
FIGURE 9.12
The basic page
with navigation
links.
▼▼