Preview
Video Player
00:00
00:00
Creating Links
6:29Links are the single most unifying component of the web. Links let you jump from page to page, and website to website, to find the information you're after.
Our webpage is starting to take shape,
but no webpage is complete without links.
0:00
Links are the single most
unifying component of the web.
0:04
They're what will let you jump from
page to page, and website to website,
0:07
to find the information you're after.
0:10
Without links, the web wouldn't be a web.
0:11
It would just be a massive
collection of lonely pages.
0:13
You can turn any text into a link by
placing it inside a set of a tags.
0:17
Back in our index.html file, below
the paragraph that's just above our h2,
0:21
type a set of a tags, and
add the text, Start Your VR Journey.
0:28
The a tag forms an anchor element,
that's what the a means.
0:38
It's named that way because you
use the element to attach or
0:43
anchor a URL to a piece of text.
0:46
So now, everything between the opening and
closing anchor tags becomes a link users
0:48
can click to navigate to other webpages or
a different location of the current page.
0:54
So over in the browser, there are no
visible changes to the text yet,
0:58
and when you click on
the text nothing happens.
1:04
So to let the browser know that this
is a link, we'll need to provide it
1:06
extra information,
like the web address to link to.
1:10
HTML elements accept attributes
that give them further meaning and
1:13
additional behavior.
1:18
Attributes provide extra bits
of information to the browser,
1:19
like where the text wrapped
in a tags should link to, or
1:22
whether the link should open in
a new browser tab or window.
1:26
You're gonna learn a whole lot more about
attributes of HTML elements throughout
1:29
this course.
1:33
So let's let's start with the href,
or hypertext reference attribute.
1:34
href is an anchor element attribute
that points to a location, and
1:38
navigates the user to that location by
changing the URL in the address bar.
1:42
You write HTML attributes inside
the opening tag of an element.
1:47
So in the opening a tag,
after the a, type href.
1:51
An attribute is always
followed by an equal sign and
1:56
a value inside either single or
double quotation marks.
1:59
Now as the value for href, we provide
the destination or URL of the link.
2:03
So let's have this anchor element link
to this page, the VR page of Treehouse.
2:09
I'll copy this address and
paste the URL as the value for href.
2:14
The href attribute tells the browser
that the text is now a hyperlink.
2:21
So it displays it blue and underlined.
2:27
Now a link can point to a number
of different locations,
2:30
like from a page on your website
to a page on another website.
2:33
From one page on your site to
another page on the same site.
2:37
A link can also point to a different
location within the same page.
2:40
They can open in a new browser window or
tab.
2:44
Even link to an email that when clicked,
2:46
composes an email in the user's
default email program.
2:49
You'll learn more about links and URLs in
a later part of this course, but for now
2:52
let's focus on our link, which navigates
users to a page on another website.
2:57
So when you click to a different
website you use what's called
3:03
an absolute URL as the href value.
3:06
Absolute URLs provide the browser
all the information necessary
3:09
to navigate the user to
a location on the web.
3:12
So for example, notice how this href
value contains the full web address
3:15
of the link we're pointing to.
3:19
Absolute URLs use a specific
format that begins with http:// or
3:21
https:// followed by
the website domain name and
3:26
the path to the webpage you wanna link to.
3:31
I have posted links to resources and
3:34
a Treehouse video that teaches you more
about URLs in the teacher's notes.
3:36
Now by default,
clicking a link navigates to
3:40
the new location in the current
browser window or tab.
3:43
But sometimes you may want your users to
open a link in a new tab or window so
3:46
that they don't leave the current page.
3:51
A common reason for this is when you have
links that point to a different website,
3:53
and you want users to remain on your site,
3:57
even after they're done
viewing the other site.
3:59
So, for instance,
on the Treehouse website,
4:01
some of the links in the teacher's notes
point to resources outside of the website.
4:04
Clicking a link opens the page
in a new browser tab,
4:08
while the video conveniently remains
playing in the original tab.
4:12
So to create a link that
opens in a new tab or window,
4:16
you use the target attribute and
set the value to _blank.
4:20
So back in our opening a tag,
right after the href attribute,
4:25
let's add the target attribute
followed by ="_blank".
4:30
I'll give this a save,
refresh the browser and
4:37
now clicking the Start Your VR Journey
link opens the page in a new browser tab.
4:40
You may see links that use only a pound or
hash symbol as the href value.
4:46
So for example, in our blog entries
let's add a Read more link bellow
4:50
both blog entries, bottom paragraph.
4:55
And set the href to a hash or
5:00
a pound symbol.
5:07
So now over in the browser,
when you click on a Read more link,
5:11
it navigates you to the top of the page.
5:16
And you'll see that it adds the hash to
the end of the URL in the address bar.
5:18
Well the hash symbol is often used
to link users to different locations
5:22
of the same page,
which we'll do in a later video.
5:27
And it can also be used as
a placeholder href value
5:30
when you simply want to display
a link while building your page.
5:33
So next, why don't you create links for
the top resources items here.
5:37
And you can point them
to any URL you want.
5:43
And if you want to go further try turning
the words in the list home about articles
5:46
and contact into placeholder
links using the hash symbol.
5:50
In the next stage we are going to turn
this list into our main navigation menu.
5:54
You can see how I added the links in
the teacher's notes of this video.
5:57
In this stage, you created a simple
webpage that you'll use as the starting
6:05
point for the VR website.
6:08
Coming up in the next stage, I'll
introduce you to HTML elements that divide
6:10
a page into logical sections and
group together related elements.
6:14
You'll also learn why it's important to
carefully plan the structure of your HTML
6:18
and use markup that describes
the underlying meaning or
6:23
what's called the semantics
of your content.
6:26
See you soon.
6:27