Adding Hyperlinks to your 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". You'll see how to do that later. First, we'll explore how to add links to your other web pages.

How to Link to other pages on your Web Site

This 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>

Let's get some practical work done.

• Load up your HTML Editor and create a New web page
• Click inside the two body tags, so that the cursor is flashing there
• From the menu bar, click on Insert > Link > Target Hyperlink. The hyperlink dialogue box appears:
  
  

We'll get on to the Target part of the dialogue box shortly, but what the screen is asking you for is the name of the web page that will appear in the browser when the link is clicked. In other words, the link itself.

Actually, there's a good chance that your link didn't work! That's because the HTML editor uses Relative referencing for hyperlinks. This will be a lot better for you, when you come to upload your web pages on the internet. If Absolute Referencing was used, your links would be like this:

C:\Webpages\links.html

That would be no good on the internet, for the obvious reason that the other person's browser would look on that person's computer for the web page that you created.

So a Relative Reference is used. The relative reference in the example was this:

"page1.html"

With this type of reference, the browser will look for the web page in the same folder that you saved your work to. If page1.html is not in this folder, the browser won't look anywhere else. It will just give you an error message.

To solve the problem, either copy the page you're linking to in the same folder as your current web page, or type in the absolute reference.

Another solution is to use the forward slash before the web page, and precede that by the name of a the folder where the web page is. Like this:

"Sites/page1.html"

Now, the browser will go up one folder from where the current web page is, and look for a folder called "Sites". It will then search this Sites folder for the page called page1.html

To illustrate this graphically, take a look at this:

This is showing all the files and folders inside the folder called WebPages. We have two folders inside the WebPages folder: Backgrounds and Sites. Four .html files are showing and two JPEG image files. The page with our newly-created hyperlinks on it is called Links.html . The link itself, the one the HTML editor inserted, was this:

"page1.html"

With Relative Referencing, the browser will look for this page in the same folder as our Links.html page. This page is in the WebPages folder. There are only three other web pages in this folder: backimages.html , mrangry.html and TextColour.html . The browser won't look anywhere else for page1.html. It won't search the Backgrounds folder and it won't search the Sites folder. However, if the link was this:

"Sites/page1.html"

Then the browser would look for a folder called "Sites". But it will only look for this folder inside the WebPages folder , the folder where our current page is, Links.html .

But there is a folder called Sites, so the browser will search that folder for a page called page1.html. If the page is there, we have a successful link; if it's not there, the browser will give up searching and return the error page.

The simplest solution for you is to save all your web pages and images into one folder. Then when you're inserting a link to another web page, link to one of these web pages in the folder you create. That way, all your links will work.

For an absolute reference, we could have used this:

<A HREF = C:\Webpages\page1.html>My Text</A>

You can do that kind of thing as well. But careful where you're pointing: if you upload a link like that to the internet, it won't work. And if you send in work to be marked with a link like that, the link won't work, and you'll get your Review sent back for you to try again.

How to Link to Web Pages on the internet

The code for a link to somebody else's web page that is on the web is similar to what you've just used. This time, you just add the web site address as the link. Like this:

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

A quick way to insert a Hyperlink using your HTML editor is this:

<A HREF = ""></A>

Type your link between the two double quotes. The text that people click on then goes between the angle brackets ( > < ).

In the next part, we'll take a look at some other linking options: Bookmark links, and Target links.

<-- Back One Page Move on to the Next Part -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses