HTML Text Link

We can find different links to other pages and even to some particular parts of a particular page on a web page. These links are referred to as hyperlinks.

By clicking on words, phrases and images, hyperlinks allow visitors to navigate between websites. Thus, with a text or image available on the website, we can create hyperlinks.

 

The HTML tag <a> will specify a link. This tag has the name of anchor tag and whatever is between the tag opening <a> and the tag closing </a> is part of this connection, which user can then click on to get the linked document.

This is followed by a simple <a> tag syntax.

 

 


<a href = "Our Document URL" ... attributes-list>Link Text </a>

 

Let the example that links http://www.ukacademe.com on our page − be used for example

Example:


<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.ukacademe.com" target = "_self">UK Academe</a>
</body>
</html>

Output:

Click following link

UK Academe

 

The target attribute specifies where the associated document should be opened. One of the following values may have the target attribute:

Target Description
_blank Opens a new window or tab for the linked document
_self Opens the associated document in the same window / tab as clicked (default)
_parent Opens the document in the frame of the parent
_top Opens the related document in the entire window
framename Opens the associated document in a named framework

 

Example:

The linked document will open in a new browser window / tab in this example


<!DOCTYPE html>
<html>
<body>
<h2>The Target Attribute</h2>
<a href="https://www.ukacademe.com/WebDevelopment/HTML/HTML_Introduction" target="_blank">Visit our HTML tutorial!</a>
<p>If we set the target attribute to "_blank", the link will open in a new browser window or tab.</p>
</body>
</html>

Output:

The Target Attribute

Visit our HTML tutorial!

If we set the target attribute to "_blank", the link will open in a new browser window or tab.

 

The completeness of the url for every link is not required when we link HTML documents related to the same website. If we are using <base> in our HTML document header, we are able to get rid of it. This tag is used to give all links a basic path. This means that our browser will concatenate the relative path to the base path and make a full URL.

This example uses <base> to specify a base URL and later, instead of a fully URL, we can use the relative path to all links.

Example:


<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.ukacademe.com/">
</head>
<body>
<p>Click following link</p>
<a href = "/WebDevelopment/HTML/HTML_Introduction" target = "_blank">HTML Tutorial</a>
</body>
</html>

We can then click the link to the HTML tutorial to reach the HTML tutorial. This will produce the following result.

Output:

Click following link

HTML Tutorial

 

 

To enable readers to jump into certain parts of a web page, HTML bookmarks are used. If our website is very long, bookmarks may be useful. We need to first create a bookmark and then add a link to it to make a bookmark. The page scrolls to the place with the bookmark when you click on the link.

Exmple

Creating a bookmark with the id attribute first:


<h2 id="L5">Lesson 5</h2>

Then add a link to the bookmark from the same page ("Jump to Chapter 4").


<a href="#L5">Jump to Lesson 5</a>

Otherwise, add a link from a different page to the bookmark ("Jump to Chapter 4").


<a href="html_demo.html#L5">Jump to Lesson 5</a>

There is also another Way,

Using the name attribute, We can create a link to a particular area of the webpage. It's a process in two stages.

First make a link to the place where we would like to access a webpage and name it using the following <a> tag.


<h1>HTML Text Links <a name = "top"></a></h1>

Second step is to link the document and the place, where we wish to access.


<a href = "/WebDevelopment/HTML/HTML_Introduction#top">Go to the Top</a>

We can click the link Go to the Top to get to the HTML Text Link tutorial at the top. This will produce the following link.


Go to the Top 

A link like this (in all browsers) will appear by default:

  • A blue and unvisited connection is highlighted
  • A link visited is highlighted and purple
  • An active connection is highlighted and red

 

The default color can be changed


<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: red;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: yellow;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: green;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: pink;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>We can change the default colors of links</p>
<a href="WebDevelopment/HTML/HTML_Introduction" target="_blank">HTML Intro</a>
</body>
</html>

Output:

Link Colors

We can change the default colors of links

HTML Intro

 

To download our PDF, DOC or ZIP file, we may create a text link. This is very simple, We just have to provide the full URL of the downloadable file.


<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.ukacademe.com/Download/PDF.pdf">Download PDF File</a>
</body>
</html>

This will generate a link and is used for downloading a file.

Output:

Download PDF File