Linking to pages within your own site is probably the most common use of
the anchor element, while links are fairly simple to create.
You do have to understand how they're resolved in
order to create your links properly.
So in this exercise, I want to take a look and
how to create internal links within a site.
Now to do that,
we're going to use a number of files within the 05 underscore 01 directory.
And I want to show you that directory structure before we begin creating links,
so we understand which pages we're going to try to link to other pages.
We have a finished files directory that,
of course, has a copy of all the completed files in it.
We can ignore that one for the purpose of this exercise.
What we're interested in are the files links and same.
So, links.htm and same.htm are in the same directory.
And then there's another directory here called info.
And if I open that up, I can see that it has a file called about.htm inside of it.
And another directory nested inside of it called extras that
contains the file resources.
So throughout this exercise,
we're going to be linking all of these pages together.
That's going to require us to understand how to resolve a link from one
file to another.
Now the reason that I have two nested folders here is I wanted to sort of
reproduce some of the directory structures that you'll find on your own website.
It's pretty common for websites that have multiple directories and subdirectories.
So a lot of times, you're going to have to code a link to go from one page to
another page even if it's up or down through separate directories.
So it's nice to understand kind of how all that works.
So now that we understand how all the files and directories are structured.
We can go about creating our links.
So I'm going to go ahead and hide that finder window and
go into our first file, which is links.htm.
We can see, we have a headline that says, linking to pages within your sites.
We have another subheading that says, Top Page and
then we have two paragraphs that are asking us to create links.
The first one wants us to link to the same.htm page,
which will be found in the same directory.
And the second paragraph wants us to link to the resources page,
which is found at a nested directory.
So, we've already talked a little bit about the link syntax, the anchor syntax.
So we sort of understand that in order to create a link,
we're going to use the anchor element.
So, I'm going to go ahead and open up an a tag.
Now I'm going to wrap this around just the text, same.htm.
So I'm not going to make the whole paragraph a link, just that one page name.
So once I have my anchor tag.
In order to resolve a link, I need a href attribute.
So after the anchor tag character, I'm going to create a href attribute.
And for this one, I'm going to go to the same.htm.
Now brackets is a wonderful program and it's trying to help me.
It's saying, oh, you're trying to make a link.
But let me help you resolve that.
I'm going to ignore code hinting for typing in these link, so
that you guys can see exactly where we're going here.
When you're linking from one page to another in the same directory,
you don't need anything other than the name of that file.
So in this case, I'm going to type in same.htm and that's it.
Now, I'm going to give each of our links one more attribute and
that's the title attribute.
And I want you to get into the habit of using a title.
The title should be a descriptive text about where this link is going to go.
That way, any time there's a screen reader or another assistive technology device,
it can actually give a little bit more information about the link.
So that the user knows, whether or not they want to click that.
And I'm just going to type in link to page in same directory.
Then I close the opening a tag.
And of course, an anchor element has to have an opening and a close tag.
So I'm going to wrap that all the way around the same.
So, you can see right there, a href same.htm.
Title link to page in same directory and it's wrapping that text.
If I save this and preview this in the browser, I can see that.
When I click on same.htm, it's taking me to the same page.
Perfect.
Now the next task is to go to the resources.htm page.
And I first have to understand the path to this.
Now the type of links that we're talking about here are referred to
as document relative links.
That means that the path to them is relative to the file in
which they're found.
So from where I am right now to where I want to go.
So in order to get to that page from here, I have to go into the info directory.
And then into the extras directory.
And then finally, find the page.
All right.
So I need to create another anchor element here.
I'm going to use the href attribute.
And what I want to do now is I need to go first into the info directory.
So I'm just going to type in I-N-F-O, the name of the directory comes first.
And then to tell it to go into the directory, we do a forward slash.
So it says, find the info directory.
Go inside of that.
Now we need to find the extras directory, so
I'm going to type in extras and then another forward slash.
So I'm saying, hey, find the info directory.
Go inside of that.
Inside that, find the extras directory and go inside of that.
And now, I can tell it to find the individual page.
So when we're drilling down, we use the name of the directory, a forward slash and
then the name of the page.
In this case, we're going down two directories.
All right.
I'm going to give this a title attribute, as well.
And the title attribute is going to be down two directories.
And don't forget to wrap both in opening and a closing anchor element.
So I save this.
Go back in file and now when I click on resources, it goes to Resources.
So now, let's go to our about page and
resources page and complete a couple links there.
We'll go ahead and do these links first and
then we'll test it to see if they're all working.
All right.
So I'm on the about.htm page.
And this time,
it's asking me to link back to the links page first and then to the resources page.
Now links page presents me with an interesting problem.
When I go down into a directory, all I have to do is name the directory and
then pass a forward slash to let it know that I want to go inside of it.
But what if you want to go up a directory?
That's a little bit different in terms of syntax.
So, let's go ahead and create an anchor element.
Let's do an href and what I'm going to do is I'm going to do, dot,
dot, forward slash.
So dot, dot, forward slash essentially tells the browser or
user agent, I want to go up one directory and find something.
In this case, I'm just going to go up a directory outside of
the info into the parent directory of the 05 underscore 01.
And there, I'm going to find links.htm.
All right, after that, I'm going to do a title.
And that title's going to be up one directory.
So I'm really just not being descriptive of the page,
which I would normally do in a title.
Here I'm being descriptive of the links to sort of reinforce the document relative
path that we're taking.
Save that.
And now resources,
you probably have a good idea as to how this one needs to be resolved.
So for resources, I'm going to do href attribute and
then we need to go into the extras folder.
So I'm going to do extras forward slash resources.htm.
I'll do another title here and this title will be down one directory.
Don't forget to wrap the entire thing in an anchor tag.
We have a setting in contrast here.
One is going up a directory, dot, dot, forward slash.
The other one is going into the extras directory, looking inside of that for
the page resources.htm.
And both of those are relative to the about page,
which is sitting in the info directory.
Now finally, we're going to go to resources.
Resources are what we called a bottom-level page.
Meaning, it's in the deepest nested directory.
So any link that's going outside of its directory at all, it needs to go up first.
What we're going to do is well first go to the about.htm page.
And here, we're going to do an a href.
And remember, we need to go up a directory so that's dot dot forward slash.
And in this case, we're just going to go up and choose the about.htm.
So we don't have to name the directory at all.
We're just going up one directory and then find the file inside of it.
We'll give that a title attribute.
And I'm going to say up one directory.
Okay.
That's pretty easy, we did that earlier.
And I gotta wrap both an opening and closing anchor tag there.
But what about going up two directories?
So in the case of links, I have to go up into the info directory and
then up one more into the 501 directory.
So what do I do then?
Well, you can chain together as many of those dot dot forward slashes as
you need to.
So in this case, I can do dot dot forward slash, dot dot forward slash.
And then finally, fine links.htm.
We'll do a title.
And for that we'll say, up two directories.
And then finally, we've got to remember to close the anchor element.
So I'm going to go ahead and save that.
Now, it's not uncommon to need to go up and down.
So if I needed to go up a couple directories and
then find another directory and drill back down, that's perfectly acceptable.
Anytime that you're resolving the path of a link, you can go in to directories and
up directories in whatever order that you need in order to get to
the page from where you are currently at.
All right.
So if I save this and go in the browser, now we're in our resources page.
I can see that clicking on links, takes me up two directories into the links page.
I can see that clicking on resources, takes me down into the folders.
And you can actually see that up in the URL.
You can see the folder structure.
05 01 info extras.
If I go to the about page, you can see.
Again, I'm going up a directory and links.
I go yet, up one more directory.
So overall, link syntax is pretty easy to grasp.
Now, it's worth noting that you can wrap these anchor elements
around almost any HTML content.
Here we did single page names.
What we could an entire passage, if we wanted to.
If we needed to wrap it around something like an image to make
the image a clickable link, that is fine.
Now prior to HTML5,
we actually needed to keep the anchor tag within block level elements.
Meaning, the anchor had to sit within a paragraph or
within a heading, something like that.
But in HTML5, the specification was actually changed to allow anchor tags to
wrap around block level elements as well.
So you could have the same link wrap around a heading one, for
example and a paragraph.
Now in theory, this is supposed to allow us to create these sort of
large clickable sections of content.
However, implementation across browsers is a little uneven.
And typically, with your CSS styling which we'll talk about a little bit later.
You get some really unexpected visual rendering, when you use these,
what they call block level lengths.
So, my advice would be to approach that particular technique carefully.