• 20 hours
  • Easy

Free online content available in this course.


Got it!

Last updated on 11/12/18

Creating links

Log in or subscribe for free to enjoy all this course has to offer!

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 pagea.htmlto a pageb.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.

Link to Google
Link to Google

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 http://www.google.com:

<a href="http://www.google.com">Google</a>

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) inhttp://. Note that some links sometimes start withhttps://(secure websites) or other prefixes (ftp://, etc.).

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 itshttp://…… 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 withhttp://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 thempage1.htmlandpage2.html. We'll thus have these two files on our hard disk in the same folder (see next figure).

Several HTML files in the same folder
Several HTML files in the same folder

How do you make a link from page 1 to page 2 without having an address inhttp://? 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 filespage1.htmlandpage2.html.

<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 thatpage2.htmlis located in a subfolder calledcontent, as in the next figure.

The page2.html file is located in the content folder
The page2.html file is located in the content folder

In this case, the link should be written like this:

<a href="content/page2.html">

If there are several subfolders, you'd write this:

<a href="content/autredossier/page2.html">

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:

<a href="../page2.html">

Pictorial overview

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.

Relative links
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 theidattribute a tag which will then act as a reference point. It can be any tag, such as a title, for example.
Use theidattribute to give a name to the anchor. We will then be able to use it to make a link to this anchor. For example:

<h2 id="my_anchor">Title</h2>

Then just create a link as usual, but this time thehrefattribute 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>

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 />
<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.

For example:<a href="anchors.html#rollers">

... will take you to the pageanchors.html, directly to the anchor calledrollers.

Here's a page that contains three links, each leading to one of the anchors of the page in the previous example:

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

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 thetitleattribute which displays a tooltip when you point to the link. This attribute is optional.

You should obtain a result similar to the next figure.

A tooltip
A tooltip

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 addtarget="_blank"to the to<a>tag:

<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 themailtotype. Nothing changes at the level of the tag. You simply change the value of thehrefattribute like this:

<p><a href="mailto:yourname@yourisp.com">Send me an email!</a></p>

So you just need to start the link bymailto: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 downloadmyfile.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.

Summing up

  • 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 thehrefattribute to indicate the address of the target page. Example:<a href="http://www.google.com">.

  • You can make a link to another page in your website simply by writing the file name:<a href="page2.html">.

  • Links can also be used to jump to other places on the same page. You have to create an anchor with the id attribute to "mark" a place on the page and then make a link to the anchor like this: <a href="#anchor">.

Example of certificate of achievement
Example of certificate of achievement