[Web Development #2] – Links in HTML

[Web Development #2] – Links in HTML

In this tutorial, we will:

  • – Learn how to create hyperlinks using the <a> anchor element
  • – Create our own law blog with hyperlinks to our Instagram, LinkedIn and CV
  • – Complete an exercise that will test what you have learned today!

In the previous tutorial, we explored the basic possibilities of HTML and web development! Do not stop now, because in the following tutorials you will learn the fundamentals of HTML & CSS and will be coding your own websites in no time. Before we get there, however, let’s first talk about links!

To view some of the code in this tutorial, you will need to scroll horizontally to the right. To scroll right, click on any of the orange code blocks and press and hold the right arrow key →. You can then scroll back to the left by pressing and holding the left arrow key ←. If you are on mobile, simply swipe left or right.

1. Links 

So let’s create a simple law blog using the HTML structure and elements you learned in the previous lesson. (Scroll right to see full code)

<!DOCTYPE HTML>
<html>
<head>
   <title> My Law Blog </title>
</head>
<body>
  
  <h1> Tony's Law Blog </h1>
   <p> Welcome to my law blog where I will be writing about my experiences and tortures as a law
   student.</p>
   <p>Click here to follow me on LinkedIn </p>
   <p>Click here to follow me on Instagram</p>
   <p>Click here to see my CV</p>
  
</body>
</html>

When opened in a web browser, this will display:

And let’s say we want the visitors of our blog to be directed to our LinkedIn/Instagram/CV when they click on ‘Click here’. Right now, if they click on any of the ‘Click here’, nothing will happen; the lines are simply treated as text.

To direct visitors to a desired location when they click on our text, we have to create a hyperlink. Hyperlinks can direct visitors to other webpages, or locations and files within our own webpage. To create a hyperlink we use the <a> anchor element:

<a href="https://www.google.com/">Click Here</a>

The code above creates a hyperlink with the text ‘Click here’ which if clicked on directs users to the Google homepage (“https://www.google.com”). Just like this:

Hyperlinks are made up of the opening tag <a>, the closing tag </a>, and the href attribute which is located within the opening <a> tag as seen in the code above. Attributes are keywords that are placed inside opening tags that essentially control the behaviour of elements. We will come across attributes just like href, all the time in our HTML journey, so take the time to understand the following diagram. 

The href attribute is very important because its value dictates where the hyperlink will direct to when clicked on. In the above example, the href value directs users to  “http://dabrook.org”. However, if we change the href’s value to “https://www.instagram.com/”, this will direct users to the Instagram website. If we do this, we should also change ‘Visit DaBrook’ to ‘Visit Instagram’ so as to let our users know the location they will be directed to if they click on our hyperlink.

Okay, so now that we know how to create hyperlinks, let’s fix our law blog and direct visitors to our LinkedIn/Instagram and CV. To do this, copy the link of your LinkedIn and Instagram profile. Don’t worry about the CV for now, we will deal with it shortly. 

Take a look at the following code: (Scroll right to see full code)

<h1> Tony's Law Blog </h1>
<p> Welcome to my law blog where I will be writing about my experiences and tortures as a law student.</p>
<p><a href="https://www.linkedin.com/in/antonis-loizou-7a175717b">Click here</a> to follow me on LinkedIn</p>
<p><a href="https://www.instagram.com/thisisbillgates">Click here</a> to follow me on Instagram</p>
<p><a href="#">Click here</a> here to see my CV</p>

This will show:

So now,  the three ‘Click here’ pieces of text have been turned into hyperlinks! If clicked on they will direct users to the desired location (LinkedIn/Instagram/CV). But wait a minute, my CV is not on a website and in our code we used ‘#’ as a value for the href attribute. This is called a ‘dummy link’ and is used by developers as a temporary solution until the real link is added.  Therefore, when we click on the third ‘Click here’ nothing happens. So how do we direct visitors to our CV when they click on the hyperlink – how do we link files that aren’t websites?

Well, as previously mentioned, hyperlinks are not limited to websites and can be used to direct people to actual files and locations on the HTML page (e.g our CV). To do this, the CV word document has to be located/placed in the same folder as the HTML document. Accordingly, I placed my HTML document and CV.docx inside a folder called ‘CodingLawyer’.

Once the HTML document (index.html) and CV document (CV.docx) are located in the same folder(CodingLawyer), we can use a hyperlink to link to our CV. We can do this with the following code: 

<p><a href="./CV.docx">Click here</a> to see my CV</p>

Notice the href value of “./CV.docx”. The ./ is called the ‘relative file path’ and essentially, tells the hyperlink to look inside the same folder our HTML document is located in. In the code above, we are telling the hyperlink to look into the CodingLawyer folder since the HTML Document (index.html) is located there. After the slash (/) the hyperlink is told to link to the CV.docx file.

Ultimately, if <a href=”#”> is replaced with <a href=”./CV.docx”>, the third ‘Click me’ hyperlink will work perfectly and will direct to the CV file! When using the relative file path, always make sure that the files you want to link to are located in the same location as your HTML document and that you input the precise name of the file you want to link to. For example, if your CV is named MyCV, for the hyperlink to work you need to type: <a href=”./MyCV.docx”></a>.

Good job! Now that we know how to use the ‘relative file path’ (./), the third ‘Click me’ will work perfectly. Just like this: (Scroll right to see full code)

<h1> Tony's Law Blog </h1>
 <p> Welcome to my law blog where I will be writing about my experiences and tortures as a law student.</p>
 <p><a href="https://www.linkedin.com/in/antonis-loizou-7a175717b">Click here</a> to follow me on LinkedIn</p>
 <p><a href="https://www.instagram.com/thisisbillgates">Click here</a> to follow me on Instagram</p>
 <p><a href="./CV.docx">Click here</a> here to see my CV</p>

As an alternative to the code above, you can code your hyperlinks on their own – i.e they don’t need to be placed inside the <p> element. Just like the following code: (Scroll right to see full code)

<h1> Tony's Law Blog </h1>
 <p> Welcome to my law blog where I will be writing about my experiences and tortures as a law student.</p>
 <a href="https://www.linkedin.com/in/antonis-loizou-7a175717b">LinkedIn</a>
 <a href="https://www.instagram.com/thisisbillgates">Instagram</a>
 <a href="./CV.docx">CV</a>

When opened in a web browser, this will display:

Like our first piece of code (‘Click me’), this alternative will work perfectly and users will be able to access our LinkedIn/Instagram and CV by clicking on the hyperlinks!

2. Exercise

Congratulations! Now you know how to create hyperlinks in HTML. So let’s test what you have learned today!

In the code editor below, create three hyperlinks. The first hyperlink should direct to “https://www.instagram.com/” and have the text ‘Instagram’. The second hyperlink should direct to “https://www.linkedin.com/” and have the text ‘LinkedIn’. The third hyperlink should direct to “./CV.docx” (assume that it is located in the same file as the HTML document) and have the text ‘My CV’.

Leave a Reply

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