Links

[Audio Begins] [00:02]

Ultimately, what makes the Web, the Web, is the ability to create links between content on one page and another page, whether that be in our own website, or somewhere else on the Web.

When we create a link from one page to another we’re said to be “anchoring” those pages. And this is an important concept to keep in mind because, unlike all of the other elements we’ve seen before, which have basically made sense – “p” for paragraph, “h1” for heading 1, “body” for, well, body – the element that we use to create links is actually “a”. And the “a” is short for anchor. The anchor tag is also unique amongst the tags we’ve seen so far in that it has a required attribute. This attribute is “href,” short for hypertext reference, and it specifies the path to the page to which we are linking.

Now, this path to the page requires a little bit more explanation. If we have a simple structure like this, where we’ve got two pages within the same folder, an “index.html” and a “products.html,” and we’re trying to create a link from “index” to “products,” the path to the file is simply the file name itself. So the anchor tag would be “<a href=“products.html”>.”

However, it’s a little bit more complicated if “products.html” is in a subfolder. So in this case, we have our “index.html” and in the same folder we have a “products” folder. And our “products.html” page exists within that “products” folder. In this case, our path is “products/products.html”. So we need to give the name of the folder a slash, and then the name of the file. It’s possible to nest things multiple levels of folders deep. In which case you simply do folder, slash; folder, slash; folder, slash, file – however many levels of folder you need to go.

Going back up the other direction is a little bit more complex, as well. If we’re on “products.html” and we need to get back to our “index.html”, we use this special notation of “dot dot slash”, which is simply a way of telling the computer that we want to go up a folder level.

I should mention that, personally, I try to keep the structures of my own website as flat as possible, try not to nest files multiple levels of folders deep, in large part to avoid having to do this “dot dot slash” syntax in my code.

But let’s go ahead and take a look at how to do this in our code. I’m back on the page that we’ve been working on here and the first thing I’m going to do is create a second page. I need something that I can actually create a link to. So in my editor I’m going to create a new page and I’m going to enter in the core HTML tags so that this page is a valid HTML document. So I’m putting in my head and my title. I’m simply gonna call it, “My Second Page”.

And then, within the body of the document I’m going to put a heading 1, which will also be my second page. This way, when I create the link to this page, I will be able to see that I have, indeed, gone to the page, instead of just getting a blank document. So now I’m going to to ahead and save this document. I want to navigate to the folder that I want to save this in. In this case, I wanna make sure it’s the same folder that my “index.html” exists in. And I’m simply going to call it “second.html” and then click “Save.”

Now I’m gonna go back to my “index.html” and I’m simply going to create my hyperlink here. Now my editor, Brackets, is gonna give me a code hint for any pages that are in this folder – which is kinda nice. I don’t actually have to type that, but it’s not a big deal if you need to. And then, between the open and closed “anchor” tags, I’m gonna put in some text. This text is what’s going to appear blue and underlined in my browser. So now I’m gonna go ahead and save this. I’m gonna switch to my browser and I’m going to “refresh” which is gonna cause the hyperlink to appear. And then I can simply click on this link and you can see that I end up on “My Second Page”.

Now this page doesn’t have a hyperlink. Those don’t appear by default; I need to create them myself. So I’m gonna switch back to my browser, I’m gonna go to “My Second Page” here, and I’m going to create a hyperlink back to the home page. I’ll save this, switch back to my browser. I’m already on my second page, so I’ll simply “refresh,” which will cause the link to appear. And now when I click on this link, I go back to my home page.

In this lesson we’ve seen how we can create hyperlinks between pages within our own site by using the “anchor” tag or “a” and specifying the correct file path within it’s “href” attribute.

[Audio Ends] [05:48]