How To Add Hyperlink To HTML Page
This HTML tutorial post will guide you on adding links to your html website or page.
Introduction
In my previous posts, you have learnt how to add images to your html page, and here, you will learn how to add clickable links to your html pages which on clicking, will lead you to a separate tab or window. I will be using codepen to do this code for this lesson and in the next post, I will be guiding you on how to get started with Notepad code editor, as an alternative source code editor, in case you want to consider the same, but, for all tutorial posts, I will be doing the code on codepen, for convenience sake and at some particular point for some projects or examples, if codepen does not work, then, I would be using Notepad . Hence, it is a good idea to be conversant to be familiar with both Codepen as well as Notepad and any code editors of your choice.
What is <a> tag
The <a> tag is the one that defines the hyperlink to create a clickable link to connect a page with another page or destination connected through a URL and a href attribute as shown in the code below. The most attribute of the <a> tag is the href attribute without which the <a> tag cannot create the hyperlink.
What is href attribute
We use href attribute with the <a> tag to point to the destination page that the URL of the link indicates. The presence of the href attribute is essential in order to render the link as a hyperlink. The syntax that we use for this attribute to get the hyperlink is
<a href="URL">Creating a Hyperlink
In this example case, I am going to create two hyperlinks, one is to link to my technology Blogger site and another hyperlink to connect to my Substack Page. I have also added an image after the header using the <img> tag that I have already explained in my previous posts. I have assigned the value of target attribute as “_blank”, in order to open the clicked destination page in a new tab or window. If you wish to check this code in my code editor, here is the source.
Here is the code for this example:
Source Code
<h1>HTML LINKS</h1>
<p>Full stack development</p>
<img src = " https://i.imgur.com/syLfqCo.png" />
<a href= " https://meerateachestech.blogspot.com/" target="_blank"> VISIT MY MY BLOG</a>
<p>I write Full-stack development absolute beginners, d, may visit my blog for reading all coding documentations plus subscribe to my newsletter at substack</p>
<a href= " https://meeramenon.substack.com/embed" width="480" height="320" style="border:1px solid #EEE; background:white;" frameborder="0" scrolling="no" target="_blank">SUBSCRIBE MY NEWSLETTER</a>How the Page looks like
Since I have used screenshots here to visualize the page for you, there is only one html page created by the above code, but, due to the huge size of the visual, I have cut it into two parts, the first part is the one showing the heading and paragraph with the image used and the second part shows the same image with the two hyperlinks connecting to the destination page of my Blog and Substack Newsletter. If you code on your editor and click the two links it will open in new windows and take you to the destination pages respectively.
Conclusion
This was all about creating hyperlinks in your html page and this is very important when you start building websites in HTML. If you do not understand anything in the above post or code, do mention in the comments below or DM me to check with any doubts that you may have after reading and trying out the code for yourself. Please try the same exercise with your own hyperlinks . But do try out my code first with the given hyperlinks and then try doing on your own!
Happy coding in HTML. !
More of HTML posts:
How To Add Images from Saved Images on device
