How to Create Website/ Page Links

Links are a fundamental part of the web. They are in fact what makes the web a web. Links allow the reader to :

Jump from one section of a web page to another section of the page.
Jump to a new web page altogether.
Jump to another website.

make your own web pages -5
Figure linking in a page and between pages

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, but the link colour can be determined by the designer. The link is designated in HTML by use of the anchor tags <A></A>.

The destination of the link can be either:

A web page within the same site (internal link) or another site (external link) and/or a particular location in a web page (named anchor or bookmark). The ability to link to a specific location within a web page is particularly useful when dealing with large web pages.

Named Anchor or Bookmark

To link to a particular area on a page you need a way of identifying that area. This is done using either the name tag or the css( cascading style sheet) id attribute.

name tag

<a name="anchor">this is the bit of destination text </a>

or the id attribute

<h1 id="anchor">this is the bit of destination text </a>

Here is a page (opens new window) that illustrates the use that should make them clearer.

Absolute, Relative, Internal and External Website Links

There are several different link types. Internal links are links to other web pages on your website. Internal Links can be either relative or absolute. External links are links to pages on the other websites and can only be absolute links.

Example links and associated HTML code

Relative:

Relative links are relative to the current position on the webpage within a website and are only possible within the same site

Link to home page this is a relative link

link to top of this page this is a relative link to a bookmark called links.

HTML for the above links:

<a href="index.htm">Link to home page</a> this is a relative link

<a href="#Links">link to top of this page</a> this is a relative link to a
bookmark called links

Absolute links:

Link to home page absolute link

link to top of this page absolute link to a bookmark

External link to another web site this is an absolute external 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="http://www.build-your-website.co.uk/links.htm#Links">link to top of this page</a> absolute link to a bookmark

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

Links and URLs

When viewing the HTML for the link in the above examples you probably recognised the website name and the page name as part of the link. But that was only part of the link and not all links look like that.

The link is in fact a URL(Uniform resource locator) and can be used not just for reading web pages but for copy pages, email, newsgroup access etc. URLs allow access to all kind of resources on the web. So what is a URL? .

Advanced Linking

Once you are happy with creating basic links you may want look at some of the more advanced techniques you can use with links like Hiding affiliate links, adding link descriptions on mouseover etc when linking web pages.

These techniques and other are discussed in advanced web page linking.

Related articles and tutorials:

Main menu

Website Resources