How To Create Links in HTML [ Both Absolute And Relative Links]

Facebook Twitter Email Whatsapp

 

At the end of this short piece of reading, you will learn how to practically create links to webpages, profiles, pdfs, and pictures among others in html.

 

Links that are used to link external items into an html file are called absolute links. Absolute links usually have a https:// and www in a url.

 

For example, in my webpage, I may want to include a link to my video file from YouTube so that when you click the link on the webpage, it will take you outside this website to watch the video on YouTube. This is how an external link works.

 

Relative links are links used to link items within in html. The items must be in the same path or location or folder. For example, I may want to link a picture to a document that are in the same folder in my webpage.

 

You will get to understand this well when we go deeper into it with this practical presentation.

So, let’s get started. Open your brackets editor. 

Create a new file. Give it a name called links.html. Save this file in an html folder on your desktop (create a folder and name it html on your desktop if you don't already have one. This is the folder you will save the links.html file in)

 

On your brackets editor, create the basic html skeleton. Write links for the title in the head section. 

The <a> tag is used to add links in html whether absolute or relative links.We are going to start with absolute or external links, that is, creating external links to html elements.

 

 In the body section, create a paragraph and write a sentence like, 'this is my Facebook page'. 

Now, you're are going to add the link of your Facebook page to the sentence; 'Facebook page'.

 

 Open the <a> tag and wrap it around the text that you want to add the link to. So, open the <a> tag and wrap it around ‘Facebook page’.

Give an attribute href equals (=) the link or url of your Facebook page.

 

Type the link of your facebook page in here as shown. You can use your Facebook profile if you don’t have a Facebook page.

 

Now, save and check changes. You can see the sentence 'Facebook page' has changed color and underlined telling you the text has been converted to a link. 

Click on the link and yeah! It opens your Facebook page.

 

But what did you observe? The link redirected to your Facebook page but your html webpage disappears right? 

To prevent this from happening, we will have to open the link in a new tap.

 So let’s go back to the editor. And next in the href attribute, type target equals underscore blank (target=_blank).  The target attribute specifies where to open the specified link. Underscore blank means the link is opened in a new tab.

 

Save and check on live preview and you will notice that the link now opens in a new tab.

 

In html, it is possible to add links to any element on the webpage but most often, we use only two elements for links and that is, text and images.

 

So, let’s see how we can add links to images as well. First add an image using the image tag.

 

Now, let’s add a link to this image by wrapping the <a> tag around the image.  I will add the url of PauTeCom Web. Save and click on live preview.

 

When you hover over the image, the cursor changes to hand symbol meaning the image has been converted in to a link.

 Click on the image and it will redirect you to PauTeCom Web.

 

Alright. You realize that the links we added so far are external. But what if we want to link a local file that is stored on our computer?

 A local file is specified using the relative path and this brings us to relative or internal links.

 

Write another paragraph with the sentence; this are my pictures. Open the <a> tag and wrap it around the word 'pictures'. We want to link our previous project called images.html in our html folder on the desktop. So add the path here like this.

 Check on live preview. When you click on pictures, it will open the images.html containing these images.

 

You can add any other local file that is stored on your computer. You only need to add the name of the file and its path that you want to link.

You can add links to both external and local documents, pdfs and many more using the same method as shown below.

Alright, you can go ahead and experiment with most other elements on your own to boost your competence.

Quick Summary

·       Text, images and other elements can be converted into links in html

·       Relative links are used to link local files, webpages or documents within the same system.

·       Absolute links are used to link to external documents or webpages. Absolute links have https:// and www