Create HTML Links and Hyperlinks to Connect Web Pages
Free Web development courses with real-time projects Start Now!!
Links, predominantly, are used to link various web-pages or HTML documents with each other. In other words, it is a connection between the source and the destination. These links are often referred to as hyperlinks that enable users to navigate between web-pages through text, images, phrases, etc.
Links are specified using anchor or <a> tag.
Syntax for HTML Links:
<a href=”URL of the web-page or HTML document”>Text</a>
Here, href is used to specify the destination of the hyperlink that will be created. Text is the content that will appear on the hyperlink.
Code:
<!DOCTYPE html>
<html>
<h3>Example Of a link</h3>
<body>
<p>Click on the following link</p>
<a href = "https://data-flair.training/">DataFlair</a>
</body>
</html>
Output:
HTML Internal Links or Local Links
Internal links are the hyperlinks whose destination lies within the same website or the domain of the website. Their URL is specified relatively i.e., a full URL like https://data-flair.training/ is not specified, instead, a relative URL such as headings.html is given.
Code:
<!DOCTYPE html>
<html>
<h3>Example Of a link</h3>
<body>
<p>Click on the following link</p>
<ul>
<li><a href = "headings.html">DataFlair Internal Link</a> </li>
<li><a href = "https://data-flair.training/">DataFlair External Link</a> </li>
</ul>
</body>
</html>
Output:
Creating Links in HTML
As we’ve discussed, a link is a connection between the source and destination, specified using the anchor tags. Generally,
- An unvisited link is displayed as underlined and blue
- A visited link is displayed as purple and underlined
- An active link is displayed as red and underlined
- Link colors can be changed while hovering also
These properties of the link can be easily styled using CSS.
CSS for links
CSS properties can be used to style the links in HTML.
- To denote an unvisited link, red color has been used.
- To denote a visited link, green color has been used.
- The link changes to pink color, every time the mouse is passed through it i.e., hovering.
- To denote a link that has already been selected, the blue color is used.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<ul>
<li><a href="headings.html">LINK1</a></li>
<li><a href="frames.html">LINK2</a></li>
<li><a href="elements.html">LINK3</a></li>
</ul>
</body>
</html>
Target Attribute in HTML
HTML target attribute specifies where the document under the anchor tag should be opened. The options available are-
- _blank – The hyperlink is opened in a new window or tab.
- _self – The hyperlink is opened in the same window or tab.
- _top – The hyperlink is opened in the full body of the window.
- _parent – The hyperlink is opened in the frame of the parent.
- framename – The hyperlink is opened in the frame whose name has been mentioned.
Code:
<!DOCTYPE html> <html> <body> <h2>The Target Attribute</h2> <p>Target attribute set to "_blank", Opens in a new browser window or tab.</p> <a href="https://data-flair.training/" target="_blank">DataFlair</a> <p>Target attribute set to "_self", Opens in the same window or tab.</p> <a href="https://data-flair.training/" target="_self">DataFlair</a> <p>Target attribute set to "_top", Opens in the full body of the window.</p> <a href="https://data-flair.training/" target="_blank">DataFlair</a> <p>Target attribute set to "_parent", Opens in the parent frame.</p> <a href="https://data-flair.training/" target="_blank">DataFlair</a> </body> </html>
Output:
Use of Base Path in HTML
The <base> tag within the <head> of an HTML document can be used to provide a default base path for all the links within the web-page. The links contain the relative paths which are concatenated with the base paths to specify the full URL. For example,
Code:
<!DOCTYPE html>
<html>
<head>
<title>DataFlair</title>
<base href = "https://data-flair.training/">
</head>
<body>
<p>Click on the following link</p>
<a href = "/success-stories/" target = "_blank">Success Stories</a>
</body>
</html>
Output:
HTML Image Link
An image can also be used as a link, i.e., on clicking the image, the control will be redirected.
Code:
<!DOCTYPE html> <html> <body> <h1>Using Image as a link</h1> <p>Click on the image to visit DataFlair.</p> <a href="https://data-flair.training/"> <img src="DataFlair.png" alt="DataFlair" style="width:500px;height:500px; border: solid;"> </a> </body> </html>
Output:
HTML Button Link
Button can be used as a link by using a JavaScript code that would specify where the control should be redirected once the button has been clicked.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: #008CBA;
border: solid;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 500px;
}
</style>
</head>
<body>
<button onclick="document.location = 'headings.html'">DataFlair</button>
</body>
</html>
Output:
HTML Link Title
Link title can be used to display extra information related to a particular link. It is displayed as tooltip text, every time the mouse is hovered over the link.
Code:
<!DOCTYPE html> <html> <head> </head> <body> <a href="https://data-flair.training/" title="Go to DataFlair">DataFlair E-learning</a> </body> </html>
Output:
HTML Download Link
Links can be provided to download a particular file. For this, mention the name of the file to be downloaded in the href.
Code:
<!DOCTYPE html> <html> <h3>Download link</h3> <body> <a href = "0801CS171064_0801CS171080.pdf">Download PDF File</a> </body> </html>
Output:
HTML External Paths
Paths can be mentioned using the full URL or what is relative to the website. For example,
Code:
<!DOCTYPE html> <html> <body> <p>Full URL</p> <a href="https://data-flair.training/">FULL</a> <p>Same folder within the same website</p> <a href="C:\Users\shreya\Desktop\DATAFLAIR\frames.html">Entire location</a> <p>Same folder</p> <a href="frames.html">Same Folder</a> </body> </html>
Output:
HTML Link Bookmarks
If a web-page is too long, it would be a tedious task to jump to its specific portions. To facilitate this, link bookmarks are useful in HTML. For example,
Code:
<html> <body> <p><a href="#T11">Jump to Topic 11</a></p> <!--link the ID in href--> <p><a href="#T17">Jump to Topic 17</a></p> <p><a href="#T20">Jump to Topic 20</a></p> <h2>Topic 1</h2> <p>paragraph 1 </p> <h2>Topic 2</h2> <p>paragraph 1 </p> <h2>Topic 3</h2> <p>paragraph 1 </p> <h2>Topic 4</h2> <p>paragraph 1 </p> <h2>Topic 5</h2> <p>paragraph 1 </p> <h2>Topic 6</h2> <p>paragraph 1 </p> <h2>Topic 7</h2> <p>paragraph 1</p> <h2>Topic 8</h2> <p>paragraph 1 </p> <h2>Topic 9</h2> <p>paragraph 1 </p> <h2>Topic 10</h2> <p>paragraph 1 </p> <h2 id="T11">Topic 11</h2> <!--create an ID--> <p>paragraph 1 </p> <h2>Topic 12</h2> <p>paragraph 1 </p> <h2>Topic 13</h2> <p>paragraph 1 </p> <h2>Topic 14</h2> <p>paragraph 1 </p> <h2>Topic 15</h2> <p>paragraph 1 </p> <h2>Topic 16</h2> <p>paragraph 1 </p> <h2 id="T17">Topic 17</h2> <p>paragraph 1 </p> <h2>Topic 18</h2> <p>paragraph 1 </p> <h2>Topic 19</h2> <p>paragraph 1 </p> <h2 id="T20">Topic 20</h2> <p>paragraph 1 </p> </body> </html>
Output:
Summary
Links in an HTML document are of great importance since they help in redirection of control and avoidance of a large amount of content on a single web-page. In this article, we’ve looked at the basics of HTML links and their attributes such as href, target, and title. We’ve discussed the styling of links and how to use an image and a button as a link. We’ve also seen the use of bookmarks in HTML documents and how to create links for download.
Did you like our efforts? If Yes, please give DataFlair 5 Stars on Google
