Congratulations on completing another challenge.
I hope you enjoyed working through our link exercises.
Let's just take a quick look at the finished files, so
that you can compare your work to the finished versions of the challenge files.
Now I have the intro.hcm open, from the 05_05 finished
files directory, and the first thing I want to examine is the page navigation.
That was step number one.
So if I look at the navigation area,
I can see that all of my page links are surrounded with a link tag.
They all have an href attribute that resolves the path to that page,
intro, syntax, structure, links, references and next.htm.
And I also am using a title attribute to give a little bit of descriptive text,
regarding that particular link.
Now, your title attribute, if you did one, may differ a little bit from mine and
that's fine.
You just want to try to be succinct and descriptive in a title.
Imagine if you would that somebody is reading this to somebody and
my advice would be is it giving enough information about the links, so
that you can understand the link's purpose.
You want to keep it as short as you can, but you also want it to be descriptive.
The other thing is you want to make sure that you have both an opening and
a closing link tag, and you want to make sure that the entire link itself
is inside each list item, so it's not wrapping on the outside of the list item,
it should be inside of the list item.
Okay so the next task was to go out and link to external sites, so
within the links.htm we had to go down into the footer,
find the first reference to lynda.com, and then we wanted to
create a link that linked to the external lynda.com site in a new tab or a window.
Then we were going to go down and
find the link to the lynda.com Twitter account and link to that one as well.
So if I go in the links.htm and browse down to the bottom,
I can see that the lynda.com has a link all the way around it.
The href contains not only the link to www.lynda.com but the protocol as well.
So remember for
absolute links, the URL has to include the protocol as well as the link.
The title is very succinct in this case, lynda.com.
And I'm using the target attribute to open it up in a new tab so
target_blank is the value that I'm using there.
Now for the @Lynda twitter account you can
see here we're doing pretty much the same thing.
I've hot the href that goes out to the HTTPS,
notice that's a slightly different protocol.
It's the secure protocol for Twitter.com.
Forward slash Lynda.
So that's where we can find the home page of the lynda.com Twitter account.
Notice that we have both the opening and the closing link tags around that.
We do have a title that says follow lynda.com on Twitter, so
that's a little bit more descriptive.
You may have done something slightly different like lynda on Twitter or
something like that.
It's fine as long as you're being descriptive there.
And you'll notice that here I'm not opening that up in a new tab or window.
That was your choice.
You could have chose either one.
Really as far as the author goes, that choice is purely judgmental.
We can just switch to here.
Now the last task was to link to internal sections.
And that's going to be on the reference.htm and syntax.htm.
So we wanted to create links that were going to take us down to the table of
named character entities.
One link was going to be on the same page, that was going to be on reference.htm, and
one was going to be on another page, and that was a syntax .htm.
So let's see how we did with those.
So if I go to reference.htm and scroll down a little bit,
I can see that, this named character entities text right here,
I surrounded it with a link, and the only thing I have in
that link is an href attribute that's going to the fragment identifier, named.
Now, remember I said that you're going to have to do two things here.
You're going to have to create the link.
But you are also going to have to modify the table.
So you may have chosen a different ID.
There's nothing wrong with that.
I just came up with named, I thought it made sense.
And then I, of course,
I have the octothorpe character in front of that to indicate that it's a named
character entity.
But if I go down to the table, I can see that I took the h3, which is inside
the caption, and gave it an ID of named, and that's the ID that I referenced.
Now, if you put the ID on the table, if you put the ID on the caption, or
even if you put the ID on the first table row, you're probably going to
be okay because it's going to jump to that particular section.
So there wasn't any one compelling reason for me to use the h3, it just seemed that
in terms of navigation that one made the most sense when I jumped to it.
Just to kind of test this out and
make sure it works, I'm going to check this in my browser,
clicking on named character entities navigates me right down to that table.
Now I mentioned that we also had a link on the syntax page that we wanted to set, so
when I go to the syntax page I can see that we have right here this text HTML
reference that I wanted to create the link around, and
again all I'm doing here is an href attribute.
This time,
however, in addition to the named fragment identifier, I'm also using reference.htm.
Note that there no spaces between the page and the fragment identifier.
It's all one single character string.
So if I preview that in the browser and
scroll down towards the bottom, I should be able to find that link and
clicking on it should navigate me not only to that page, but exactly to that section.
So that is it for our challenge on creating links, I hope you enjoyed it.
Hopefully your results matched up with mine and if they don't for some things,
like what you typed in for a title, it's really not that important.
In other cases, the way you resolve the URL or
perhaps the protocol you put in might actually make a difference.
So be sure to carefully compare your results to mine to make sure that you have
fully functioning links within your HTML reference site.