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.
- My first webpage
This part of the tutorial explains the basics of HTML to set up your very first web page.
- My first webpage - adding content to the body
This page shows you how to add text to your first web page.
- My first webpage - designing your text using bold and italic
This part of the tutorial explains how to use simple HTML commands to add some design to your text.
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
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.
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.
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.
getmarbleworktops on May 13, 2016:
This is really detailed for someone who don't know anything about HTML.
Though good job.
topdude155 on November 03, 2015:
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.
Rota on January 23, 2015:
wow, this is a detailed and useful hub!
smga22 from Dhaka, Bangladesh on May 16, 2014:
Nice Hub. Thanks for Sharing.
Eshrak Ahmed on October 30, 2013:
this command didn't work with me
YUNO on September 23, 2012:
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.