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 elementInline-level elementSpecifies a hyperlink reference (href) to a fileText 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

<a href="shampoo.html">Shampoo</a><a href="../index.html">Home</a><a href="../services/bathing.html">Dog Bathing</a>

5

Relative links from the collars page in the products folder

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:me@hotmail.com">me@hotmail.com</a>

7

A link to a part of a web pageAlso called named fragments, fragment idsTwo 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>

8

Note the use of the # in the anchor tag!

9

This part of chapter 2 provided an overview of using the anchor element to code hyperlinks.