Step HTML Part 5

Anchors and Linking

Links allow the reader to jump from one section of a document to another section of the document or to a new document altogether. This is shown in Figure 5 below:

Figure 5 linking in an HTML

In order to link you require two things:
- The start of the link.
- The destination of the link.

The start of the link is called the hotspot and it shows up in the browser as underlined and in normally in blue until it has been clicked. It is designated in HTML by use of the anchor tag <> . Unlike simple tags the anchor tag has extra attributes which specify the name of the tag (so that it can be linked to) and the destination web page or page section. The form is as shown in Figure 6:

Link destinations and anchors

The destination of the link can be either:
-Another web page
-A particular location in an another web page (named anchor or bookmark).
-A location within the same page -The ability to link to a specific location within a web page is particularly useful when dealing with large web pages.

When the destination is another web page then the destination is the URL of the web page. The URL can be either a relative URL (if it is on the same website) or an absolute URL (if it is on another website). This is covered in Understanding urls.

In order to link to allocation in a web page the location need to have an anchor or bookmark. For example to make an anchor out of the text Example links below I would use the anchor tag < a >< /a > as follows.

< a name="example">Example links:< /a >

Where the link name example would be used in the link used to access it.

To direct a viewer to this area of the web page you would create a link to the named anchor using < a href =" ">. The example links: text below is a named anchor (anchor name=example).A link to this anchor would look like this:

Click to see < a href="http://www.build-your-website.co.uk/starting-html-part5.htm#example" >some examples< /a >

The HTML code is

Click to see < a href = "#example" >some examples< /a >

Example links:

Here are a collection of relative and absolute link examples:

Link to home page this is a relative link. HTML is

< a href ="index.htm">Link to home page< /a >

link to top of this page

this is a relative link to a bookmark. HTML is:

< a href ="#Anchors and Linking" >link to top of this page< /a >

link to another web site this is an absolute link to a page on another web site.. HTML is:

< a href ="">< a href="http://www.codekrub.com/" >http://www.codekrub.com< /a >" > link to another web site< /a >

Absolute Link examples:

Link to home page absolute link
link to top of this page absolute link to a bookmark

link to another web site this is an absolute link to a page on another web site

HTML for the above links:

< a href = "http://www.build-your-website.co.uk/index.htm">Link to home page< /a > absolute link

< a href ="">link to top of this page< /a > absolute link to a bookmark

< a href = "http://www.oeupdates.com/index.html">link to another web site< /a > this is an absolute link to a page on another web site



Exercise to try

The text at the top of the starting-html-example.htm page starts as follows:

Starting HTML - A beginners Guide

Create a named anchor called start-top for this text

Starting HTML - A beginners Guide

and now create a link to it from another document as follows with the following text:

This link will take you to the top of the starting-html-examples page.

The answers will open in another window.

.
.