Scribd
Upload
8 views7 pages

HTML Links Hyperlinks

The document provides a comprehensive guide on creating HTML hyperlinks using the anchor tag (<a>). It explains the syntax for hyperlinks, the use of the target attribute, and how to link to specific sections within a page. Additionally, it covers styling hyperlinks, creating downloadable links, and specifying custom filenames for downloads.

Uploaded by

kirutadie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views7 pages

HTML Links Hyperlinks

The document provides a comprehensive guide on creating HTML hyperlinks using the anchor tag (<a>). It explains the syntax for hyperlinks, the use of the target attribute, and how to link to specific sections within a page. Additionally, it covers styling hyperlinks, creating downloadable links, and specifying custom filenames for downloads.

Uploaded by

kirutadie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Page 1 of 7

HTML - Text Links


HTML Links
HTML Links (Hyperlinks) are words or buttons having a link to another page that take
the user to that linked page when clicked.

HTML Hyperlinks
A hyperlink is a specific type of link that allows users to navigate from one web page or
resource to another by clicking on it. You can create hyperlinks using text or images
available on a webpage. A hyperlink is created using the HTML Anchor Tag (</a>).

Explore our latest online courses and learn new skills at your own pace. Enroll and
become a certified expert to boost your career.

The Anchor (<a>) Tag


An anchor tag, or <a> tag, is a basic element that creates hyperlinks between two pages.
Anything which is written between the opening <a> and the closing </a> tags become
clickable and when someone clicks on it, the linked page will be opened.

Syntax

Here is the syntax to create a hyperlinks in HTML:

Open Compiler

<a href="URL" target="_target_type">Link Text</a>

Read more about creating URLs, we recommend to read this chapter: Understanding URL

Creating Hyperlinks (Linking Webpages/Documents)


You can link other webpages or documents by creating the hyperlinking to specific
words, images, or any HTML element.

As discussed above, you can create hyperlinks by using the HTML <a> tag with the href
attribute. The href attribute specifies the page/document to be linked.

Syntax
Page 2 of 7

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

Example

In this example, we are creating a simple HTML document that demonstrates how to use
a hyperlink:

Open Compiler

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

On executing the above example, a link will be displayed. You can click on the link
generated to reach to the home page of Tutorials Point.

The "target" Attribute


The target attribute specifies the location where linked document is opened. Following
are the possible values of target attribute:

S.No. Option & Description

_blank
1
Opens the linked document in a new window or tab.

_self
2
Opens the linked document in the same frame.

_parent
3
Opens the linked document in the parent frame.
Page 3 of 7

_top
4
Opens the linked document in the full body of the window.

targetframe
5
Opens the linked document in a named targetframe.

Example

Try following example to understand basic difference in few options given for target
attribute.

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href="/html/index.htm" target="_blank">Opens in New</a> | <a
href="/html/index.htm" target="_self">Opens in Self</a> | <a
href="/html/index.htm" target="_parent">Opens in Parent</a> | <a
href="/html/index.htm" target="_top">Opens in Body</a>
</body>
</html>

This will produce the following result, where you can click on different links to
understand the difference between various options given for target attribute.

Use of Base Path in Hyperlinks


When you link HTML documents related to the same website, it is not required to give a
complete URL for every link. You can get rid of it if you use <base> tag in your HTML
document header. This tag is used to give a base path for all the links. So your browser
will concatenate given relative path to this base path and will make a complete URL.

Example
Page 4 of 7

Following example makes use of <base> tag to specify base URL and later we can use
relative path to all the links instead of giving complete URL for every link:

Open Compiler

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

This will produce the following result, where you can click on the link generated HTML
Tutorial to reach to the HTML tutorial.

Linking to a Page Section


Linking to a section on the same page allows users to navigate directly to that section.
You can create a link in the same to a specific section by using the href attribute with a
#id value, where the #id targets an element on the page with a corresponding id
attribute.

Example

In the below code, we demonstrate the usage of the href attribute to navigate to a
different section within the same page. We provide #idofsection inside the href to
navigate sections of our need:

Open Compiler

<!DOCTYPE html>
<html lang="en">

<head>
<style>
div {
Page 5 of 7

height: 900px;
}
</style>
</head>

<body>
<h2>Ed-Tech</h2>
<div>
<p>
Tutorialspoint: Simply Easy Learning
</p>
<a href="#about">Know More</a>
</div>
<h2 id="about">Section 2</h2>
<div>
<p>
Tutorials Point is an online learning platform
providing free tutorials, paid premium courses,
and eBooks. Learn the latest technologies and
programming languages SQL, MySQL, Python, C,
C++, Java, Python, PHP, Machine Learning, data
science, AI, Prompt Engineering and more.
</p>
</div>
</body>

</html>

Styling Hyperlinks (Setting Link Color)


You can set colors of your links, active links and visited links using link, alink and vlink
attributes of <body> tag.

Example

Save the following in test.htm and open it in any web browser to see how link, alink
and vlink attributes work.

Open Compiler
Page 6 of 7

<html>
<head>
<title>Hyperlink Example</title>
<base href="https://www.tutorialspoint.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>

This will produce the following result. Just check color of the link before clicking on it,
next check its color when you activate it and when the link has been visited.

Downloadable Links
HTML allows you to create downloadable links where you can create links to make your
PDF, DOC, or ZIP files downloadable. To create any link downloadable, you can use the
download attribute with the <a> tag and specify the downloadable file path in the href
attribute.

Example
The following example demonstrates creating a downloadable link in HTML:

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>Downloadable Link Example</title>
</head>
<body>
<a href="/html/src/sample.txt" download>Download File</a>
</body>
</html>

Custom File Name


Page 7 of 7

You can also specify the filename for the downloaded file. To give a custom filename the
file, you need to provide it to the download attribute.

Here is an example:

<a href="/html/src/sample.txt" download="custom-report.txt">Download File</a>

File Download Dialog Box


You can also allow HTML to open a file download dialog box before starting the download
so that the user can select the location to download the file. You can do it by using an
HTTP header in your HTTP response.

For example, if you want to make a filename file downloadable from a given link, then
its syntax will be as follows.

Syntax

#!/usr/bin/perl
# Additional HTTP Header
print "Content-Type:application/octet-stream; name=\"FileName\"\r\n";
print "Content-Disposition: attachment; filename=\"FileName\"\r\n\n";
# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){
print("$buffer");
}

Note: For more detail on PERL CGI programs, go through tutorial PERL and CGI.

You might also like