All language subtitles for 17 - Links.en

- The link.

Let's talk about how to make links on the web.

These days, we take linking for granted.

Of course we know we have navigation bars,

menus of links, teaser cards, pages of article titles

all begging us to click to see more,

click to go elsewhere, it's normal.

But back in the 1980s, people who were inventing new ways

for computers to help us do our work were obsessed

thinking about and talking about the link.

Obsessed with hypertext, hypermedia, hyperlink.

The very idea that there could be a special zone on a page

that would be magically activated to teleport you

to another place, another page.

It was groundbreaking.

It actually took over 20 years of theorizing

and experimenting from the mid 1960s to the early 1990s

before we ended up with the web.

Even the fact that it's called the web

is because of this obsession with how different parts

link to other parts, creating a web.

The code for creating a link is fairly simple.

The way that the link transformed computing information

and everything about our modern world is profound.

To make a link, we use the A element.

A stands for anchor.

On the opening tag, we need an href attribute.

H-R-E-F equals quote quote.

This points to where we want the link to go.

Href stands for Hypertext Reference.

A nerdy phrase that's a throwback

to all those conversations back in the 80s and 70s.

Between the opening and closing A tags,

put whatever it is that you want to be clickable.

Usually text or an image or both, we start simple.

With some words.

Here, we can see the results.

The phrase, this is a link, is now a link.

If we click on it, it goes to the website at example.com.

By default, the A element is an inline element.

And it easily goes in the midst of the flow

of some text, like this.

You can see here, here's a paragraph

with the link element wrapped around the words with a link.

We can wrap links around anything, not just text.

Here's a link wrapped around the image element.

We could format our code to make it

a little easier to understand.

Now, if I click on this image, it also goes to example.com.

You can also put a link around more complex content

like a teaser card.

We can wrap it A element around several other elements

creating a whole group of things that all become linked.

That's how the A element and the href attribute work.

Now, let's look a little more deeply into the URL

that we put into the href attribute.

I was just using HTTPS://example.com.

Let's talk about the wide variety of what can go in there.

If you are linking to something out on the web someplace

or some other website, you can create the link

by putting the whole URL in the slot.

It doesn't actually matter whether you include

the trailing slash or not.

Some URLs point to the home page of a site.

Others point to content deeper in.

All of these are what's called an absolute URL.

You point to a specific place on the web, an absolute place.

You must include the HTTP or the HTTPS in an absolute URL.

When we use a modern browser these days,

we can get away with just typing example.com

up in the URL bar and the browser will fill in the rest.

But when we make a link as a developer

or someone adding content to the website,

we need that HTTPS:// or HTTPS:// part.

HTTP stands for Hypertext Transport Protocol.

Another nerdy phrase from the 1980s.

This is a way that everything on the web

talks to everything else.

The protocol, the rules of the communication system.

It's one of the most important things that got invented

when the web was invented.

So what's the difference between HTTP and HTTPS?

Well the S stands for Secure.

Originally, all web addresses were HTTP.

Today, all the experts agree every website

should be using HTTPS instead.

That's how to make a link

using an absolute URL as your path.