Linking in HTML is done with the anchor tag, the <A> tag. The letter “A” in the tag is then followed by an attribute which is the HREF. For a link to another web page, the “A” is followed by “HREF”.

Take a look at this example, which is a link to the Megatek ICT Academy website:

<A HREF = “https://www.ictacademy.com.ng”>Megatek ICT Academy</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.ictacademy.com.ng is different from this address www.ICTacademy.com.ng.

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:

Web site folder structure

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:

Creating an index.html page

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

Creating an index.html page

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:

Creating an about us web 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):

HTML code to create a hyperlink

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

A HTML hyperlink on the index page

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.

0
Would love your thoughts, please comment.x
()
x