What is 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.
What is Linking Documents
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
Target Attribute
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
If we set the target attribute to "_blank", the link will open in a new browser window or tab.
Base Path
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 Bookmark
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
HTML Link Colors
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 Download Links
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: