1
00:00:08,619 --> 00:00:11,651
Hi, today we're going to be talking
about hyperlinks, or links,

2
00:00:11,651 --> 00:00:13,630
as they're more commonly called.

3
00:00:13,630 --> 00:00:17,810
And how you can use them to link
your document with others out there.

4
00:00:17,810 --> 00:00:21,280
Now, links are really
what make the web a web.

5
00:00:21,280 --> 00:00:25,240
It's this whole idea that different
links built together create this kind of

6
00:00:25,240 --> 00:00:27,850
knowledge that search engines or
you yourself

7
00:00:27,850 --> 00:00:32,960
can gain by going from page to page to
page, and with hopefully related material.

8
00:00:32,960 --> 00:00:35,920
So, let's get right into how
you create a link on your page.

9
00:00:37,920 --> 00:00:42,880
Links are called anchor links and that's
where we get the a for in the a tag.

10
00:00:42,880 --> 00:00:44,280
When you use an anchor tag,

11
00:00:44,280 --> 00:00:48,190
the a tag you're going to need to make
sure that you've two different parts.

12
00:00:48,190 --> 00:00:51,150
You need a hyper reference and
you need content.

13
00:00:52,200 --> 00:00:55,100
So the hyper reference is just
the reference to the location of

14
00:00:55,100 --> 00:00:56,160
the new content.

15
00:00:56,160 --> 00:01:01,480
So in this case I used
http://www.umich.edu.

16
00:01:01,480 --> 00:01:03,010
That tells a browser,

17
00:01:03,010 --> 00:01:08,240
if somebody clicks on this link this is
where I want to request the new page from.

18
00:01:08,240 --> 00:01:10,190
We also need to have content.

19
00:01:10,190 --> 00:01:12,340
The content is what we
call the clickable part.

20
00:01:12,340 --> 00:01:13,380
In this case, it's text.

21
00:01:13,380 --> 00:01:17,380
I would actually click on an underlined
text that says, University of Michigan.

22
00:01:17,380 --> 00:01:19,540
But in some cases,
it might be an image instead.

23
00:01:21,420 --> 00:01:23,660
So what types of links can we have?

24
00:01:23,660 --> 00:01:25,740
Some of the most common
are called absolute links.

25
00:01:26,810 --> 00:01:27,989
We also have relative links.

26
00:01:29,170 --> 00:01:31,000
Internal links and

27
00:01:31,000 --> 00:01:34,270
graphical links and I'm gonna show
you examples of each one of those.

28
00:01:35,890 --> 00:01:42,730
With an absolute reference in the a href
section we need to put a fully formed url.

29
00:01:42,730 --> 00:01:47,410
You need to have the http or
https the address and

30
00:01:47,410 --> 00:01:49,350
any type of extra document name you want.

31
00:01:49,350 --> 00:01:51,420
So if you remember there's
three parts to URL,

32
00:01:51,420 --> 00:01:54,020
you have the protocol,
the host and the document.

33
00:01:54,020 --> 00:01:58,430
You need to include all of those if
you have an absolute reference, right?

34
00:01:58,430 --> 00:02:00,260
Everything else is still
pretty much the same.

35
00:02:02,270 --> 00:02:07,200
For a relative reference, we slightly
change what goes in to the href.

36
00:02:07,200 --> 00:02:09,260
Instead of linking to some outside or

37
00:02:09,260 --> 00:02:14,370
even internal webpage, we're only going
to put, in this case, the file name.

38
00:02:14,370 --> 00:02:18,960
So in this case we're going
to link to page2.html.

39
00:02:18,960 --> 00:02:21,960
You might get slightly
more in-depth than that,

40
00:02:21,960 --> 00:02:24,470
where you can include also
some sort of folder name.

41
00:02:24,470 --> 00:02:28,380
So in this case we'd be going to
the file called page2.html but

42
00:02:28,380 --> 00:02:31,920
it's in a different folder
called docs the third

43
00:02:31,920 --> 00:02:36,860
way we can use a relative reference
is to what we call use the ID tag.

44
00:02:36,860 --> 00:02:41,730
So when you have href equals hash pound or
history, we're

45
00:02:41,730 --> 00:02:46,220
saying there's another location inside
the same file and it's called history.

46
00:02:47,950 --> 00:02:49,860
So, absolute versus relative links.

47
00:02:49,860 --> 00:02:53,530
When would you use absolute links versus
when would you use relative links?

48
00:02:53,530 --> 00:02:57,360
With absolute links, you're basically
saying, I am not in charge of this page,

49
00:02:57,360 --> 00:02:58,290
somebody else is.

50
00:02:58,290 --> 00:03:00,070
So if you're linking to
somebody else's page,

51
00:03:00,070 --> 00:03:04,620
absolutely use the absolute link
with the full reference in there.

52
00:03:04,620 --> 00:03:07,320
For relative is when you're
developing your own site.

53
00:03:07,320 --> 00:03:10,690
And it's really helpful to use
relative links instead of absolute, so

54
00:03:10,690 --> 00:03:12,980
that way if you move your
page to a different server,

55
00:03:12,980 --> 00:03:16,900
or you move it into a different folder,
you don't need to rename everything.

56
00:03:18,420 --> 00:03:20,760
And so those are some of
the benefits to using local links,

57
00:03:20,760 --> 00:03:23,180
is just the idea that you
don't need to update as much.

58
00:03:24,460 --> 00:03:28,220
Now, one of the things that you
need to make sure that you never do

59
00:03:28,220 --> 00:03:32,570
is have a link that includes some sort
of file structure, we'll call it.

60
00:03:32,570 --> 00:03:33,980
So check your links.

61
00:03:33,980 --> 00:03:38,490
Make sure that it never says,
C:page or MyDocumentsPage or

62
00:03:38,490 --> 00:03:41,580
anything that is very
specific to your computer.

63
00:03:41,580 --> 00:03:43,910
The reason that you
don't wanna do that is.

64
00:03:43,910 --> 00:03:45,950
If you put your page out on the web.

65
00:03:45,950 --> 00:03:49,360
If you're done you've put it up
on a server or a hosting and

66
00:03:49,360 --> 00:03:51,020
you want other people to click.

67
00:03:51,020 --> 00:03:54,570
Well, it doesn't make sense that they
would be able to access pages that are on

68
00:03:54,570 --> 00:03:55,630
your computer.

69
00:03:55,630 --> 00:03:59,690
So never ever have a reference that
includes something local to your machine.

70
00:04:01,270 --> 00:04:02,900
All right?
One of the other things that you can do is

71
00:04:02,900 --> 00:04:05,060
you can use images as the link.

72
00:04:05,060 --> 00:04:07,280
So the clickable component
doesn't have to be text.

73
00:04:07,280 --> 00:04:08,050
You've seen this a lot.

74
00:04:08,050 --> 00:04:09,500
It can be icons, images.

75
00:04:09,500 --> 00:04:11,550
different things along that line.

76
00:04:11,550 --> 00:04:15,290
In this case, I went in and
I use the regular H reference and

77
00:04:15,290 --> 00:04:17,910
what we're changing now,
is not the h reference, but

78
00:04:17,910 --> 00:04:21,650
content that goes between the opening and
closing tag.

79
00:04:21,650 --> 00:04:24,360
and I have gone ahead and
I've put in an image instead.

80
00:04:24,360 --> 00:04:28,070
Make sure that you use the alt
text to go along with that image.

81
00:04:29,660 --> 00:04:32,000
And another case I've done
something very similar,

82
00:04:32,000 --> 00:04:36,030
the only difference is, instead of
using a local reference right here for

83
00:04:36,030 --> 00:04:38,510
the image,
I've used an absolute reference.

84
00:04:38,510 --> 00:04:40,230
I've put in the entire URL.

85
00:04:41,690 --> 00:04:45,170
So let's talk usability issues and
accessibility issues.

86
00:04:45,170 --> 00:04:47,330
If you're going to use
a clickable component,

87
00:04:47,330 --> 00:04:50,440
you wanna make sure that
it has an informative name.

88
00:04:50,440 --> 00:04:54,710
There's software out there that can
list all of the links within a page for

89
00:04:54,710 --> 00:04:58,090
people who are looking for
things, who can't use typical.

90
00:04:58,090 --> 00:04:59,860
typical means of accessing the page.

91
00:04:59,860 --> 00:05:04,100
It is not at all helpful to them if all
the links are labelled, click here,

92
00:05:04,100 --> 00:05:05,590
click here, click here, right?

93
00:05:05,590 --> 00:05:08,210
You want to give it some
sort of informative name.

94
00:05:08,210 --> 00:05:11,240
You also want to make sure that
if you are using an image for

95
00:05:11,240 --> 00:05:13,510
the clickable portion of your link.

96
00:05:13,510 --> 00:05:16,110
That image needs to have
some sort of alt text or

97
00:05:16,110 --> 00:05:19,310
other information available to
those who can't see the image.

98
00:05:20,730 --> 00:05:24,410
So, let me show you some coded
example of those types of links.

99
00:05:24,410 --> 00:05:25,030
All right?

100
00:05:25,030 --> 00:05:28,100
As you can see here,
I have a reference to absolute references,

101
00:05:28,100 --> 00:05:32,990
relative references, images as links,
and then some embedded links, as well.

102
00:05:32,990 --> 00:05:37,090
So, if I were to click on Washtenaw Dairy
or Rosie's Coffee Bar and Bakery, or

103
00:05:37,090 --> 00:05:41,790
Dexter's Bakery etc.,
it would actually take me to their pages.

104
00:05:41,790 --> 00:05:42,740
Ahead back.

105
00:05:42,740 --> 00:05:45,110
One of the tricks I want to
point out as I'm doing this is,

106
00:05:45,110 --> 00:05:49,200
as I hover over each one of these links,
if you look at the very,

107
00:05:49,200 --> 00:05:52,950
very bottom of my browser, and
I can't really show at the same time, but

108
00:05:52,950 --> 00:05:56,120
as you highlight it,
it shows you which URL you are going to.

109
00:05:56,120 --> 00:05:58,210
And I think this is very valuable for

110
00:05:58,210 --> 00:06:01,550
people to know, because if you're
ever hovering over a link, and

111
00:06:01,550 --> 00:06:06,600
the information you see at the bottom of
the page doesn't match what you said.

112
00:06:06,600 --> 00:06:09,640
So absolute references take
you away from your site.

113
00:06:09,640 --> 00:06:13,620
Relative references can take you to
something that's within your folder.

114
00:06:13,620 --> 00:06:17,490
So right here I have an image of some
doughnuts, and I have gone on and

115
00:06:17,490 --> 00:06:19,560
they're in my folder in my file.

116
00:06:19,560 --> 00:06:23,300
So I was able to link to them
just using the picture name.

117
00:06:23,300 --> 00:06:24,140
All right?

118
00:06:24,140 --> 00:06:26,490
We can also use images as links as well.

119
00:06:26,490 --> 00:06:30,070
Instead of writing Doughnuts from
the Squire Shop, I went ahead and

120
00:06:30,070 --> 00:06:33,630
made it so you can click on
the image to get to the larger view.

121
00:06:33,630 --> 00:06:36,590
This last idea of embedded links
is a little bit interesting.

122
00:06:36,590 --> 00:06:40,220
So let me bring you over to the code for
just a second and show you.

123
00:06:40,220 --> 00:06:41,240
Write down here,

124
00:06:41,240 --> 00:06:45,830
I have something called relative
references with an ID equals relative.

125
00:06:45,830 --> 00:06:50,520
I have embedded links with
an ID that says embedded and

126
00:06:50,520 --> 00:06:54,941
up here, at the very beginning you
can see I have div id = "absolute".

127
00:06:56,150 --> 00:07:01,120
With embedded links, I can click on any of
these and navigate within the same page.

128
00:07:01,120 --> 00:07:02,820
So I'm not gonna go to a different page.

129
00:07:02,820 --> 00:07:04,470
I'm not gonna open up a new tab.

130
00:07:04,470 --> 00:07:08,240
Instead I'm gonna jump to
different places within the page.

131
00:07:08,240 --> 00:07:10,090
So I went to absolute.

132
00:07:10,090 --> 00:07:14,090
I went to relative now if I
try to do embedded references

133
00:07:14,090 --> 00:07:16,720
it doesn't look like it moved but
it really did.

134
00:07:16,720 --> 00:07:18,280
It's just that we're already there.

135
00:07:18,280 --> 00:07:22,770
All right, so that is how these kind of
embedded or internal links work, right?

136
00:07:22,770 --> 00:07:26,210
Now if at any time you get confused
about how code is working.

137
00:07:26,210 --> 00:07:29,010
I just want to remind you
they can always go to view.

138
00:07:30,650 --> 00:07:35,510
Developer and
view source to really get a better idea

139
00:07:35,510 --> 00:07:38,390
of how people are creating their pages and
their links.

140
00:07:38,390 --> 00:07:41,200
Next, let's talk about targets, all right?

141
00:07:41,200 --> 00:07:44,030
Anchors can take a different
target attribute as well.

142
00:07:44,030 --> 00:07:46,970
We've got the source, let's add anchor.

143
00:07:46,970 --> 00:07:47,880
So we're target.

144
00:07:47,880 --> 00:07:49,450
So you might have target equals self.

145
00:07:49,450 --> 00:07:50,930
This is kind of the default action.

146
00:07:50,930 --> 00:07:53,450
This is going to happen if you
don't put anything at all.

147
00:07:53,450 --> 00:07:56,830
If you don't even include target, and
what it means is when you click on a link,

148
00:07:56,830 --> 00:08:00,580
open up in the same tab or
window that you're looking at right now.

149
00:08:01,970 --> 00:08:04,200
If you put target equals blank.

150
00:08:04,200 --> 00:08:08,090
You're going to leave the current
page you're in exactly the same, and

151
00:08:08,090 --> 00:08:12,450
open up a new tab or window for
where you want the new page to be opened.

152
00:08:12,450 --> 00:08:14,560
Now this has its upside and downside.

153
00:08:14,560 --> 00:08:18,010
The upside is that your site is
still open in someone's window.

154
00:08:18,010 --> 00:08:22,280
The downside is that many people don't
like it when it keeps adding on and

155
00:08:22,280 --> 00:08:22,970
adding on, and

156
00:08:22,970 --> 00:08:26,710
as they progress through your page, you're
making them open more and more tabs.

157
00:08:26,710 --> 00:08:29,360
There are two other options that we're
not going to really talk about here, but

158
00:08:29,360 --> 00:08:32,550
you can see them in the reading,
and those are top and parent, and

159
00:08:32,550 --> 00:08:35,770
that deals with if you're really getting
into the idea of having multiple windows,

160
00:08:35,770 --> 00:08:37,130
frames, etcetera open.

161
00:08:37,130 --> 00:08:41,810
So, let's go ahead and review, because
making sure that you understand links is

162
00:08:41,810 --> 00:08:46,720
vitally important to your success in this
course or even in just understanding HTML.

163
00:08:46,720 --> 00:08:50,720
So, the first thing you need to know is
a page without links is extremely rare.

164
00:08:50,720 --> 00:08:53,700
And to be honest,
it's almost not even a web page.

165
00:08:53,700 --> 00:08:54,540
It's just a document.

166
00:08:55,900 --> 00:08:59,180
Links can be absolute,
relative and internal.

167
00:08:59,180 --> 00:09:01,480
And internal, again, was the kind
where it had the hash mark in it.

168
00:09:01,480 --> 00:09:03,440
I think I may have referred
to them as relative, but

169
00:09:03,440 --> 00:09:06,160
I wanna make sure I'm clear that
the hash mark makes it internal.

170
00:09:07,510 --> 00:09:10,840
You want to use caution
when using images in links.

171
00:09:10,840 --> 00:09:14,070
It's not that they're not a great thing to
do, and I'm not saying you should do it.

172
00:09:14,070 --> 00:09:18,150
I'm just saying make sure that you do it
carefully to ensure that everyone who is

173
00:09:18,150 --> 00:09:22,240
viewing your page can get the same content
and the same experience as everyone else.