HTML and CSS Reference
In-Depth Information
1
•
Highlight the HTML
code
<p><a href=
”#top”><span
style=”font-
size: small”>To
top</span></a>
</p>
on line 62.
•
Click Edit on the
menu bar and then
click Copy.
•
Highlight the line
<!--Insert second
To top link here -->
on line 74 to posi-
tion the pointer.
inserted second To
top link to take user
to target with id top
•
Click Edit on the
menu bar and then
click Paste to paste
the HTML code that
you copied into
line 74 (Figure 3-46).
Figure 3-46
To Add an Image Link to a Web Page
The last step is to add an image link from the Sample Photographs Web page back to the Underwater Tours
by Eloise home page. The style for links that you set with an embedded style sheet earlier set the link background
color to dark blue and the text to light blue. For an image link, however, this would not be appropriate. To override
the embedded style sheet for just this one instance, you will use an inline style to set a background-color that is trans-
parent with text-decoration of none (no underline). Remember that according to the style precedence rules, an inline
style takes precedence over an embedded style sheet. These two styles in the <a> tag (background-color: transparent;
text-decoration: none) together with the border-color: transparent style in the <img> tag ensure that no border
appears around the image and there is no line under the link image. Remember that the <div> </div> tags create a
container that defines logical divisions in your Web page. The <div> tag is similar to a paragraph tag, but it allows
you to divide the page into larger sections and to define the style of whole sections within your Web page. You could
define a section of your page and give that section a different style from the surrounding text. When you use the <div>
</div> tags, you are able to design a layout that uses CSS properties. You use the <div> </div> tags in this case to insert
the image that will be used as a link on the Web page. Table 3-11 shows the code used to insert the image link.
Table 3-11 HTML Code to Insert Image Link to Home
Line
HTML Tag and Text
<div>
37
<a href="underwatertours.html" style="background-color: transparent;
text-decoration: none">
38
39
<img style="border-color: transparent" src="underwaterlogosm.jpg"
width="158" height="49" alt="Back to home page" /></a>
40
</div>
