My first webpage - How to make a link to another page?

In the first lessons of this tutorial you have learned how to set up a basic html web page. The power of the internet however lies in the possibility that you can connect pages with each other. It is possible to make a website that has just one page. It can even be interesting in some cases to make a website that has just one page. But in general what makes a website a true website is that it is a collection of pages which are connected together.

To connect one page with another page, you use a link.

A link in its most simple form is a word or a phrase (a group of words together) on which you can click. If you click on it, you will be taken to another page.

In other words, a link is a word on your website, inside the text or, for example, below the text, which is 'linked' with another page. You could compare it a little with footnotes. Only, with a link, compared to footnotes, you don't put the number behind the word to point to the extra background information, but you connect the word directly to a new page with the background information.

In this tutorial I will show you the most basic way to make a link. If you understood the part about making text bold and italic, then creating a link should not be difficult.

Create a second page

In order to create a link from one page to another page, we first need to make a second webpage. So, before I will explain you how to make a link, first you will need to start all over again:

Create a new page, completely from scratch. Follow all the steps again from the first section of this tutorial. Start with a new, empty file in notepad (or the editor that you used before) and start typing again all the basic HTML commands: <html> </html> etc.

After you have typed all the basic commands, add a title and add some text to the body.

It doesn't matter what you type in the body. After you have finished typing the HTML, you need to save this file with a different name than the first web page!

For example, you can save it as second.html or you can save it as page2.html. Don't forget to add .html at the end of the filename. It is important that you save it in the same folder, in the same location, as where you put the first file.

Return to the first part of this tutorial if you are not sure anymore how to make a basic webpage.

Create a second page

Before making a link, first create a new HTML page.
Before making a link, first create a new HTML page.
Start by typing the basic HTML code into a new editor window.
Start by typing the basic HTML code into a new editor window.
Save the file with a different name that the first page. For example save it as 'second.html'.
Save the file with a different name that the first page. For example save it as 'second.html'.
The file is now saved. If you like you can add a text to the body of the second page.
The file is now saved. If you like you can add a text to the body of the second page.
You can add a text to the body by typing something after &lt;body&gt; and before  &lt;/body&gt; .
You can add a text to the body by typing something after <body> and before </body> .
Simply select 'save' to save the page again with the same name. You don't need to select 'save as' again if you have already saved the page before.
Simply select 'save' to save the page again with the same name. You don't need to select 'save as' again if you have already saved the page before.

Return to the first page

If you want to make a link from the first page to the second page you will have to add HTML code to the first page. Creating a link from the first page to the second page means that you will create the link on the first page, so that the user can click on the link on the first page to go to the second page.

To create a link on the first page means that you need to make changes to the HTML code of the first page. To be able to add text and HTML code to the first page, you must open the first page in the editor, in notepad. The easiest way to do so, is to first start the program, the editor, notepad, and then open the file via 'File open' from the top menu. You should select 'All files' at the bottom in order to see the .html files. Otherwise you will see just the .txt files.

Another way to open the file with notepad is to click on the file with the right mousebutton and select 'Open with' from the popup menu. Then select 'Notepad' from the list of possible programs.

On a Macintosh this works a little different. I plan to write another Hub especially for working with simple HTML in TextEdit on a Mac. Contact me if you need help with this.

Return to the first page to make a link from the first page to the second page.
Return to the first page to make a link from the first page to the second page.
First add a text to the page which you will turn into a link, a text or a word on which the user will be able to click.
First add a text to the page which you will turn into a link, a text or a word on which the user will be able to click.

Creating a link

To create a link you use the command 'a'.

'a' comes from anchor.

The command 'a' is used in the same way as the command 'b' (for bold) and the command 'i' (for italic). (You can read here how to use '<b>' and '<i>'.) 'a' follows exactly the same pattern as the other HTML commands. You put <a> in front of the word which you would like to turn into a link and </a> after the word or words.

It looks like this:

Click <a>here</a> to go to the next page.


In this example the word 'here' will turn into a link to the next page.

Use &lt;a&gt; and &lt;/a&gt; to turn a word or a text into a link.
Use <a> and </a> to turn a word or a text into a link.
Add href="filename.html" to the command   to tell the browser which page should be loaded when the user clicks on the link.
Add href="filename.html" to the command to tell the browser which page should be loaded when the user clicks on the link.

Making a link with 'a' and 'href'

If you open the page with the HTML of the example before, nothing will happen... There is no link! There is a simple reason why the link is not working. We didn't tell the browser yet, where the link should take us. We didn't add the name of the page which should be loaded when the user clicks on the link. This information, where we want the link to go, is extra information for the command 'a'. This means that the command is still 'a', but we are adding an extra option to the command. In this case we will add 'href' to the command 'a':

Click <a href="">here</a> to go to the next page.

href comes from 'hyper reference' (or at least that's what I think that it comes from, that's how I remember the characters 'href') Between the quotes "" you write the filename of the page where you want to link to. It is important that you write the name how you saved the page on your computer. The filename is not the title of your page. It is the name that is used in the system of the computer, the name that you typed when you saved the page. In my example it is: second.html.

Click <a href="second.html">here</a> to go to the next page.


You must include .html when you type the name. The extension .html is part of the filename.

It is also very important to notice that the end of the command 'a' stays the same.

</a> doesn't change!

</a> is still the end of the command 'a'. </a> closes anything that is inside the command that starts with <a >. </a> never changes. It is always </a> !!!


Create a link back

Your link should work now. If it doesn't work, leave a comment at the end of this page and I will try to help. To continue practising how to make links, you should now make a link on the second page back to the first page. Try to figure out how to do it!

The best way to learn it, is to figure it out yourself. It will take a little more time than when I explain you how to do it, but if you manage to do it by yourself, you will not so easily forget anymore how you did it! And if you manage to do it by yourself, it also means that you really understand what you are doing. If you don't manage though, then don't worry to leave a comment below and I will try to help you.

More by this Author


Comments 6 comments

YUNO 4 years ago

Why didn't you just tell the browser while we were doing all the other work trying to get the link to connect from the first page to the second page and back, you've made it harder for me to understand this step and i am having trouble with it. didn't really understand why you didn't just say it all in the first place.


Eshrak Ahmed profile image

Eshrak Ahmed 2 years ago

this command didn't work with me


smga22 profile image

smga22 2 years ago from Dhaka, Bangladesh

Nice Hub. Thanks for Sharing.


Rota profile image

Rota 20 months ago

wow, this is a detailed and useful hub!


topdude155 11 months ago

You have to make sure that both of your files are in the same folder, or that you indicate in your code the path of your second webpage.


getmarbleworktops profile image

getmarbleworktops 4 months ago

This is really detailed for someone who don't know anything about HTML.

Though good job.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working