How To Link Webpages Together With HTML

In this short tutorial you will learn how to link webpages together with HTML.

It's important to fully grasp how this works since the internet is really just a bunch of webpages linked together. You can watch the video version of this lesson below:

In this video, you're going to learn how to add an anchor element no your webpage to link two webpages on the internet together.

Let's get started by creating an anchor element on our page.

Now, I'm going to create the anchor element just before this piece of text that I actually want to turn into a hyperlink.

This href value is going to be linking to the page that we want to link to. I'm just going to link to my own personal blog, just so we can use it as an example. Okay make sure that we close up our element here, and what this is saying is we're linking to RobinHaney.com.

It's going to select the text inside our anchor element and link it to this URL here, which is Robin Haney. If we save this and refresh page, we can now see that the text Robin Haney is a hyperlink.

If we click on it, it will take us to my blog.

This is the heart of the internet, linking webpages together.

You now know how to link webpages together with html.

I'm also going to show you what happens if we remove this closing anchor element here and I stick it at the end of our paragraph. What's going to happen is it's going to start from my name here, it's going to select all the text, and change it to a clickable hyperlink. You need to make sure that you're putting the end of your anchor element in the right spot of your text, and the beginning as well, so that you're not selecting large pieces of text when you only want a couple of words or so.

Another thing we can do is we can actually link to images as well. I'm going to go to Google. I'm going to go to images. I'm going to look up an image of a cat. I think I'm going to pick this one here because it's the funniest looking one.

What I'm going to do is I'm going to view the image. I'm going to right click and copy image address. Now it's saving the URL of the image address. I'm going to paste it into our image source here.

Now we're going to use an image off the internet to add to our page.

Voila, if I refresh the page, we can see here that that image is being shown here. Keep in mind, for that image to show, you have to be connected to the internet and that link address has to be correct. If it changes or if the image gets taken down off the internet, then it won't work.

Again, usually if possible you want to link to images that you have uploaded yourself so that you know that the URL will always be there online on the internet, but that is something you can do as well.

I'm going to go back to my profile picture, and again we can see that it's back the way I want it to be. This is how we link documents together with html and how we can make anchor elements on our web pages.