HTML:Hyperlinks

Introduction

A Hyperlink is one of the key features that make a web page different from a formatted text document. A hyperlink is a link from one web page to another, or to another file, such as video or sound, or occasionally, a link from one part of a page to another part of the same page. It is the way in which you can connect a series of web pages together and it is the heart of how the World Wide Web works. So far, we have looked at tags which manipulate the way information is displayed in web pages, now we’ll look at a powerful tag which forms the basis of how internet pages are joined together to form the "web."

The Anchor Tag

The ANCHOR tag is a very versatile tag, in that it creates links to other information – web pages, documents, files, images, or any other computer file which is accessible. Like most of the tags we have looked at so far, the anchor tag has both a start and end tag <A></A>.

In order to link to other pages, you must set the attributes of the anchor tag. The first attribute we’ll look at is the HREF. HINT: HREF stands for Hypertext Reference.

The HREF can be used to connect to many types of data file.

Try the following:

Please visit the <A href="http://www.scit.wlv.ac.uk"> School of Computing and IT </A> for more details

The words "School of Computing and IT" are underlined and in blue to show that this is the hyperlink. When you use the mouse to position the pointer over the hyperlink (but not click it), the mouse pointer will change to a hand, and a left-click of the mouse on the underlined words will cause the web browser to load the page pointed to by the value in the HREF attribute.

Create and save the following two web pages in the same folder.

Web page 1 (Save this as page1.htm):

<H1>Page 1</H1>
 This is the first web page, it links to the second web page when you click <A href="page2.htm">HERE</A>

Web Page 2 (Save this as page2.htm):

<H1>Page 2</H1>
 This is the second web page, it links back to the first page when you click <A href="page1.htm">HERE</A>

Open the first page.

When you click on the link in the first page, it loads the second page, and vice versa. This is the simplest example of how to connect web pages together.

HINT: two or more web pages which join together are called a website.

You can link to other types of file by changing the value of the HREF attribute to anything that can be opened in a web page. Try the following example:

 <H1>Essential Documents</H1>
  This is a link to an<A href="http://www.scit.wlv.ac.uk/logos/msdnaa2.jpg">image of the MSDNAA logo</A> on SCIT's homepage.

This hyperlink links to an image. What happens when you click on this link is dependant on your browser, operating system and installed software. If you are using a PC, with Internet Explorer, the image will open in your web browser. If you don’t have a viewer for this image installed, it might open in another program, or may ask you where you would like to save the document.

You can use the ANCHOR tag to link to any public file or folder on the Internet.

A Note on Frames

If you use frames in your website, you can also use the "target" attribute of the anchor element to set which frame the target page will open in, or whether the link will open in a new window or its parent window.

For example, to get the link to open in a new window try:

<A href="page2.html" target="_BLANK">Page2</A>

or to get the link to open in the frame you specify:

<A href="page2.html" target="YOUR-FRAME-NAME">Page2</A>

TIME TO PRACTICE

Add some hyperlinks to the long text web page created in the previous chapter. Create some links to some relevant web pages that you know.

Ready to move on?

When you're happy with the content of this section, try 05 - Images