Starting 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:

 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 <A>. 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.

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="#anchor name>. The example links: text below is a named anchor (anchor name=example).A link to this anchor would look like this:

Click to see some examples

The HTML code is

Example links:

Here are a collection of relative and absolute link examples:

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:

Exercise to try

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

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.

 Answer:

part4<------Previous

The End or just the Beginning ?

You've now completes the short course and should now be ready to make your first real web pages. You won't be doing this with Html but with a web page editor (see how to make web pages using a web page editor). You will find the HTML knowledge invaluable when it comes to correcting some editor quirks (and they all have them).

I have a copy of the HTML book (adjacent links) and I find it invaluable for checking syntax and attribute properties etc. If you are going to be making your own pages I strongly suggest you get yourself a good HTML book.

Starting HTML sections:

• Starting Html -Intro
• Part1-An Introduction to HTML-Your first  Web Page
• Part2-HTML TAGS Explained
• part3-Formatting Text - Fonts
• part4-Lists and Tables and Images
• part5-Anchors and Linking

Note: You may have noticed the term XHTML appearing. XHTML is the replacement for HTML. However the difference between the two is very minor and are covered in  HTML to XHTML in 10 steps and XHTML.

Related Articles and resources:

• Validating Web Pages
• Web Page Editors

Web www.build-your-website.co.uk