All language subtitles for 015 Hyperlinks.en_US

One of the fundamental building blocks

of the internet are hyperlinks

or for short, just links.

So links are what actually enables the internet

to be a worldwide web.

So without links between pages,

there would be no web.

And so let's now learn

how to place links on our own webpages.

Now, we can place links into two big categories.

The first category is links

that point to other pages within our own website.

So let's say that here in our website,

The Code Magazine,

we had another blog post.

So we could then create a link from this page

to that other page, right?

Now, on the other hand, the other category

is links that point to outside of our website.

So for example, if I placed a link to udemy.com here

on this page, then that, of course,

would be a link to the outside

of our website, right?

Now, we do create these two types of links

in the exact same way in HTML

but there's still some kinds of particularities

that we need to be aware of

and so let's now actually start with the second kind

of link that I was describing,

which point outwards of our own website.

So what I have here in the demo

is that here at the end of this part,

so of this what is HTML section,

I have a link to the MDN Web Docs.

So this is basically a website

where you can learn all about HTML

and also CSS and JavaScript.

And actually, I will show you this site a little bit better

in the next section

because it's important as a web developer

to know how to use

and find information here in this web documentations page.

So what we want is to grab the link of that

and so to do that,

just google MDN, which stands for Mozilla Developer Network

and then just HTML.

And the exact URL that we're gonna use here

doesn't really matter.

All we want is to have some URL

that points outside of our own page.

Right?

So let's just grab this one here,

which was the first Google result.

So I'm copying it and again,

keep in mind that this is called a URL.

So as you know,

every single website on the internet

has its own URL

and so that is what we need in order

to create a link to that page.

Okay?

So let's see.

Yeah, we want to put that right here

after this unordered list.

Right?

Let's see in the demo.

Yeah, so right here after the ordered list.

So that's here.

So to create a link in HTML,

we use the a element, which stands for anchor.

So technically, a hyperlink

or a link is actually called anchor in HTML.

So it is an anchor element.

We can close it.

Then we can specify some content

and then we can, or we have to actually close it.

So let's start by doing that.

Now, as for the content of the link,

what we specify here is actually the text

that we want to be displayed on the page.

So the text of the link.

So in this case, that is this MDN Web Docs.

All right?

So MDN Web Docs.

But now, what about the URL

where we want this link to point to?

Well, for that, we need to once again use an attribute.

So in this case, it is the href attribute.

Then equal, double quotes

and then we can simply paste that URL

that we copied right here

and that's actually it.

So if I give it a save now,

and then reload our page here,

then here is our link.

And you see down there,

so here in this corner

that when I hover it, it actually shows me the URL

and then when I click it,

our page goes there.

Great, and so that is actually already the basics

of creating a link.

Very simple, right?

Now, we want this link here

to actually be like inside of this text.

So inside of one more paragraph here.

Right?

So let's create that paragraph.

So you can learn more at,

and then this link here

is basically just a continuation of the text in here.

So inside of this paragraph.

So we can finish our sentence here

and then close up our paragraph as usual.

And so now that looks just like in the original one.

Right?

Now, notice what happens here once again

when I click it.

So you see that we navigated directly

to this page and now our own page disappeared.

So of course, we can go back here

but sometimes what we want to do

is to open a link in a new tab.

So let me also show you how we can do that.

And of course, we don't always want that.

So many times, we actually want the page

to really move to the URL that we specified here

but also sometimes it's useful

to keep the page open and simply open the URL

in a new tab, and we can do that

by specifying the target attribute,

then the quotes as always

and then this one looks a bit weird,

so it's underscore and then blank.

So give that a save

and when we reload, it will look the same

but the behavior should have changed.

And indeed, notice how it opened a new tab

and our original one is still open.

Great.

So that worked and so we have now a link

that points to a URL that is outside

of our own website.

But now about that first scenario

where we want to link to an internal page basically.

Let's do that now.

And going back again to our demo,

we have here this example.

So in the very beginning, right after the main heading,

we have these links here

and so these are supposed to be links

that point to pages that are part of this blog.

So let's now create this first link here,

so blog, and also create a new page

where we can actually link to.

Okay?

And so creating a new page is as simple

as creating a new HTML document.

So let's open up again our sidebar

by clicking here and then we see our explorer here basically

with all the files

and then again, we create a new file in this icon here

and let's call it blog.html this time.

And now we could use this cheat here

to create the HTML structure

but actually, let's practice a little bit here again.

And if you want, you can even pause the video

and type it out on your own

but I will just do it here very fast now.

So html.

Then we need to close it, of course.

Now, inside of the html,

remember, we have the head.

Inside of the head, we have a title usually.

And this one, let's just call it like this, BLOG.

So just uppercase to make it really obvious

and you see that this is really

just a very bare bones structure,

just a head with a title.

And actually, the same for the body,

which remember is the part

that is going to be visible in the browser.

So here I will simply specify an h2 element

and close it also here

and let's call this one BLOG as well.

Okay, ah, we still need to close the body, of course.

And that's it.

Let's give it a save.

And so here we have a very simple,

very bare bones blog HTML document.

But now with that in place,

we can create a hyperlink or a link right here

in this index.html, which will point to that blog.html.

And so the browser will then navigate to that page.

So let's do it right here after the h1.

And so the anchor element.

Then we need the href

and so now what we do here instead

of specifying a URL

is to specify the name of the HTML file

that we want to go to

and so in this case, it is, of course,

this blog.html that we just created.

Then here as the content of the element,

let's just write blog again

and then close it as always.

Give it a save.

Here is our beautiful link

and now watch what happens as I click it.

Bam, we are now at blog

and you can see that also here in the URL bar.

So which is now all of this file.

And so all of this path

and then at the end, blog.html.

Right?

Now, to go back, we could, of course, click here

on this back button but what we could also do

is to add a link here,

which simply points back to index.html.

Right?

That sounds like a nice idea, doesn't it?

So let's come back here to blog.html

and as yet another challenge,

now I want you to actually create this link on your own.

So pause the video here and create a link

that points back to index.html.

So did you manage to do that?

Or at least try it?

Well, I sure hope so.

But anyway, of course,

we use the a element again.

Then we specify href

and well, to go back, we just say index.html.

And then here we can specify any text,

which I didn't tell you which one

because it doesn't really matter.

Let's just say back to home

or something like that.

Give it a save.

And now once we reload it,

we have our link, we can click it

and so now we can basically go back

and forth between these two pages

because they're now connected through these links.

So we can go to the blog,

we can go back and forth and so on and so forth.

All right, so let's close up this one here.

We don't need it anymore.

And just to finish,

we can also actually specify a link

that doesn't go anywhere.

So let me show that to you as well.

So let's just write the content first

and here I have Challenges I think

in the demo.

So we have Challenges Flexbox and CSS Grid.

So that's Challenges

but watch what happens now

when I reload the page like this.

So you see that it only says challenge

but notice how it's just normal text.

It's not blue and not underlined,

so it's clearly not a link, right?

So even though it is actually an anchor element

but what makes an anchor element really a link

is the href property.

And so we really need to specify it,

otherwise it is not a link at all.

It is then just an anchor,

which is not really useful.

But what if we don't want this to point anywhere

as I was saying?

Well, the solution to that

is to specify this hash symbol right here.

Right?

So if I now save it and reload,

then we are back to this being a link actually.

It just doesn't point anywhere.

What happens when you click on this link

is that basically it goes back to the top

of this current page, okay?

And a little bit later in the course,

we will actually make use

of this behavior but for now,

I just want you to know

that this is how we can specify links

when we don't have any URL yet for them

or don't have any page.

So basically, this is like a placeholder link.

Okay?

And so let's just copy this here twice.

There's no need to write it again.

But of course, if you want,

you can write it again.

So just for this Flexbox and CSS Grid.

So just to make that navigation look

a bit more like complete.

But all of these link,

they should not point anywhere.

Okay, and this is how you specify links

or hyperlinks or anchors as we can also call them in HTML.

So this is a really important part

of the web as I said in the very beginning

and so make sure that you understand how they work

and how we place them inside our own webpages.