HTML:Hyperlinks

Main Page >> Website fundamentals >> Workbook >> HTML >> Linking Pages

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 href="www.wlv.ac.uk">University of Wolverhampton</a>

HREF - linking pages together

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:

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

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.

• TIME TO PRACTICE
  • Create and save the following two web pages in the same directory/folder.

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

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

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

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

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.

HREF - Linking to other files

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>
 <P>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.</P>

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.

HREF - Linking to different sections of a page

This section has been written by Cara Hughes (0615410).

You can also use anchor tags to navigate to different parts of one webpage. When you click on a link at the top, it jumps to the heading or paragraph that has been specified in the code. This wiki works in the same way. If you click on a link in the 'Contents' box, it moves to the content. Sounds fun? Open up your preferred text editor (e.g. Notepad or PSPad) and follow my step- by- steps if you want to do it yourself.

1. If you havent done already, create a basic webpage (using the structure mentioned on the first page).

2. To create links to each section, you need to create a 'Contents' list. To create lists, you need to use these tags:

<UL> and <LI>

The UL tag creates an Unordered List. These means it has no structure. Ordered lists are created using OL tags. These are lists with a structure, often numbers- e.g. a recipe. The LI tag creates each individual link in the lists.

3. Start your list in the BODY section, like this:

<BODY> 
 <UL> 
 <LI>

4. Take your first heading and insert it under the UL tag. Continue to do it for all your headings until you get something that looks like this:

<BODY> 
 <UL> 
 <LI> 
 <A href="#cats">Cats</A>
 </LI>
 <LI>
 <A href="#dogs">Dogs</A>
 </LI>
 <LI>
 <A href="#fish">Fish</A> 
 </LI> 
 </UL>
 </BODY>

"#cats" is the name, or reference of the 'cats' heading.

5. Now you have a list. Create some suitable headings, the same as you specified in your Contents. In this example, mine are 'Cats', 'Dogs' and 'Fish'. Add a few paragraphs for content. Construct it in the BODY section, like this:

<BODY> 
 <UL> 
 <LI> 
 <A href="#cats">Cats</A>
 </LI>
 <LI>
 <A href="#dogs">Dogs</A>
 </LI>
 <LI>
 <A href="#fish">Fish</A> 
 </LI>
 </UL>
 <H1><A name="cats">Cats</A></H1>
 <P>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a 
 paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 
 This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a 
 paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
 This is a paragraph. This is a paragraph. 
 </P> 
 <H1><A name="dogs">Dogs</A></H1>
 <P>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a 
 paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 
 This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a
 paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 
 This is a paragraph. This is a paragraph. 
 </P> 
 <H1><A name="fish">Fish</A></H1>
 <P>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a 
 paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 
 This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a 
 paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 
 This is a paragraph. This is a paragraph. 
 </P> 
 </BODY>

6. If you open it up in a web browser, the links will just appear as text. Now you need to give your headings references, so that your content can link to it. For each one of your headings, use the following template:

<H1><A name="Anchor name">Name of heading</A></H1>

For my headings, they would be:

<H1><A name="cats">Cats</A></H1>
 <H1><A name="dogs">Dogs</A></H1>
 <H1><A name="fish">Fish</A></H1>

A Note on Frames

• WARNING
  • Fewer and fewer websites make use of frames. Many search engines ignore the vast majority of content in websites with frames, many browsers have difficulties bookmarking frames.
  • For your website assessments, you should NOT use 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 HTML:Images

Related Pages

<categorytree mode="pages">HTML</categorytree>