HTML Tutorial 06: Adding Links To Webpage

As promised in our last tutorial we'll start with how to add links to our webpage. A link is the basic concept behind the internet. It's the idea that you can link one page to another. It's basically a section of a text, image or action that you click and it will directs you to another webpage.

Let's go ahead and create a basic link, the first thing we need to create a link is called the anchor tag like this: <a>Click here</a> but the question is where exactly is this going to link to, is it Google or what? That's why we need an attribute called href= with a value 'http://google.com' if we combine all these (3) together we have a link that will be redirected to Google.com 

Let's do that;

<a href='https://google.com'>Click here</a>

Which means "a" stands for link and in other to tell it the website we want to link it to, we need to write href (Hyperlink Reference) that is the attribute, equals the website's name, make sure you write the full name like this: https://google.com don't just write google.com And don't forget to add within the open and close tag the text you want to link, just like we added "Click here"

You can change it to anything you like but let it be meaningful. I think we should have Google as the link text because our Hyperlink Reference is directed to Google.com 

So, change "Click here" to "Google"

But what if we want to link from one of our webpage to the other, like we have the homepage and contact page and we want the "contact us" link to take us to another page that will contain our contact details on the same website

All we need to do is to name our homepage index.html as we already did from the start of HTML tutorial and create a new file with the title contact.html 

Very Important: make sure the index file and the contact file are in the same directory.

Copy all the stuffs on the index page and paste on the contact page, try to edit title header with a text "contact page" in other to differentiate between the two pages

Let's go ahead and change the link we've created earlier (Google) to our contact page link, how do we do that?

Since we have our two (2) files in same directory, you can easily link by just typing the name of the file.

If we want to link our homepage to the contact page (that is, we want to place a link on the homepage that will take us to the contact page on the same website) we need to just add the name of our contact file which is contact.html within the columns in front of href=

Let's try it.

<a href='contact.html'>Contact Us</a>

Let's preview, you'll see the link, let's click on it to see the magic. It will take us to the contact page. The contact page shows "contact page"

We can also create a link on the contact page that will take us back to the homepage, we going to do that in the next tutorial.

If you're still confuse about this tutorial, try to follow the steps again.

You can't wait to become a professional website developer? get ahead of others or would like to  request for the full video tutorial, join our WhatsApp Based Training or visit us today @Shop 9/11 Sower Plaza Asa-Dam road, Ilorin Kwara State.

You don't have time to learn but would love to have a fantastic website for your brand, check out our budget friendly beautiful website packages. Our web design service is awesome and affordable.