In the previous chapter, we learned how to build a basic HTML page.

But a website is more than a single HTML page. You could make the point that what defines a website is the presence of a collection of related web pages.

Get that? Multiple web pages.

And how does one go from one web page to the other? Through hypertext links of course.

You click on a certain piece of text and you're magically transported to another page. It's no exaggeration to say that hyperlinks are the backbone of a website.

Luckily, creating text links is a standard and easy to learn HTML practice.

There are two types of text links in HTML and we'll cover them both in this chapter.

You can create a link from page a.html to page b.html (relative link) but you can also create a link to a completely different website such as http://www.siteraw.com (absolute link).

Both work in a very similar fashion.

Relative or absolute?

As I briefly mentioned in this chapter's introduction, there are two types of links:

• Relative links are links internal to one's own website, pointing for example from page a.html to page b.html.
• Absolute links are links to an external site, pointing for example to http://www.siteraw.com.

Remember the distinction between absolute and relative as these terms are used for more than just text links.

Each time you have to deal with paths and the file system, you can bet that you'll encounter the relative/absolute dichotomy.

Ready to start creating links?

Absolute links

Let's start with absolute links.

It's easy to recognize a hypertext link on most web pages as they are intentionally formatted to stand out from the rest of the text (in blue and underlined by default).

Let's append a link to the demo page we built during the last chapter.

You can see the link in blue at the bottom of the page.

So how do we insert hyperlinks in HTML?

All we need to create links in HTML is one tag: <a>.

The <a> stands for anchor, which we'll talk about in a few moments, but it's mostly known as the hyperlink tag.

To insert a link on your page, simply enter the text you want to transform into a link between the <a> tags.

In our case the linked text in "SiteRaw".

<a>SiteRaw</a>

Feel free to change the text if you want.

That's because we haven't specified the destination of our link yet.

If you think about it, a link needs to have at least two components: the element linked (in our case the text "SiteRaw") and the link destination (what we need to add).

To do that we'll use a specific HTML attribute.

Remember attributes? We introduced them in the second chapter but haven't used them since.

The attribute we need to indicate the destination of our link is href, which stands for hypertext reference.

And don't forget the rule for using attributes: they are placed on the opening tag and not on the closing tag.

Let's complete our link by adding a href attribute and having our text point to http://www.siteraw.com.

<a href="http://www.siteraw.com">SiteRaw</a>

Links should should generally be used in paragraphs so we're going to add some text around it.

<p>Just visit <a href="http://www.siteraw.com">SiteRaw</a></p>

And that's the exact code used for the example given at the beginning of this chapter.

Let's move on to relative links.

Relative links

We learned how to link to an existing website, now all we need is to be able to create links between the pages of our own site.

To do this we will be using relative links.

Don't worry, you can still use links even without having a web address.

Your website is currently stored on your computer and only you can see it.

We'll discover how to send it online and make it accessible to everyone in the world further on in this tutorial.

But for the moment we'll make do with what we have.

Over the course of this tutorial we've created one HTML page (called index.html or whatever else you named it).

As we said in the introduction, to qualify as a complete website you need at least two pages so we're just going to create another page in the same directory. I called it siteraw.html.

In Brackets, just go to File > New and save your new file in the same folder as your first page.

Here is what you should have in your file explorer.

All that's left to do is create a link from index.html to siteraw.html.

Very easily.

Since both files are in the same directory, just take the code we used in our previous example and replace the value of the href attribute by siteraw.html (the name of your destination page).

Whatever names you use for your HTML files, one page will be the linking page and the other will be the destination page.

In our case, index.html will be linking to siteraw.html.

Here is the code for index.html.

<p>Want to visit <a href="siteraw.html">SiteRaw</a>? It's an awesome website!</p>

And the code for siteraw.html.

<h1>Welcome to SiteRaw</h1>

The linking page (index.html) contains a link to the destination page (siteraw.html) which simply consists of a message indicating that you've arrived on the right page.

Try it out.

Pages in different folders

Now you know how to create relative links. Or do you?

There are still one or two points to cover.

Good point.

Things are slightly more difficult when your pages are in different folders but it's still quite simple.

Let's revise our example and imagine that rather than being in the same directory as index.html, the page siteraw.html is in a folder called siteraw.

I know I'm very creative with my appellations so here's a visual aid.

Inside the siteraw folder is the same file siteraw.html as before, its content hasn't changed.

So how do we create a link from index.html to siteraw.html?

Just add the name of the folder before the name of the file in the href attribute.

<a href="siteraw/siteraw.html">SiteRaw</a>

And what if there were several folders separating them?

Instead of having to go siteraw > siteraw.html, what if you had to go siteraw > folder > siteraw.html?

Same method, just add the names of the folders separated by slashes.

<a href="siteraw/folder/siteraw.html">SiteRaw</a>

If your destination page is placed "higher" in the tree structure, simply write two dots .. for each directory you want to "climb".

<a href="../siteraw.html">SiteRaw</a>

We've now seen both types of links, absolute and relative, and learned how to operate them with HTML.

But there is still one more practice to learn about.

Linking to anchors

At the beginning of this chapter I told you the <a> tag stood for "anchor".

Although it's used far more often to create hyperlinks, we're about to introduce an alternative use of this HTML tag.

An anchor is a reference point you place somewhere on your page that allows the user to jump directly to the desired content.

Think of it as the unofficial third type of link, a link to content within the same page.

Anchors are useful when your page is very long and you want to organize it in a way that provides rapid access to the user.

To create an anchor we first need to create an anchor point, and for that we'll use the attribute id.

The anchor point is the area on which the visitor will land once he clicks a specific link on the page.

You can place the id attribute wherever you want: on a <p> (paragraph), on a <ul> (list) or on a <h2> (title).

In our example we will go with the the title tags.

<h2 id="siteraw">Welcome to SiteRaw</h2>

I used the value "siteraw" for the id attribute but you can change it to something else.

The only rule is that every id must be unique.

Now that we created our anchor point all that's left is to add a link to it.

These anchor links are identical to regular links except that their href attribute doesn't point to another page but to the id of an anchor point, preceded by a hash character (#).

In our case it would give us the following.

<a href="#siteraw">Go to the SiteRaw</a>

Just place the link anywhere above the anchor and you can now travel directly to the content you want.

That's because you haven't added enough text between the link and the anchor.

Here is our demo page updated with anchor links.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SiteRaw</title>
    </head>

    <body>
        <h1>Welcome to SiteRaw</h1>

        <p>Discover why SiteRaw is:</p>

	<ul>
            <li><a href="#awesome">awesome</a></li>
            <li><a href="#amazing">amazing</a></li>
            <li><a href="#siteraw">SiteRaw</a></li>
        </ul>
        <!-- Remember lists? -->

        <h2 id="awesome">Why SiteRaw is awesome</h2>

        <p>[...]</p>

        <h2 id="amazing">Why SiteRaw is amazing</h2>

        <p>[...]</p>

        <h2 id="siteraw">Why SiteRaw is SiteRaw</h2>

        <p>[...]</p>

    </body>
</html>

Replace every instance of [...] with (a lot of) text and you should see the effect in action.

You will have to add a sufficient amount of content to see the vertical scroll bars appear on your browser, so depending on your screen resolution you may need more or less text. Usually more.

Alternatively, you can reduce the size of your browser window to make the scroll bars appear.

Here is what your text editor should look like at the moment.

Anchors on another page

As we saw, anchors are useful to navigate quickly to a specific section of a web page.

But you can also use them in conjunction with regular links.

The idea is to have a link that opens another page and takes you directly to an anchor on that new page.

To do this just enter the name of the destination page followed by the name of the anchor with the hash character (#) in front of it.

<a href="siteraw.html#siteraw">SiteRaw</a>

This link will take you to the page siteraw.html and to the anchor called siteraw.

These are the three types of links we discovered in this chapter:

• Absolute links which point to another site (simplification)
• Relative links which point to a page on our site
• Anchor links which point to specific content on a web page

Since we know how to create multiple pages and link them together, we now officially have a complete website.

But don't worry as there is much more to learn about in this tutorial.