Create HTML Links and Hyperlinks to Connect Web Pages

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.

HTML Links

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:

Links in HTML

Keeping you updated with latest technology trends, Join DataFlair on Telegram

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:

HTML Internal Links

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>

Hover Link in HTML

Select option in Link in 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:

HTML target Attribute

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 BAse path

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 Image Link

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 button link

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 link title

 

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 download link

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 external paths

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:

html bookmark links

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.

Leave a Reply

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.