Linking To Other Pages On Your Website - Home And Learn

Home and Learn: Web Design Course

Linking to other Web Pages

Linking in HTML code is done with the anchor tag, the <A> tag. The letter "A" in the tag is then followed by an attribute. For a link to another web page, the "A" is followed by "HREF". To set a bookmark in the same page, the "A" is followed by "NAME", which you'll see how to do later.

Take a look at this example, which is a link to the popular search engine Google:

<A HREF = "http://www.google.com/">Google Search Engine</A>

Notice where all the angle brackets (< >) are in the link. After the first one, we have the "A" part of the tag. Then we have the HREF part, signifying a link to another web page. After that comes an equals sign (=). After the equals sign comes the address of the web page itself. The address is case sensitive, so if there is a capital letter in the address, make sure to include it. This address www.google.com is different from this address www.gOOgle.com.

After the address comes the right angle bracket ( > ). Next comes the text that people see, the text you want them to click on. To close an anchor link, you use the end anchor tag. Which is this: </A>

But let's get some practical work done.

Open up your template text file. Click File > Save As from the menu in Notepad (or whatever text editor you are using). When the Save As dialogue box appears navigate to your HTML folder:

So we are going to save the new web page outside of the pages folder.

In the file name box, type index.html. Make sure the Save As Type area says All Files, if you use Windows. Before you click the Save button your Explorer window should look like this:

When the Save button is clicked, you should then have a web page called index.html in the HTML folder:

What we're going to do is to place a hyperlink on our index page. When this hyperlink is clicked we'll tell the browser to load a page called about.html. We'll save this new about page in our pages folder.

So, use your template text file to create a new web page. When you save the page, double click the pages folder to move inside it. In the file name box, type about.html. Then save your page:

So, we have a web page in the HTML folder and a web page in the pages folder. We now need to link them together.

Open up you code for the index.html page. Insert the following line between the two BODY tags:

<A HREF="pages/about.html">About this site</A>

Your code should look like this (we've added a TITLE):

Save your work and load the page in your browser. You should see this:

And that's a hyperlink! Notice that the only thing on the page viewable to the visitor is the text "About this site". The code we wrote turns it from normal text into a link that people can click on. The code itself was this:

<A HREF="pages/about.html">About this site</A>

So to turn text into a link you start with an angle bracket followed by the letter A. After a space, type HREF. An equal sign comes next. The page you want to link to goes between quotation marks. But notice we started with the folder name: pages/about.html. This says, "Look for a page called about.html. This page is in the pages folder".

Type a right-pointing angle bracket to end the first part of the link code. The text you want people to see comes next "About this site". To wrap it all up, you need the closing hyperlinks tag : </A>.

When you click your link, you should find a blank page loads in the browser. If you look at the address bar, you should see it says about.html on the end. You have successfully linked to a new page!

To get back to the index page, you need another link.

Open up your code for the about.html page. For the about page, we need to construct the correct HREF. We can't do this:

<A HREF="pages/index.html">Go to the Home Page</A>

The above HREF is pointing to an index page in the pages folder. But our index page is not in this folder. It is in the HTML folder, which is one folder up from pages. Just like we did for images, we can use two dots and a forward slash:

<A HREF="https://www.homeandlearn.co.uk/index.html">

Two dots and a forward slash, remember, mean "Go up one folder".

So insert the following code in your about.html page:

<A HREF="https://www.homeandlearn.co.uk/index.html">Go to the Home Page</A>

Save your work and refresh the page in your browser. Click your hyperlink on the about.html page. You should find that the index page will load. When you click the link on the index page, the about page will load.

Exercise Create a third web page. Save it in your pages folder and call it contact.html. Create a link from the index page to this new page. Create a link back from the contact page to the index page.

When you complete the above exercise, you will have two links on the index page. They might look like this:

You can use the HTML techniques you've learned so far to improve the look of these links. For example, you may want the links going vertically instead of horizontally. In which case, surround you hyperlinks code with P tags. Here's the code for two vertical links on the index page:

The result would look like this:

However, don't worry too much about the presentation for now as you'll see how to improve navigation links with CSS and HTML Lists a little later. But try this exercise.

Exercise Have two links on each of your three pages. The about.html page should have links that lead to the index page and the contact page. The conact.html page should have links to the index page and the about page.

The tricky part about the exercise above is getting the HREF part right. Just remember that when the html pages are in the same folder you only need to type the name of the page you're linking to. So this:

HREF="page_name_here.html"

instead of this:

HREF="../page_name_here.html"

or this:

HREF="pages/page_name_here.html"

You're just using the same file referencing rules that you learned in the images section.

The Target Attribute

Just like the IMG tag, the A HREF tag can take attributes. One of these is called TARGET. The TARGET attribute is used to tell the browser where you want to open the link. For example, you can tell the browser to open the linked page in a new browser window. There are several values to choose from:

_blank _parent _self _top

However, the only really useful one in HTML version 5 is BLANK. The default is SELF, so you don't need to specify a TARGET attribute most of the time. If you want the link to open up in a new window, the code is this:

<A HREF="pages/about.html" TARGET="_blank">About this site</A>

Notice the underscore character before the word "blank". Miss this out and your TARGET attribute won't work.

The other two TARGET attributes are for when your website uses something called FRAMES. Frames are going out of use, though, and are not recommended for HTML5.

Hyperlink Colours

You can set up your own colours for hyperlinks. The default is whatever the user has set in the browser, usually blue, with a blue underline. But you don't have to have blue. The A tag comes with three attributes that can help you to override the browser default:

LINK Set the colour of a link before it has been clicked on

ALINK Set the colour of a link when the link is clicked on

VLINK Set the colour of a link after it has been clicked on

The A and the V above stand for Active and Visited. You use them like this:

<A HREF="pages/about.html" LINK="red">About this site</A>

So you select the attribute you want to use, and then choose a colour for your links. This can also be a hexadecimal or RGB value.

Try them out for yourself with the links in any of your three web pages. Bear in mind, though, that people expect a hyperlink to be blue with an underline - it's a visual clue that you're linking to some extra content. Also, link colours used this way are now out of fashion. It's better to use CSS styles for your hyperlinks. You'll see how to do this in a later lesson.

In the next lesson, you'll learn about other types of hyperlinks.

<< Hyperlinks | Other hyperlinks >>

Back to the Home Page