1
00:00:00,000 --> 00:00:02,843
- [Voiceover] You've already learnt
a bunch of HTML tags.

2
00:00:03,000 --> 00:00:04,800
But do you know what HTML actually means?

3
00:00:04,850 --> 00:00:09,091
HTML stands for 
HyperText Markup Language.

4
00:00:11,470 --> 00:00:14,177
It's a way of using tags 
to markup content.

5
00:00:14,181 --> 00:00:16,860
But what does hypertext mean?

6
00:00:16,869 --> 00:00:20,494
It's actually a phrase that was invented
before the Internet even existed,

7
00:00:20,494 --> 00:00:23,823
in the 1960s, to mean
text that is connected to other text

8
00:00:23,823 --> 00:00:26,263
that the reader can immediately jump to.

9
00:00:26,273 --> 00:00:29,720
Tim Berners-Lee invented HTML,

10
00:00:29,720 --> 00:00:32,756
and other ingredients 
of the Internet, like HTTP,

11
00:00:32,787 --> 00:00:34,912
to be a way to connect 
text to other text

12
00:00:34,912 --> 00:00:36,722
located anywhere in the world.

13
00:00:36,751 --> 00:00:39,191
How do we connect
webpages to other webpages

14
00:00:39,191 --> 00:00:41,280
in HyperText Markup Language?

15
00:00:41,282 --> 00:00:43,451
With a hyperlink, of course!

16
00:00:43,451 --> 00:00:46,280
Which we usually just call a link, now.

17
00:00:46,280 --> 00:00:48,599
How do we make a link in HTML?

18
00:00:48,636 --> 00:00:50,304
This is where it gets weird.

19
00:00:50,304 --> 00:00:52,770
You might think that we'd use 
a `link` tag...

20
00:00:52,770 --> 00:00:57,633
But actually, that's used for 
a different sort of link in HTML.

21
00:00:57,633 --> 00:01:03,106
Instead, we use the `a` tag, 
where the "a" stands for "anchor".

22
00:01:03,172 --> 00:01:06,453
It's anchoring the link in the page 
at a certain location

23
00:01:06,453 --> 00:01:09,420
and connecting that anchor
to a different webpage.

24
00:01:09,443 --> 00:01:11,989
To make a link, you know
we have to write the tag,

25
00:01:11,989 --> 00:01:14,621
but we also have to decide 
on the text of the link,

26
00:01:14,621 --> 00:01:17,219
and then the address 
that the link goes to.

27
00:01:17,233 --> 00:01:24,068
Let's make this link to a page with more 
information about the birth of the web.

28
00:01:24,068 --> 00:01:29,506
The text of the link will go inside
the start and end tags.

29
00:01:29,599 --> 00:01:31,900
So I'll stick my cursor
in here and write,

30
00:01:31,900 --> 00:01:36,610
"Read more about the history of HTML".

31
00:01:36,610 --> 00:01:41,017
So now we can see that text 
looks like a link.

32
00:01:41,061 --> 00:01:44,317
But it's not going anywhere yet.
We need to add an address.

33
00:01:44,347 --> 00:01:47,480
We don't actually want the address 
to show up on the page,

34
00:01:47,480 --> 00:01:49,937
but we still need the browser 
to know what it is.

35
00:01:49,990 --> 00:01:53,040
So we put it inside an attribute 
on the a tag.

36
00:01:53,088 --> 00:01:56,942
That's the href attribute.

37
00:01:56,985 --> 00:01:59,749
What does "href" stand for?

38
00:01:59,769 --> 00:02:03,264
I will give you a hint:
You have seen that "h" a lot.

39
00:02:03,283 --> 00:02:06,124
It stands for "hyper"!
Hyper-reference.

40
00:02:06,124 --> 00:02:11,966
Now, I'll paste in the address, 
which we also call a URL.

41
00:02:12,036 --> 00:02:15,940
Do you notice how this URL 
starts with "http:" ?

42
00:02:16,051 --> 00:02:19,044
Guess what that "h"stands for?
Hyper!

43
00:02:19,084 --> 00:02:21,483
HTML is all about the hyper.

44
00:02:21,553 --> 00:02:25,664
This URL specifies everything the browser
needs to know to find the webpage:

45
00:02:25,724 --> 00:02:27,965
The protocol used for finding it,

46
00:02:28,035 --> 00:02:30,357
the domain it is on,

47
00:02:30,457 --> 00:02:34,265
and the path that it's located in 
on the server.

48
00:02:34,294 --> 00:02:38,579
Since it specifies everything, 
we call this an "absolute URL".

49
00:02:38,622 --> 00:02:43,499
On some webpages, you might see URLs 
that start with just slash and a path.

50
00:02:43,562 --> 00:02:46,179
That tells the browser to stay
on the current domain,

51
00:02:46,179 --> 00:02:48,634
and just look for a different path
on that domain.

52
00:02:48,645 --> 00:02:50,631
That's called a "relative URL".

53
00:02:50,682 --> 00:02:54,054
We use them all over Khan Academy
when we link between our content.

54
00:02:54,136 --> 00:02:57,623
You should stick to absolute URLs 
in the webpages that you make here,

55
00:02:57,623 --> 00:02:59,288
to stay on the safe side.

56
00:02:59,321 --> 00:03:02,146
We can also tell the browser 
where to open the page:

57
00:03:02,146 --> 00:03:04,728
the current window,
or a new window.

58
00:03:04,769 --> 00:03:07,061
To tell the browser to open
a link in a new window,

59
00:03:07,061 --> 00:03:10,748
we'll add another attribute, target.

60
00:03:10,796 --> 00:03:15,258
`target="_blank"`

61
00:03:15,288 --> 00:03:19,406
Now, I want you to pause this 
talk-through and try clicking the link.

62
00:03:19,444 --> 00:03:23,373
Go ahead, I'll wait.
Clicky-clicky!

63
00:03:23,393 --> 00:03:24,372
What happened?

64
00:03:24,432 --> 00:03:25,802
You probably saw a warning

65
00:03:25,802 --> 00:03:28,244
about the link being 
from a user-generated webpage.

66
00:03:28,244 --> 00:03:30,625
And then if you clicked "OK", 
the link opened up.

67
00:03:30,676 --> 00:03:33,122
That's because 
we treat links a little special

68
00:03:33,122 --> 00:03:34,395
on the webpages made here.

69
00:03:34,423 --> 00:03:37,797
Because we don't want users thinking 
that links are specially endorsed

70
00:03:37,797 --> 00:03:41,054
by Khan Academy and then landing 
on a scary, unexpected website.

71
00:03:41,066 --> 00:03:43,992
So, every link that you make here 
will have that warning,

72
00:03:43,992 --> 00:03:46,163
and every link will pop up 
in a new window.

73
00:03:46,300 --> 00:03:50,223
That means that I can actually 
delete this target attribute,

74
00:03:50,223 --> 00:03:53,048
since it's getting set 
behind the scenes, too.

75
00:03:53,088 --> 00:03:54,420
Or, I could leave it,

76
00:03:54,420 --> 00:03:57,764
in case I want to move this HTML 
off of Khan Academy one day

77
00:03:57,764 --> 00:04:00,840
and make sure that link still opens 
in a new window.

78
00:04:00,870 --> 00:04:02,723
When should you use target?

79
00:04:02,783 --> 00:04:06,302
Generally, if a link is going 
to another page on the same domain,

80
00:04:06,302 --> 00:04:08,023
it should open in the same window.

81
00:04:08,023 --> 00:04:12,179
And if it's going to a page on another
domain, it should open in a new window.

82
00:04:12,239 --> 00:04:13,641
Enough of that blabbing,

83
00:04:13,641 --> 00:04:16,649
let me show you 
something else neat about links.

84
00:04:16,689 --> 00:04:18,653
We can link more than just text.

85
00:04:18,653 --> 00:04:21,627
We can also link images, 
or text and images!

86
00:04:21,656 --> 00:04:26,815
Here, we have this image, which is
which is this picture of Tim Berners-Lee.

87
00:04:26,867 --> 00:04:30,454
I'm going to actually cut it...

88
00:04:30,464 --> 00:04:34,067
and paste it so that it's inside 
this link here.

89
00:04:34,094 --> 00:04:36,068
Oh! Sweet.

90
00:04:36,068 --> 00:04:38,958
Now, if I mouse-over this image,

91
00:04:38,958 --> 00:04:41,309
I'll see my cursor change to a pointer,

92
00:04:41,309 --> 00:04:44,379
and clicking it will go 
to the CERN webpage.

93
00:04:44,379 --> 00:04:46,948
In fact, you could link
your entire webpage --

94
00:04:46,948 --> 00:04:49,867
and make it 
a big, blue, underlined blob.

95
00:04:49,867 --> 00:04:57,000
But please don't do that! 
Link with love, my friends.