Programming & construction	HTML	WYSIWYG editors (in development)	Interactivity & animation (in development)	Web applications (in development)	Implementation (in development)

Links

Links, or ‘hyperlinks’ allow the web user to navigate between documents by clicking with their mouse on a link, which may be a piece of text or a graphic.

You may create links to other websites (external), to pages in your own site (local), or to a location on the same page (anchor).

To link to local documents (those within your own web site) use the relative file path of the document, including any required directory information, eg:

<a href="(../other folder/filename.html ">Link text</a>

External files (those in other websites) are called using the full URL, eg:

http://www.edtec.unsw.edu.au

Links Syntax

Links are created by using the <a>(anchor) tag with an ‘href’ attribute, which works like the image ‘src’ attribute:

links the word ‘fox’ to the fox website, and the word ‘dog’ to an html document called ‘dog’.

• <A> stands for Anchor. It begins the link to another page.

• HREF stands for Hypertext REFerence — refers to the address of the linked document
• ‘http://www.fox.com’ is the FULL ADDRESS of the link. ‘HREF=address’ is an attribute of the Anchor tag.
• The text contained within the <a href> </a> tags is what becomes the functional link on the page rendered by the browser. It will, by default, appear as underlined, usually blue, text, and the mouse cursor will become a pointer as it rolls over.
• </A> closes the link tag.

Images may also be used to anchor links:

The quick brown <a href="http://www.fox.com">fox</a>
jumped over the lazy dog
<br><a href="dog.html"><img src="doggy.gif"></a>

In this case, an image called ‘doggy.gif’ is a link that goes to ‘dog.html’.

This code creates the text link below to the Web & Media Production home page:

<A HREF="http://www.edtec.unsw.edu.au/webmedia/index.html" target="_blank">
Web & Media Production homepage</A>

Web & Media Production home page

If you lay your cursor on the underlined words, the URL of the link will appear at the bottom of the browser window (the coloured background rollover is set in a style sheet). Clicking on the link will take you to the URL set in the code's 'href' attribute.

Target attribute

By default, a link will open its target document in the same browser window. The target attribute can be used to open the link in a new window (target="_blank").

Page anchors

Anchors within a page may also act as targets for links, as in:

Link to top of page

This is done by placing a named anchor at the spot you wish to link to, then using that anchor name as the href, eg:

<a name="top"></a>Top of page

[page content]

<a href="#top">Link to top of page</a>

Try the link above . . .

Now find out about page layout >