Links make the Web what it is. If you're new to Web building and you're not sure how links work, this tutorial is for you! Read on...

What is a Link?

A link is a piece of text or an image in a Web page that, when clicked on, takes you to another Web page or other content. Links are often underlined and sometimes blue, but not always! On our site the links are yellow. For example, see the menu links at the top of this page.

By linking your pages together like this, you can build a whole Web site. You can also link to other sites on the Web using the same technique.

The word 'link' is short for 'hyperlink', a term used to describe linking documents together.

How to Make a Link using HTML

The HTML tag that you use to build links is called the <A> tag. ('A' is short for 'Anchor', by the way. More on that later!) Here is some HTML to build a link to the Google search engine:

<a href="http://www.google.com/">Visit Google</a>

Here is how the above HTML code looks in the page. Try clicking on it! (Use your browser's "Back" button to return to this page.)

Notice that there are several parts that make up this link. Let's take a look at these parts now.

<a href="http://www.google.com/">

This tag tells the browser that we want to start a link at this point in the page, and that we want the link to point to http://www.google.com/. The text between the quotes (http://www.google.com/) is called a URL.

(Handy tip: You can get the URL of the page that you want to link to by browsing to that page in your Web browser, then copying and pasting the URL from the address bar at the top of the browser window.)

Visit Google

This is the text that we want to turn into a link.

</a>

This closes the link. It's very important to remember to put the </a> tag at the end of your link, otherwise the rest of your Web page will become one long link!

Linking with an Image

The above example used a piece of text (Visit Google) for a link. In fact you can put anything you like between the <a href="..."> and </a> tags. Here's an example that uses an animated button image for the link:

<a href="http://www.google.com/">
<img src="click_here.gif" border="0" alt="Click Here">
</a>

Linking to an Email Address

You can also make a special type of link that links to an email address. When clicked on, the link opens the visitor's email program so that they can send an email message to that address. This is often called a mailto link. For example:

<a href="mailto:joebloggs@joebloggsdomain.com">Email Joe Bloggs</a>

Here's that link in the page. Try clicking on it!

You can even set up the link to use a default email subject, as follows:

<a href="mailto:joebloggs@joebloggsdomain.com?subject=Email from
a Visitor">Email Joe Bloggs</a>

Try clicking on this link, and you should see your email compose window appear with the email subject pre-filled:

Linking Within the Page

You can even link to another point on the same page! This is very handy if you have a long page that you'd like people to be able to navigate around. For example, you might have an FAQ page with a list of links at the top of the page that jump to the relevant questions.

So how is this done? If you remember, earlier we mentioned that the 'A' in the link tag stands for 'Anchor'. When you link two things together on the Web, each of those things is called an anchor. The source anchor is your link tag, and the destination anchor is usually another page, or some other content.

However, it's possible to define an anchor at a certain point in a Web page, then link to that anchor. Here's how it's done. First, we define the anchor that we want to link to:

<a name="fruit-bats">Here's a bit of info on fruit bats</a>

Notice how we've given the anchor a name ("fruit-bats").

Then, we can link to this anchor from elsewhere in the page by placing a # in front of the anchor name, as follows:

<a href="#fruit-bats">Find out about fruit bats</a>

Clicking on this link would take you to the "fruit-bats" anchor.

Here's a real-world example. At the top of this page, we've made the "Making Links" heading an anchor, as follows:

<a name="top-of-page"><h1>Making Links</h1></a>

We can link to this anchor now, like this:

<a href="#top-of-page">Top of the page</a>

Try it now - click on the link below. To return here, scroll down the page again, or click your browser's "Back" button.

Top of the page

You can also link to an anchor within another page. For example, the following HTML links to one of the questions on our PageKits.com FAQ page:

<a href="http://www.pagekits.com/faq/#howbuy">How do I
buy a PageKit?</a>

Try it out if you like by clicking the link below. (Use your browser's "Back" button to return here.)

http://www.websitedesignersrus.com

Linking in a New Window

You can make a link open in a new browser window by using the target="_blank" attribute, as follows:

<a href="http://www.google.com/" target="_blank">Visit Google</a>

Click on the link below to see it in action:

Visit Google

(It's worth pointing out that opening everything in a new browser window can be annoying for visitors to your Web site, so use this feature sparingly and where appropriate!)

Happy Linking!

Now you know how to link to other Web pages, how to link to an email address, how anchors work, and how to link to pages in a new window. You're all set! Have a go at adding some links to your own Web page. Enjoy!