Transcript Basics of Web Design: Chapter 3 - Centennial College Faculty Web

1




Use the anchor element to link from page to page
Configure absolute, relative, and e-mail hyperlinks
Configure relative hyperlinks to web pages in folders within a
website
Configure a hyperlink to a named fragment internal to a web
page

The anchor element
 Inline-level element
 Specifies a hyperlink reference (href) to a file
 Text between the <a> and </a> is displayed on the web
page.
<a href="contact.html">Contact Us</a>
• href Attribute
 Indicates the file name or URL
Web page document, photo, pdf, etc.
3

Absolute link
› Link to other websites
<a href="http://yahoo.com">Yahoo</a>

Relative link
› Link to pages on your own site
› Relative to the current page
<a href="index.html">Home</a>
4
Relative links from the
collars page in the
products folder
<a href="shampoo.html">Shampoo</a>
<a href="../index.html">Home</a>
<a href="../services/bathing.html">Dog Bathing</a>
5

The target attribute on the anchor element
opens a link in a new browser window or new
browser tab.
<a href="http://yahoo.com" target="_blank">Yahoo!</a>
6
Automatically launch the default mail
program configured for the browser
 If no browser default is configured, a
message is displayed

<a href="mailto:[email protected]">[email protected]</a>
7
A link to a part of a web page
 Also called named fragments, fragment ids
 Two components:

1. The element that identifies the named fragment of
a Web page. This requires the id attribute.
<div id="top"> ….. </div>
2. The anchor tag that links to the named fragment of
a Web page. This uses the href attribute.
<a href="#top">Back to Top</a>
Note the use of the # in the anchor tag!
8
9

This part of chapter 2 provided an overview
of using the anchor element to code
hyperlinks.