HTML links

- [Voiceover] You've already learnt
a bunch of HTML tags.

But do you know what HTML actually means?

HTML stands for
HyperText Markup Language.

It's a way of using tags
to markup content.

But what does hypertext mean?

It's actually a phrase that was invented
before the Internet even existed,

in the 1960s, to mean
text that is connected to other text

that the reader can immediately jump to.

Tim Berners-Lee invented HTML,

and other ingredients
of the Internet, like HTTP,

to be a way to connect
text to other text

located anywhere in the world.

How do we connect
webpages to other webpages

in HyperText Markup Language?

With a hyperlink, of course!

Which we usually just call a link, now.

How do we make a link in HTML?

This is where it gets weird.

You might think that we'd use
a `link` tag...

But actually, that's used for
a different sort of link in HTML.

Instead, we use the `a` tag,
where the "a" stands for "anchor".

It's anchoring the link in the page
at a certain location

and connecting that anchor
to a different webpage.

To make a link, you know
we have to write the tag,

but we also have to decide
on the text of the link,

and then the address
that the link goes to.

Let's make this link to a page with more
information about the birth of the web.

The text of the link will go inside
the start and end tags.

So I'll stick my cursor
in here and write,

"Read more about the history of HTML".

So now we can see that text
looks like a link.

But it's not going anywhere yet.
We need to add an address.

We don't actually want the address
to show up on the page,

but we still need the browser
to know what it is.

So we put it inside an attribute
on the a tag.

That's the href attribute.

What does "href" stand for?

I will give you a hint:
You have seen that "h" a lot.

It stands for "hyper"!
Hyper-reference.

Now, I'll paste in the address,
which we also call a URL.

Do you notice how this URL
starts with "http:" ?

Guess what that "h"stands for?
Hyper!

HTML is all about the hyper.

This URL specifies everything the browser
needs to know to find the webpage:

The protocol used for finding it,

the domain it is on,

and the path that it's located in
on the server.

Since it specifies everything,
we call this an "absolute URL".

On some webpages, you might see URLs
that start with just slash and a path.

That tells the browser to stay
on the current domain,

and just look for a different path
on that domain.

That's called a "relative URL".

We use them all over Khan Academy
when we link between our content.

You should stick to absolute URLs
in the webpages that you make here,

to stay on the safe side.

We can also tell the browser
where to open the page:

the current window,
or a new window.

To tell the browser to open
a link in a new window,

we'll add another attribute, target.

`target="_blank"`

Now, I want you to pause this
talk-through and try clicking the link.

Go ahead, I'll wait.
Clicky-clicky!

What happened?

You probably saw a warning

about the link being
from a user-generated webpage.

And then if you clicked "OK",
the link opened up.

That's because
we treat links a little special

on the webpages made here.

Because we don't want users thinking
that links are specially endorsed

by Khan Academy and then landing
on a scary, unexpected website.

So, every link that you make here
will have that warning,

and every link will pop up
in a new window.

That means that I can actually
delete this target attribute,

since it's getting set
behind the scenes, too.

Or, I could leave it,

in case I want to move this HTML
off of Khan Academy one day

and make sure that link still opens
in a new window.

When should you use target?

Generally, if a link is going
to another page on the same domain,

it should open in the same window.

And if it's going to a page on another
domain, it should open in a new window.

Enough of that blabbing,

let me show you
something else neat about links.

We can link more than just text.

We can also link images,
or text and images!

Here, we have this image, which is
which is this picture of Tim Berners-Lee.

I'm going to actually cut it...

and paste it so that it's inside
this link here.

Oh! Sweet.

Now, if I mouse-over this image,

I'll see my cursor change to a pointer,

and clicking it will go
to the CERN webpage.

In fact, you could link
your entire webpage --

and make it
a big, blue, underlined blob.

But please don't do that!
Link with love, my friends.