Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Delve into the world of HTML links, connecting web pages, and exploring attributes. Learn to create internal and external links while discovering the use of attributes like "href" and "target."
Quick Tip
Did you know there's a simple shortcut to link back to the top of a page? Instead of setting an anchor tag's (<a>) href value to an id, you can just set it to # like so:
<a href="#">Back to Top</a>
Clicking this anchor tag will also link you to the top of the page.
Absolute & Relative Link Examples
Linking to an absolute URL:
<a href="https://www.teamtreehouse.com">Team Treehouse</a>
Linking to a relative URL:
<a href="index.html">Back to Home</a>
Reference
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
What makes the web the web is
the ability to link pages to each other,
0:00
effectively creating a web of
pages that make up a website, and
0:05
a web of websites make up the Internet.
0:09
So it's quite important to learn about
how to link pages to each other.
0:12
Seeing that this is a recipe book website,
0:17
we want our website to host more
than just one recipe, don't we?
0:19
In fact, the mock ups that
were given also show this.
0:24
Let's change our homepage to
be a list of our recipes and
0:27
change this page to one
of those recipe pages.
0:31
Let's first rename this file from
index.html to something else
0:35
since index.html is reserved for
a homepage, and
0:40
we want our homepage to
be a list of recipes.
0:44
Let's rename it to carbonara.html
since that's what our recipe is for.
0:48
We'll do this by right-clicking
index.html and selecting Rename.
0:54
Then, let's create a new index.html file,
so our website still has a homepage.
1:02
And to make life easier, let's copy
the contents of carbonara.html over.
1:11
I'll use the shortcut Cmd+A to select
all the text and Cmd+C to copy.
1:17
Then I'll paste it in our
new index.html file, and
1:23
we'll simply remove what we don't need.
1:26
All we need to remove is
everything in the main and
1:30
nav since all that content is
relevant to a single recipe
1:34
And then we'll populate main
with what we see in the markup.
1:41
The favorite headings followed by a list
of recipes of which we only have one at
1:45
the moment.
1:50
With your knowledge of headings and
lists, pause this video and
1:51
try to write out the HTML
structure on your own.
1:55
I'll see you in a bit.
1:58
How did it go?
2:02
Here's what I did.
2:03
I added favorites as a heading 2, and
then an unordered list with one list item.
2:05
Now let's save this file and
refresh the browser.
2:12
We can see the header and
our list of one item.
2:15
Now we need to turn this
list item into a link.
2:19
So users can click through to
our carbonara,html page, and
2:22
that's where anchor tags come into play.
2:26
These little HTML elements
are the building blocks of web navigation,
2:30
connecting the digital world, like
the threads of a vast online tapestry.
2:34
The anchor tag is used to create
hyperlinks that take users to other web
2:40
pages or resources.
2:44
It's a powerful tool for
navigating the web.
2:46
The anchors opening and
closing tags wrap around the text or
2:49
elements that we want the user
to be able to click on.
2:53
Then, we'll include an attribute
that specifies the URL or
2:57
file path to the destination page or
resource.
3:01
It's called the href attribute.
3:04
It's like a GPS for your web content
where we tell it our final destination,
3:07
which is the page we want
our anchor tag to link to.
3:12
If we want to link from index.html
to another file in the same folder,
3:16
let's say our carbonara.html,
3:21
we simply have to place carbonara.html
as a value for this attribute.
3:24
This is called a relative link
because the destination is relative to
3:30
where the user is now,
which is index.html.
3:35
Let's give it a go.
3:39
We'll create the anchor tag to
link users from our recipe list
3:40
page index.html to the recipe page,
carbonara.html.
3:45
Within the li's opening and
3:50
closing tags wrap spaghetti carbonara
within anchor opening and closing tags.
3:52
Then, add the href attribute and
have it equal to carbonara.html.
4:00
Save the file and refresh the browser.
4:07
And we can see that our list items have
changed into the stereotypical look of
4:11
a link, blue underlying text.
4:16
If we click on this, we get taken to
our very familiar carbonara.html page.
4:19
Now that we're here,
there are a few more links on this page
4:25
that we can add with our new
found knowledge of anchor tags.
4:29
Back in workspaces,
let's have a look at our mock-up.
4:33
There are three links that
we have to handle here.
4:36
Back to list, jamieoliver.com,
and back to top.
4:40
Let's start with back to list.
4:46
With your new found anchor knowledge,
pause this video and
4:48
turn the entire phrase into
a link back to the index.html.
4:52
I'll give you a hint, this should be added
to our nav element, I'll see you in a bit.
4:57
How did it go?
5:05
Inside the nav element,
5:07
I added an a tag with an h ref
attribute pointing us to index.html.
5:09
Within the a tags,
I added the text back to list.
5:15
Next, let's have a look at
the link to jamieoliver.com.
5:20
So far, we learned how to link
to other pages in our project.
5:24
We simply supply the file
name like carbonara.html.
5:29
However, jamieoliver.com is
certainly not part of our website.
5:33
So what do we do now?
5:38
Anchor tags and
5:40
their href attribute can be used to link
from our website out to other websites.
5:41
We simply have to provide the full URL
as the value of the href attribute.
5:47
For example, if we wanted to
link out to Google's homepage,
5:53
we simply have to provide
https://www.google.com as the value.
5:59
This is called an absolute link,
because unlike the relative link,
6:07
provides the full and
precise path to the linked resource,
6:12
leaving no room for interpretation.
6:15
Let's have a look again
at our recipe.txt file.
6:19
At the bottom where we
linked out to Jamie Oliver,
6:23
there is a link to the original recipe.
6:26
Let's copy and paste that into
a browser tab to check that it works.
6:29
Great, now that we've
got that we can simply
6:33
provide that as the href attribute value.
6:36
Let's wrap jamieoliver.com
in anchor tags and
6:40
provide the href attribute.
6:45
Save and refresh our webpage.
6:54
We have our familiar blue
underline text once again.
6:56
When we click on this,
we get taken to jamioliver.com's website.
7:02
However, we seem to have left
our recipe website behind.
7:07
When navigating between our recipe
list and the recipe itself,
7:11
the other page was always
just an anchor tag away.
7:15
But now that we're here, the only way
back now is to press the back button.
7:18
The anchor tag has another handy
attribute, the target attribute.
7:23
The target attribute allows us to
specify how to open the linked web page.
7:28
By default, when a link is clicked
on the target webpage will open in
7:33
the same tab that
the user is currently on.
7:38
We can set the target attribute
to underscore blank in order to
7:41
open the link in a new tab, which is
especially helpful when you want to keep
7:45
the current page easily accessible.
7:49
In our case, being able to open
Jamie Oliver's website in a new tab,
7:53
means that our recipe website is still
accessible in another browser tab.
7:57
Let's add this target attribute.
8:02
In the opening anchor tag,
8:05
before the href attribute,
add target=_blank.
8:07
Remembering the before the word blank.
8:13
You may be asking,
which attribute should be listed first.
8:16
The answer is that it's totally up to you.
8:20
All attributes will be action
no matter the order, so
8:22
choose what works best for you.
8:25
Let's save and refresh the page.
8:28
Now we've been click on
the jamieoliver.com link,
8:31
a new tab opens with the original recipe.
8:34
Nice work.
8:37
Finally, our last link is
a handle this back to top link.
8:40
Now, your first thought may be to
simply reload the page by providing
8:44
carbonara.html as
the href attribute value,
8:49
but there's a much more efficient method.
8:52
Anchor tags aren't just used
to link to other web pages,
8:55
they're also used to
link to other resources.
8:59
In this case, our resource is
another area on the same page.
9:02
To do this, we simply have to supply
the ID attribute name of the HTML
9:07
element we want to jump to in the href
attribute, prefix with a hash.
9:12
Since we want to jump
to the top of the page,
9:19
let's give something at the top
of the page an ID of top.
9:22
This header it will be
a great element to jump to.
9:26
Let's give it an id by using the id
attribute and providing top as the value.
9:30
And then let's link this
using an anchor tag.
9:36
Coming back down to
the bottom of the page,
9:40
let's add our new link after
the Jamie Oliver mention.
9:43
Open a new anchor tag and
enter back to top as its contents.
9:47
Then add the href attribute and
set its value to hash top.
9:53
Nice, let's save and refresh.
9:58
Since we can see the whole page,
I'll zoom in quite a bit so
10:02
we can see our back to top link in action.
10:06
Once we click on this back to top link,
we get taken back to the top
10:09
of the page because of the top ID
we gave to the header element.
10:13
Now our two webpages are linked,
we officially have ourselves a website.
10:18
Not only that, but our website
links out to other websites too.
10:23
We're officially joining
the World Wide Web.
10:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up