HTML and CSS Reference
In-Depth Information
Adding Links Within a Web Page
The final links to be added in this project are links within the Sample Photographs
Web page and a link back to the Underwater Tours by Eloise home page. Because the
Sample Photographs Web page is quite long, it would be easier for visitors to have a menu
or list at the top of the Web page that facilitates immediate movement to another section.
Figure 3-40 shows how clicking the text link Frog Fish in the bulleted list near the top of
the page links to the Frog Fish section in another part of the Web page. When the mouse
pointer is moved over the words Frog Fish and is clicked, the browser repositions, or links,
the page to the target named fish. Notice when the mouse hovers over the link, the link
changes to a dark blue background with light blue text. That is because of the a:hover styles
that are embedded on this Web page.
(a) Internal link.
unordered bulleted list added
to link to fish target below
link to fish target where
pointing hand indicates a link
target with id fish is
positioned just before
the Frog Fish title
(b) Target point in
Web page.
Figure 3-40
To create links within the same Web page, the targets for the links must first be
created. Link targets are created using the <a> tag with the id attribute, using the form:
<a id=“targetname”></a>
where targetname is a unique name for a link target within that Web page. Notice that
the tag uses the id attribute, rather than the href attribute, and that no text is included
between the start <a> and end </a> tag, because the target is not intended to appear on the
Web page as a clickable link. Instead, the link target is intended to mark a specific area of
the Web page, to which a link can be directed.
Links to targets are created using the <a> tag with the href attribute, using the form:
<a href=”#targetname”>
where targetname is the name of a link target in that Web page. Notice that the tag uses the
href attribute, followed by the pound sign (#) and the target name enclosed in quotation marks.
