Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this chapter we're going to focus on creating links. Without links there would be no world wide web, so it's really hard to overstate exactly how important they are to HTML. Well, thankfully, links are also incredibly easy to create. So to demonstrate that I have three files open right now: I have the links.htm, the mid_level.htm and bottom_level.htm files open. And it's important that we discuss the directory structure of where these files are as we begin looking at the syntax for creating links. So, these are in the 04_01 directory, and you'll notice--and I'm just going to close these, because we can kind of see the structure little better-- directly in the 04_01 directory we have two files: we have links and same.htm.
Now we also have this folder right here called resources and if I open that up, I can see the inside resources there's another file called mid_level.htm, but there is also another directory called links, and if I open that up that's where bottom level is. Now, this is important because websites are really nothing more than a collection of files and folders, so just directory structures. And in order to link from one page to another in your site, you have to understand the relationship between the current page and the page that you're wanting to link to. It's very, very important. So before we dive too much deeper into that, let's take a look at some sample link syntax.
If you look on the page here at links, there is an existing link around this text right here that says same directory. So to create a link we use the a, or anchor, tag. Now the anchor tag has to have both an opening and closing tag. The closing tag is very important. What you do is you wrap the anchor tag around any string of text or object, like an image or really anything else, that you want to be a clickable link. So anything that's inside this link tag is going to be considered a link, a clickable link. Now, the functionality of the link is driven by its attributes, and the most important attribute when creating links is the href attribute, so it's the first one we see right here, href.
So basically, the href attribute tells the browser where to find the file that you're linking to. Now, in this case we're linking to the file same.htm. Now, essentially, what that means is, since there is nothing else there other than the name of the file we want to link to, that's telling the browser or the user agent that, hey, this file could be found in the exact same directory that I'm in, and you can see links in same or indeed right beside each other. Now, this path that we have here to the file, often you're going to hear me referring to resolving a link, and essentially the browser uses that path to resolve the link, meaning where do I need to go? So it's really just giving directions to the file that you want to open up.
Now we also have a title attribute. Now this title attribute is optional, but it's always a good idea to put it in, because what you're doing is you're giving a little bit more information about that link, which can be very helpful to user agents like screen readers where somebody with in assistive device might want more information about where this link is going to go. So now that we know some of the basics of link syntax, let's go ahead and start creating some of our own links, and while we're creating them, let's take a look at how we navigate through directories within a site structure. Okay, so the first thing I want to do is I want to link this text, Nested directory, to a page that's maybe a couple directories down, so let's take a look how we would do that.
So I'm going to go ahead and start off by creating an a, or anchor, tag, and then right after that I'm going to go ahead and open up the href attribute. In quotation marks here, I'm going to go ahead and type in the path to the page that I want. Now, in this case I would like this to link to the bottom level.htm. Now, that's actually two folders down, so I have to give it directions on how to get there. So the first thing I'm going to do is I'm going to tell it to go inside the resources directory, so go inside the resources directory, and then you're going to see a forward slash. Now let that forward slash is saying is now find the resources directory and then go inside it.
We have to tell it what to do once it inside of it, and it needs to find the links directory now. So then we're going to type in links and another forward slash. So again, this is the way of saying go inside this folder, find this folder, and then go inside that. Once it's inside the links folder, all we need to link it to is bottom_level.htm, so bottom_level.htm. Now I'm also going to go ahead and give this a title, and the title I'm going to give this one is two levels down, just to remind myself how many directories I am going through.
You always have to remember to close that A tag. Now again, because you opened it inside the paragraph you have to close it before the paragraph closes. So I'm going to go ahead and save that and if I preview this in my browser, now when I click on nested directory, you can see it's linking to that bottom-level directory. So now that we know how to go down a directory, let's take a look at how we go back up. So I'm going to switch over to the bottom_level. htm. Here I have two lines of text that I want to link to. I want to link up one level and then I also want to link up two levels. So the first thing I want to do again is wrap this in an anchor tag and I'm just going to use the href attribute.
When you want to go up a directory you don't pass the name of the directory in, because that would be confusing. The browser would look for that directory to go down. It thinks you want to go down. So in order to go up a directory, you have to use the characters ../. ../ slash harkens back to the days of DOS if you'll navigating around command line structures, it's basically saying hey go up a directory. In this case since we're in links, that's going to take us up into resources. And here we could find mid_level.htm. We'll also go ahead and get that a title, and we'll just say up one level.
We have to remember to close that out. The same way that there's really no limit to how many directories you can go down, there is no limit to how many directories you can go up either. So, in the text below that, I'm actually going to go ../ to go up a directory and then ../ to go up one more. That's going to take us from links into resources, into 04_01. And it's here that I can find links.htm. Now, remember here, I need to do a title as well, and I'm just going to say for this one up two levels.
Then I've got to remember to close that out and then close my opening links tag. If I save this and test this page, now if I click up a level that's going to take me to just the mid_level directory, but if I click up two levels, that's going to take me to the top-level page. Now, overall, this link syntax is pretty easy to grasp. It's also worth noting that you can wrap links around almost any HTML content. It's not uncommon, for example, to wrap a link around an image to make an image a clickable link.
Now, prior to HTML5, you needed to keep anchor tags within block-level elements like paragraphs and headings and things like that, but in HTML5 that was changed to allow anchor tags to wrap around entire sections of content. Well, this in theory allows you to create clickable sections, but implementation is little uneven, so if you want to experiment with that, use that approach carefully.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.