HTML links | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy


– [Voiceover] You’ve already
learned a bunch of HTML tags, but you know what HTML actually means? Well, HTML stands for
HyperText Markup Language. You know what a Markup Language is now. 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’s
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
use a link tag but actually that’s used for a different
sort of link in HTML. Instead, we use that a tag
where the a stands for anchor. It’s anchoring the link in the
page that a certain location and connecting that anchor
to a different webpage. To make a link, you 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. So the text of the link will go inside the start and the end tags. I’ll stick my cursor in here and write, “Read more about the history of HTML.” Okay, 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 know what it is. So we put it inside an
attribute on the a tag and that’s the href attribute. What does href stand for? I will give you a hint. You have seen that H a lot. Stands for hyper, hyper reference. Now I’ll paste in the address which we also call a URL. 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’s on, and the path that it’s
located on the server. So since it specifies everything, we call this an absolute URL. On some webpages, you might see URLs that start with just slash in the path. That tells the browser to
stay on the current domain and just look for different
path on that domain. That’s called a relative URL. We use them all over in Khan Academy when we link between our content. You just 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 link in a new window, we’ll
add another attribute. target equals, this (mumbles), underscore blank. Now, I want you to pause this talk through and
try clicking the link. Go ahead, I’ll wait. Clicky, clicky, clicky. What happened? You probably saw a warning about the link being from a user generated webpage. And then when you click
okay, 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 especially 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 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 new window. When should you use target? Generally, if it’s a
link is going to another page on the same domain, it should open in the same window. If it’s going to a page on another domain, it should open in a new window. Okay, 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 we said this picture of Tim Berners-Lee. So I’m going to actually
cut it and paste it so it’s inside this link here. Oh, sweet. Now, if my mouse’s 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.

Tags:, ,

Add a Comment

Your email address will not be published. Required fields are marked *