Beginning HTML - Home
Introduction - What is HTML, What it can do, what you'll need, etc. The Basics - First steps in HTML. Moving On - Further concepts. Advanced - More advanced ways to use HTML. Glossary - Explanation of terms used in this site HTML Tag and attribute reference - look up the most popular tags and their common attributes for reference
Square Moving On
square Backgrounds
Square Images
Square Links
Square Lists
Square Tables (Part One)
Square Tables (Part Two)
Square Tables (Part Three)
 
What's a link?
Different types of links
Making a simple link
Making a link within a page
Linking to another page
Making a link to another site
Making an email link
Using an image as a link
Linking to a file

What's a link?

A link is an area of the page, be that text or an image, that, when clicked on by the user, makes the browser display another file, part of file, page, site or image. This 'transportation' of the user is why they are sometimes referred to as hyperlinks.
Without links the internet would be rather boring. Links allow you to point the user to other pages and files within your own site, or any other site on the internet. They can also be used as 'triggers', to set off events such as a JavaScript or DHTML effect.

Different types of link

Although links all use the same tag - <a>, there are several different types -
  • A link to a different part of the same page (like the link that takes you to the top of this page);
  • A link to a different page in the same site;(like the back/next links on this page);
  • A link to a different page on a different site;
  • A link to an email address, which triggers off the users email client;
  • A link to a file;
  • A link to a script;
Making a simple link

The tag to use when making links is <a>. A closing tag is required - </a>. The vital attribute to this tag is the href attribute. This attribute tells the browser where you are 'linking' to. Without it, it's not a link! An example of a link -
<a href="aboutme.html">Click here to learn about me</a>

Let's start by making a simple link, from one page on your computer to another. Start Notepad and type in the following code -

<html>
<head>
<title>Page One
</title>
</head>
<body>
This is page one. The text <a href="pagetwo.html">here</a> will take you to page two.
</body>
</html>

Now save this away as pageone.html. All we've done here is made a very basic page, using the usual <html> <head> <title> and <body> tags. We've then added some text. We've also added the code for a link, which points, or links, to a page called 'pagetwo.html'. Because the word 'here' is placed between the opening and closing tags of the <a> tag, that will appear differently (blue, underlined) when the page is displayed.
Notice that the extension .html has to be specified - the browser doesn't assume that the link is to another html page, because it could be all manner of things.

Now start a blank document in Notepad (File>New). Type in the following text -

<html>
<head>
<title>Page Two
</title>
</head>
<body>
This is page two. The text <a href="pageone.html">here</a> will take you to page one.
</body>
</html>


Save this away as pageone.html. As you can see, this is exactly the same as pageone.html, except the link points to pagetwo.html.
Now start up Internet Explorer. Click File>Open>Browse and locate pageone.html. Open it and click on the link (the word 'here'). This should take you to pagetwo.html, from which you can navigate back to the first page.
Congratulations! You've created your first link!

Making a link within a page

You can easily create a link in a page that points to a different section of the same page. This is handy with longer pages (such as this one), and is often used to provide a 'top of page' link, as I do at the bottom of this page.
To achieve this, we need to leave an anchor within the document, where we'd like to link to. So, within this page, I've done this just after the <body> tag, so I can link to the top of the screen. When 'dropping an anchor', we use the name attribute of the <a> tag, like this -
I'd like the anchor to be <a name="theName"> here
Make the name something meaningful to its purpose, such as "top". Now, we can link to that 'anchor' from else where in the document, using the <a> tag, with the href attribute. We need to link to the name we gave the 'anchor', but we need to place the symbol # before the name. So, to link back to the anchor above, we'd use -
<a href="#theName">

Linking to another site

To create a link to another site, all we have to do is change the contents of the href attribute, and include the full URL of the site or page. For example, to make a link to Google, we'd use the code -

<a href="http://www.google.com">Click here to go to Google</a>

If you want to link to a specific page within a site, just add the name of the file at the end, for example -

<a href="http://www.thesitename.com/thefilename.html">Click here</a>

Don't forget the .html or .htm part!

Making an email link

Often in a site, you'll see a link titled something like 'click here to email me'. When you click on this, it opens up your default e-mail client, which might be Outlook Express. This could also be Hotmail, a web-based email service, so this would open up a new window allowing you to log in and compose a message.
To make an email link, we still use both the <a> tag and the href attribute. All we do is make the contents of the href attribute read mailto:name@name.com, where name@name.com is the email address of the recipient, usually yourself. For example

<a href="mailto:billgates@microsoft.com>Click here to mail Bill"</a>

Using an image as a link

We don't have to use just text for our links. An image can be used just as easily. The <a> tag and the href attribute stay the same, all we do is place an image within the opening and closing tags of the link. For example -

<a href="http://www.andykillworth.co.uk">
<img src="linkexample.gif" height="79" width="230" border="0">
</a>


Which would make this -
Example
Make sure you set the border attribute of the <img> tag to 0, otherwise you'll get an ugly blue line around the image, like this -

Example

Linking to a file

Links aren't just used to link to websites and pages. They can also be used to link to files and programs, so that they can be downloaded. The only thing that needs to be changed is the filename that you link to. For example, suppose you have a .zip file that you'd like people to be able to download. All you'd do is use code like -

<a href="myzipfile.zip">Click here to download my .zip file!</a>

You can link to any type of file like this - .exe, .pdf, .rar - if the browser can display it (like html or image files), it will, otherwise it will prompt the user to download and save the file.

That's all for links. There was quite a bit to take in, so make sure you try it out for yourself and experiment. The best way to learn HTML is through practical experience! Now let's learn how to use lists in our pages.

TopTop of page - BackBack to Images - Next - ListsNext

Introduction - The Basics - Moving On - Advanced - Glossary - Reference