2.6: Adding links to your page

Hyperlinks add the magic to your Web pages and makes them different from a linear text, such as a book or a magazine story. Links put control in the hands of the reader; he or she can approach the text in any order allowed by the links you provide.

You can make a link from a piece of text or from an image. A text link has three parts:

  1. the block tags that provide a format for your text
  2. the anchor tags that create the link
  3. some text that becomes the clickable element on the page

An image link has two parts:

  1. the anchor tags that create the link
  2. the image tag that becomes the clickable element on the page

Look at this text link:

<p><a href="resume/index.html" target="blank">Printable resume</a></p>

Here is how the link looks in the browser window; go ahead and try it:

The bold type, the color and the roll-over effect are created using the CSS stylesheet. On your first HTML5 page, just use plain formatting.

Study the code for the link:

Now look at this image link:

<a href="resume/index.html" target="_blank">
<img src="img/res_button.jpg" width="80" height="40" alt="Printable Resume">
</a>
Printable Resume

Here is how it looks in your browser; try it out:

Study the code for the link.

For more on using images, see Page 7 of this chapter.

Relative links and absolute links

In the links above, the href attribute was very simple: resume/index.html. We call this a relative link. It is a direct link between pages on the same website. When linking to pages within your website, always use relative links. They are the fastest connection between pages.

Absolute links should be used to link to a page on another website. Here is an example of an absolute link:

<a href="http://www.stthomas.edu/irt/desktopsupport/filestorage/mystorage/" 
target="_blank">
MYSTORAGE INSTRUCTIONS
</a>

An absolute link requires the complete URL as it would appear in the browser’s address bar, including the protocol and punctuation: http://

Here is how the code above appears in your browser window; you can try it out:

MYSTORAGE INSTRUCTIONS

Creative Laziness™ tip:

The URL for the MyStorage instructions is 55 characters long, and every character must be perfect. Making a typo is almost inevitable. Instead, follow this creative laziness tip:

  1. In your Web browser open the page that is the target of your link.
  2. Put your cursor in the address window and double-click or triple-click to select the entire address.
  3. Go to EDIT→COPY.
  4. In your text editor, use EDIT→PASTE to place the URL in your link.

If you follow this Creative Laziness™ tip, you will never make a mistake in your URLs and you will never have broken links.

The mailto link

The authors of The Web Style Guide stress the need for feedback from those who visit your site. An easy way to do this is with the mailto tag. Here are the parts:

Here is how the email link looks on the page: