-: 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 "H ref" attribute.
Then ="", 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.
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.
That 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".
Just upper case 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 "block 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 block.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 "H ref".
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 "H ref", 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.
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", "flex box"
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 "challenges"
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 "H ref" 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.
Now, 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 instead?
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 "flex box" and "CSS grid".
So just to make that navigation look a bit more
like, complete,
but all of these links
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.