WEBVTT

00:00:00.000 --> 00:00:02.843
- [Voiceover] You've already learnt
a bunch of HTML tags.

00:00:03.000 --> 00:00:04.800
But do you know what HTML actually means?

00:00:04.850 --> 00:00:09.091
HTML stands for 
HyperText Markup Language.

00:00:11.470 --> 00:00:14.177
It's a way of using tags 
to markup content.

00:00:14.181 --> 00:00:16.860
But what does hypertext mean?

00:00:16.869 --> 00:00:20.494
It's actually a phrase that was invented
before the Internet even existed,

00:00:20.494 --> 00:00:23.823
in the 1960s, to mean
text that is connected to other text

00:00:23.823 --> 00:00:26.263
that the reader can immediately jump to.

00:00:26.273 --> 00:00:29.720
Tim Berners-Lee invented HTML,

00:00:29.720 --> 00:00:32.756
and other ingredients 
of the Internet, like HTTP,

00:00:32.787 --> 00:00:34.912
to be a way to connect 
text to other text

00:00:34.912 --> 00:00:36.722
located anywhere in the world.

00:00:36.751 --> 00:00:39.191
How do we connect
webpages to other webpages

00:00:39.191 --> 00:00:41.280
in HyperText Markup Language?

00:00:41.282 --> 00:00:43.451
With a hyperlink, of course!

00:00:43.451 --> 00:00:46.280
Which we usually just call a link, now.

00:00:46.280 --> 00:00:48.599
How do we make a link in HTML?

00:00:48.636 --> 00:00:50.304
This is where it gets weird.

00:00:50.304 --> 00:00:52.770
You might think that we'd use 
a `link` tag...

00:00:52.770 --> 00:00:57.633
But actually, that's used for 
a different sort of link in HTML.

00:00:57.633 --> 00:01:03.106
Instead, we use the `a` tag, 
where the "a" stands for "anchor".

00:01:03.172 --> 00:01:06.453
It's anchoring the link in the page 
at a certain location

00:01:06.453 --> 00:01:09.420
and connecting that anchor
to a different webpage.

00:01:09.443 --> 00:01:11.989
To make a link, you know
we have to write the tag,

00:01:11.989 --> 00:01:14.621
but we also have to decide 
on the text of the link,

00:01:14.621 --> 00:01:17.219
and then the address 
that the link goes to.

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.

00:01:24.068 --> 00:01:29.506
The text of the link will go inside
the start and end tags.

00:01:29.599 --> 00:01:31.900
So I'll stick my cursor
in here and write,

00:01:31.900 --> 00:01:36.610
"Read more about the history of HTML".

00:01:36.610 --> 00:01:41.017
So now we can see that text 
looks like a link.

00:01:41.061 --> 00:01:44.317
But it's not going anywhere yet.
We need to add an address.

00:01:44.347 --> 00:01:47.480
We don't actually want the address 
to show up on the page,

00:01:47.480 --> 00:01:49.937
but we still need the browser 
to know what it is.

00:01:49.990 --> 00:01:53.040
So we put it inside an attribute 
on the a tag.

00:01:53.088 --> 00:01:56.942
That's the href attribute.

00:01:56.985 --> 00:01:59.749
What does "href" stand for?

00:01:59.769 --> 00:02:03.264
I will give you a hint:
You have seen that "h" a lot.

00:02:03.283 --> 00:02:06.124
It stands for "hyper"!
Hyper-reference.

00:02:06.124 --> 00:02:11.966
Now, I'll paste in the address, 
which we also call a URL.

00:02:12.036 --> 00:02:15.940
Do you notice how this URL 
starts with "http:" ?

00:02:16.051 --> 00:02:19.044
Guess what that "h"stands for?
Hyper!

00:02:19.084 --> 00:02:21.483
HTML is all about the hyper.

00:02:21.553 --> 00:02:25.664
This URL specifies everything the browser
needs to know to find the webpage:

00:02:25.724 --> 00:02:27.965
The protocol used for finding it,

00:02:28.035 --> 00:02:30.357
the domain it is on,

00:02:30.457 --> 00:02:34.265
and the path that it's located in 
on the server.

00:02:34.294 --> 00:02:38.579
Since it specifies everything, 
we call this an "absolute URL".

00:02:38.622 --> 00:02:43.499
On some webpages, you might see URLs 
that start with just slash and a path.

00:02:43.562 --> 00:02:46.179
That tells the browser to stay
on the current domain,

00:02:46.179 --> 00:02:48.634
and just look for a different path
on that domain.

00:02:48.645 --> 00:02:50.631
That's called a "relative URL".

00:02:50.682 --> 00:02:54.054
We use them all over Khan Academy
when we link between our content.

00:02:54.136 --> 00:02:57.623
You should stick to absolute URLs 
in the webpages that you make here,

00:02:57.623 --> 00:02:59.288
to stay on the safe side.

00:02:59.321 --> 00:03:02.146
We can also tell the browser 
where to open the page:

00:03:02.146 --> 00:03:04.728
the current window,
or a new window.

00:03:04.769 --> 00:03:07.061
To tell the browser to open
a link in a new window,

00:03:07.061 --> 00:03:10.748
we'll add another attribute, target.

00:03:10.796 --> 00:03:15.258
`target="_blank"`

00:03:15.288 --> 00:03:19.406
Now, I want you to pause this 
talk-through and try clicking the link.

00:03:19.444 --> 00:03:23.373
Go ahead, I'll wait.
Clicky-clicky!

00:03:23.393 --> 00:03:24.372
What happened?

00:03:24.432 --> 00:03:25.802
You probably saw a warning

00:03:25.802 --> 00:03:28.244
about the link being 
from a user-generated webpage.

00:03:28.244 --> 00:03:30.625
And then if you clicked "OK", 
the link opened up.

00:03:30.676 --> 00:03:33.122
That's because 
we treat links a little special

00:03:33.122 --> 00:03:34.395
on the webpages made here.

00:03:34.423 --> 00:03:37.797
Because we don't want users thinking 
that links are specially endorsed

00:03:37.797 --> 00:03:41.054
by Khan Academy and then landing 
on a scary, unexpected website.

00:03:41.066 --> 00:03:43.992
So, every link that you make here 
will have that warning,

00:03:43.992 --> 00:03:46.163
and every link will pop up 
in a new window.

00:03:46.300 --> 00:03:50.223
That means that I can actually 
delete this target attribute,

00:03:50.223 --> 00:03:53.048
since it's getting set 
behind the scenes, too.

00:03:53.088 --> 00:03:54.420
Or, I could leave it,

00:03:54.420 --> 00:03:57.764
in case I want to move this HTML 
off of Khan Academy one day

00:03:57.764 --> 00:04:00.840
and make sure that link still opens 
in a new window.

00:04:00.870 --> 00:04:02.723
When should you use target?

00:04:02.783 --> 00:04:06.302
Generally, if a link is going 
to another page on the same domain,

00:04:06.302 --> 00:04:08.023
it should open in the same window.

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.

00:04:12.239 --> 00:04:13.641
Enough of that blabbing,

00:04:13.641 --> 00:04:16.649
let me show you 
something else neat about links.

00:04:16.689 --> 00:04:18.653
We can link more than just text.

00:04:18.653 --> 00:04:21.627
We can also link images, 
or text and images!

00:04:21.656 --> 00:04:26.815
Here, we have this image, which is
which is this picture of Tim Berners-Lee.

00:04:26.867 --> 00:04:30.454
I'm going to actually cut it...

00:04:30.464 --> 00:04:34.067
and paste it so that it's inside 
this link here.

00:04:34.094 --> 00:04:36.068
Oh! Sweet.

00:04:36.068 --> 00:04:38.958
Now, if I mouse-over this image,

00:04:38.958 --> 00:04:41.309
I'll see my cursor change to a pointer,

00:04:41.309 --> 00:04:44.379
and clicking it will go 
to the CERN webpage.

00:04:44.379 --> 00:04:46.948
In fact, you could link
your entire webpage --

00:04:46.948 --> 00:04:49.867
and make it 
a big, blue, underlined blob.

00:04:49.867 --> 00:04:57.000
But please don't do that! 
Link with love, my friends.