Hyperlinks are the key to any good webpage that you want to create that has an intuitive navigation bar. Even if it is not being used in a navigation bar, hyperlinks in html can still be used to link to specific pages an end user might be interested in going to.They can also help keep an user on your page for longer.
Like I mentioned before, hyperlinks can either take you to other webpages created by other companies like Google or YouTube. Or, they can link to pages within your webpage that can easily help users navigate around your page with ease. If a page has a poor use of hyperlinks I myself usually do not use it. Being able to easily get around a website is crucial to keeping people happy when they are visiting your webpage.
Basic hyperlinks are fairly simple to get used to so lets go over a really simple one.
<a href=""></a>
Now lets populate this "a" tag. I will show two examples. The first one will be what type of data is required to go into it and the second will be the data that I chose to populate it with.
<a href="Url/Website Link">What you want the link text to say</a> <a href="https://www.amazon.com">This link will take you to the Amazon home page</a>
If you entered eveything correctly you should see this following link in your webpage.
This link will take you to the Amazon home page
This type of link we just created is called an "Absolute Url" this type of Url are links to pages that are not connected to our webpage they are two completely different websites. The other type of Url is called a "Relative Url". This type of url links to a page that is within your webpage to it. Before we get into the syntax of a relative url, there is one more thing about an absolue url that I want to show you guys.
If you want to open a new tab in the browser to keep your user on your page you can add a (target="_blank") value. I'll walk you guys through this below.
<a href="https://www.amazon.com" target= "_blank">This link will take you to the Amazon home page</a>
Your Url link will look the exact same but the only difference is that it will open your url in a new tab in your browser. The link below should take you to the same Amazon home page, but if you look at your tabs you will notice that this page will still be opened in it's respected tab.
This link will take you to the Amazon home page in a new tab
Lastly we will go over the syntax of a relative url. This is is a little tricky because the link is based on the path of your folders within your webpage. Enough talking though, lets dive right into it.
<a href="Path to desired folder based on current folder">What you want the link text to say</a> <a href="sustainability.html">This link will take you to my Sustainability blog post</a> <a href="../hobbies/bird-wathing/index.html">This link will take you to a file not within the same folder</a>
The second example showed the syntax for a file within the same folder. The following exmaple showed a file within a folder that was I was not currently in. I had to use "../" to leave the folder I was currently in and select the new folder and file by its name "../hobbies/bird-watching/index.html"
Here are my relative links:
This link will take you to my Sustainability blog post
This link will take you to a file not within the same folder