In the previous chapter, you learned how to create a simple HTML page. Okay, it wasn't really up to much, but it was a real HTML page all the same.
As you know, a website consists of several pages. How do you go from one page to another? Using links of course! So how to create links between our pages is what we are going to learn to do this chapter.
I guess you all know what a link is: it's a text that you can click to go to another page.
You can make a link from a page
a.htmlto a page
b.html, but you can also make a link to another website (for example,
http://www.google.com). We'll see that both cases work in the same way.
A link to another website
It's easy to recognize the links on a page: they're written in a different way (as default, in blue underlined) and a cursor which looks like a hand appears when you point to it.
I suggest you try to encode a link that takes you to Google, as shown in the next figure.
To insert a link, the tag that we're going to use is very easy to remember:
<a>. However, an attribute,
href, to it to indicate the page the link should lead to.
For example, the code below is a link that leads to Google, located at the address
We're going to include this link in a paragraph. So here's how you reproduce the example in the next figure:
<p>Hello. Do you want to visit the website <a href="http://www.google.com">Google</a>?<br /> It's a good website! ;-)</p>
If you want to make a link to another site, you can just copy its address (called a URL) in
http://. Note that some links sometimes start with
https://(secure websites) or other prefixes (
The links that we have seen are called absolute links since the full address is shown. We are now going to see that we can write the links in a somewhat different way which will be useful for making links between the pages of our website.
A link to another page of your website
We have just learned how to create links to existing websites. But I'm sure you'd like to make links between the pages of your website, right?
Yes, how exactly do I make a link to another page on my website? I don't know its
http://…… address as I've only just started to create my website here! I don't have an address.
Indeed, for the time being, you're creating your website on your computer. You're the only one who can see it and it doesn't yet have a "web address" starting with
http://like most websites. Fortunately, this won't prevent us from working.
Two pages located in the same folder
To begin with, we're going to create two files corresponding to two different HTML pages. As I'm very inspired, I propose to call them
page2.html. We'll thus have these two files on our hard disk in the same folder (see next figure).
How do you make a link from page 1 to page 2 without having an address in
http://? In fact, it's easy: if both files are located in the same folder, just write the name of the file you want to move to as the target link. For example:
<a href="page2.html">. This is said to be a relative link.
Here's the code that we're going to use in our files
<p>Hello. Do you want to view <a href="page2.html">page 2</a> ?</p>
Page 2 (arrival page) will simply display a message to indicate that you've effectively reached page 2:
<h1>Welcome to page 2 !</h1>
Two pages located in different folders
Things get a bit more difficult if the pages are located in different folders. Ideally, they shouldn't be too far away from each other (in a subfolder, for example).
Let's imagine that
page2.htmlis located in a subfolder called
content, as in the next figure.
In this case, the link should be written like this:
If there are several subfolders, you'd write this:
And what if the file is not located in a subfolder but in a "parent" folder? What do you do then?
If your target file is placed in a folder that is located "higher" in the tree structure, you have to write two dots like this:
Relative links are not very complicated to use once you've understand the principle. To know how to write your link, just look at the "folder level" in which your target file is located. The next figure summarizes the various possible relative links.
A link to an anchor
An anchor is a sort of reference point that you can put in your HTML pages when they are very long.
Indeed, it may be then be useful to create a link to a point further down the same page to allow visitors to jump directly to the part they are interested in.
To create a new anchor, just add the
idattribute a tag which will then act as a reference point. It can be any tag, such as a title, for example.
idattribute to give a name to the anchor. We will then be able to use it to make a link to this anchor. For example:
Then just create a link as usual, but this time the
hrefattribute will contain a hash character (#) followed by the anchor name. Example:
<a href="#my_anchor">Go to the anchor</a>
Normally, if you click the link, it will take you further down the same page (provided the page has enough text for the scroll bars to move automatically).
Here's an example of a page with lots of text and which uses anchors (I've used any old text just to fill up the page):
<h1>>My big page</h1> <p> Go straight to the part dealing with:<br /> <a href="#kitchen">The kitchen</a><br /> <a href="#rollers">Rollers</a><br /> <a href="#archery">Archery</a><br /> </p> <h2 id="kitchen">The kitchen</h2> <p>... (lots of text) ...</p> <h2 id="rollers">Rollers</h2> <p>... (lots of text) ...</p> <h2 id="archery">Archery</h2> <p>... (lots of text) ...</p>
If nothing happens when you click on the links, this means that there is not enough text. In this case, you can either add any old text to the page so that it has (even) more text or reduce the size of your browser window to display the scroll bars on the side.
Link to an anchor located in another page
OK, be warned. This is really going to be a megamix!
The idea is to make a link that opens another page AND that takes you directly to an anchor located further down on this page.
In practice it's fairly simple to do: just type the page name, followed by a hash character (
#), followed by the anchor name.
... will take you to the page
anchors.html, directly to the anchor called
Here's a page that contains three links, each leading to one of the anchors of the page in the previous example:
<h1>Megamix</h1> <p> Reference somewhere on another page:<br /> <a href="anchors.html#kitchen">The kitchen</a><br /> <a href="anchors.html#rollers">Rollers</a><br /> <a href="anchors.html#arc">Archery</a><br /> </p>
Practical examples of using links
Here, I'm going try to show you a few practical examples of using links. For example, did you know that it's very easy to make links that start a download? That create a new e-mail? That open a new window?
No? Well, we're going to have a look at all that here.
A link that displays a hover tooltip
You can use the
titleattribute which displays a tooltip when you point to the link. This attribute is optional.
You should obtain a result similar to the next figure.
The tooltip can be useful in providing visitors with information even before they have clicked the link.
Here's how to reproduce this result:
<p>Hello. Do you want to visit <a href="http://www.google.com" title="Some say it's a search engine">Google</a> ?</p>
A link that opens a new window
A link can be "forced" to open a link in a new window. To do this, you add
target="_blank"to the to
<p>Hello. Do you want to visit <a href="http://www.google.com" target="_blank">Google</a> ?<br /> The website will be displayed in another window.</p>
A link to send an email
If you want your visitors to be able to send you an email, you can use links of the
mailtotype. Nothing changes at the level of the tag. You simply change the value of the
hrefattribute like this:
<p><a href="mailto:firstname.lastname@example.org">Send me an email!</a></p>
So you just need to start the link by
mailto:and enter the email address at which you can be contacted. If you click the link, a new blank message opens, ready to be sent to your email address.
A link to download a file
Many of you must be wondering how this works for downloading a file... In fact, the procedures is exactly the same as for linking to a web page, but this time indicating the name of the file to be downloaded.
For example, suppose you want to download
myfile.zip. Simply place this file in the same folder as your web page (or in a subfolder) and make a link to this file:
<p><a href="myfile.zip">Download the file</a></p>
That's all! As the browser sees that there is no web page to be displayed, it will start the download process when user clicks on the link.
Links are used to move from one page to another and are as default in blue underlined text.
To insert a link, use the
<a>tag with the
hrefattribute to indicate the address of the target page. Example:
You can make a link to another page in your website simply by writing the file name:
Links can also be used to jump to other places on the same page. You have to create an anchor with the
idattribute to "mark" a place on the page and then make a link to the anchor like this: