XHTML

Hyperlinks

Creating Links to Other Web Pages A link, or hyperlink, is a specially

formatted Web page object that the user can click to open a different Web page, known as the target.

Creating Links to Other Web Pages Links are created using the anchor

tag pair. <a> … </a>

Creating Links to Other Web Pages Type of links:

external• file located on a network, such as the

Internet• file in the same location as the current file

internal (jump link) e-mail

External Links Example 1<a href=“http://www.garlandisd.net”>GISD</a>

Example 2<a href=“page2.htm”>Page 2 of My Site</a>

Internal Links (Jump Links)Part 1: href=”#linkname” Links different parts of your HTML document. “linkname” is the name of the section you are jumping or linking to.

<a href=”#top”>Top of Page</a>

Part 2: name=”????”

Marks the place or point on the page where you want the browser to jump to. “????” is the name you assign to the location in the document.

<a name=”top”></a>

E-mail Links E-mail links require using mailto: in

front of the e-mail address on the href attribute.

Example:<a href=“mailto:kstair@garlandisd.net”>Mrs. Stair’s

Email Address</a>

Absolute vs. Relative Links An absolute link includes the page’s

full Web site location and directory information.

Absolute links should only be used when linking to another site<a href=http://www.w3schools.com> Tutorials </a>

Absolute vs Relative Link A relative link, on the other hand,

includes only the information about the target page’s location relative to the current Web page.

Allows entire sites to be moved without breaking links.<a href=“page2.htm”><a href=“folder/page5.htm><a href=“../index.htm”>

Linking Graphics To link a graphic, surround the <img /> tag with the <a>..</a> tag

pair referencing the target Web page.

Linking Graphics

Example:<a href=“index.htm”><img

src=“house.jpg” /></a>Displays a photo of a house that will take the user to the home page after they click the house photo.

Linking Graphics

Linked graphics display by default with a blue border

Blue border provides a clue to users that the image contains a link

Linking Graphics

A user can test a graphic by moving the mouse pointer over it – the pointer changes to a pointing hand if the image is formatted with a link.

Assignment Creating Links worksheet Refer to the pages on Hyperlinks in

the notebooks for help