Linking Between and Within Documents

One of the great advantages of HTML documents is hypertext linking. This lets you create highlighted segments of text which can be clicked on to move between and within documents. Hyperlinks between different documents allow you to reference other peoples Web pages or split your document into a number of smaller documents of more manageable size. The format for creating a link between different documents is:

<a href="url| {url}#internal_link_name| mailto:email_address"| name="internal_link_name" {target="_blank|_self|_parent|_top|frame_name}"> link_text </a>

The address tag has one required attribute with two options (href|name) and one optional attribute.

link text is the text you want highlighted for the link. For example, if I wanted to create a link to Yahoo's indexing site that will appear in this frame, I could do this:

<a href="http://www.yahoo.com" target="main">YAHOO!</a>
and it would look like this

YAHOO!

on the actual screen.

To create a link within a document, you need to create both a Hyperlink and an Anchor. An Anchor is the position within the text to which you wish to jump. Although it is created with the <a> tag it is not visible as a link. Hyperlinks and Anchors can be used to create a table of contents within a document. The table of contents will contain the Hyperlinks and the various headings within the document will be the Anchors. For example, in another section of this tutorial I created a Hyperlink to the start of the Logical Text Styles section using the tag logic. The HTML Anchor tag to do that is:

<a name="logical">Logical Text Styles</a>

and the Hyperlink in the Table of Contents at the beginning of this document is:

<a href="htmltutrtext.htm#logical">Logical Text Styles</a>
Logical Text Styles

A hypothetical example, of an e-mail link is:

<a href="mailto:bgates@microsoft.com">Bill Gates</a>

Mapping Links onto an Image

An image can be partitioned into clickable links using the Map and Area tags.
<map name="map_name"> Area_tags </map>
The only parameter is the map name which is the symbolic name which the image tag will use in its USEMAP parameter.
The MAP tags enclose one or more AREA tags.
<area coords="coordinates" href="url" alt="descr_of_link" {shape="rect|circle|poly" target="frame"}>

This example has a clickable area on the circular face.

Go to HHGTTG home
Don't Panic


Next Lesson Next Page

HTML Home