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.

report this ad

Back to the Home Page