Lesson 13 – HTML Text Link

admin

What are HTML text links?

HTML text link tags (also known as hyperlink), allow users to link other web pages using images, words or phrases. When you hover a mouse arrow over these links, they take a shape of a hand. By default, the color of an unvisited link is blue, and of visited link is purple. The following syntax used to link a web page:

 <a href =  “URL”> Text </a>

In above syntax, href refers to destination URL and ‘Text’ represent linking text.

  • HTML Text Link:

HTML anchor element <a> tag is used to link a web page with another web page. If you will insert any text between html tag <a>…</a> it will be shown as a hyperlink. Example of html text link is explained below: 

<!DOCTYPE html>
<html>
<head>
<title>HTML Text Link Example</title>
</head>
<body>
<p> You can learn free html at  </p>
<a href=”http://freetutorialpoint.com”> our site. </a>
</body>
</html>

The result will be displayed as:

  HTML Text Link Example

You can learn free html at our site

 

  • HTML Image Link:

A link for an image can be created by inserting html <img> tag inside html <a> tag. Let’s look at the following example to get a clear picture:

<!DOCTYPE html>
<html>
<head>
<title> Adding link to an image</title>
</head>
<body>
<p>Html Icon </p>
   <a href= “http://freetutorialpoint.com”>
         <img src=”http://freetutorialpoint.com/wp-content/uploads/2016/10/images.jpg” />
   </a>
</body>
</html>

The result will be displayed as:

  Inserting link to an image

Html Icon

html image

You can learn more about html <img> tag here.

 

  • HTML Target Attribute:

A target attribute defines, where a web page will open. The options available are listed below:

HTML Tag Description
_blank Opens a web page in new tab
_self Opens a web page in same window
_parent Opens a web page in parent frame
_top Opens a web page in full body of the window
_framename Opens a web page in named frame.

Example of html target attribute:

  HTML Target Attribute Example

Click any of the following links

Opens in a new web page / Opens in same window / Opens in parent frame / Opens in the full body of window

 

  • HTML Base Path Link:

Now, if you are required to link 2 or more different pages of your website on a single webpage then you don’t need to mention a complete URL every time, instead you can use html<base> tag. You just have insert the html base tag into the header section of a webpage and relative URL of other webpages into the body section. Let’s learn more with following example:

<!DOCTYPE html>
<html>
<head>
<title>Base Path Example</title>
<base href = “http://freetutorialpoint.com”/>
</head>
<body>
<p>Click any of the following links</p>
<a href=”/lesson-4-html-elements/” target=”_blank”>HTML lesson 4</a>
<a href=”/lesson-5-html-formatting/” target=”_blank”>HTML lesson 5</a>
</body>
</html>

The result will be displayed as:

  Base Path Example

Click any of the following links

HTML lesson 4
HTML lesson 5

 

  • Download Text Links:

    If you are required to put a download text link for a file (word, pdf, zip etc), you can do so by inserting a downloadable URL between html <a> ..</a> tags. Example of download link is explained below:

<!DOCTYPE html>
<html>
<head>
<title> Download Link Example</title>
</head>
<a href=”http://freetutorialpoint.com/wp-content/uploads/2016/11/PDF-2.pdf”>Download PDF File</a>
</body>
</html>

The result will be displayed as:

  Download Link Example Download PDF File

 

  • HTML Email Links:

You can specify an email address on a webpage to send an email. When a user will click on this email id, a messenger will pop up (like Outlook or Lotus) to send the email. Please be advised that, if you don’t have any email client installed on your computer this feature will not work. HTML syntax to add an email address on a web page is as follows:

 <a href= “mailto: [email protected]”>Send Email</a>

Example of HTML email link:

<!DOCTYPE html>
<html>
<head>
<title> Email link Example</title>
</head>
<a href = “mailto: [email protected]”> Write an email to us</a>
</body>
</html>

The result will be displayed as:

  Email link Example Write an email to us

In above example, you also have an option to specify the standard subject and message for every email to be sent. Syntax for the same is:

<a href="mailto:[email protected]? 
subject= Mention your subject here 
&body= Type your message here"> Send Feedback </a>

The result will be displayed as:

  Email link Example Write an email to us

 

Chapter Summery:

  • Use html anchor tag <a> to link web pages.
  • Use html <img> tag (inside <a> tag) to link images.
  • Use html _blank attribute to open a web page in new tab.
  • Use html _self attribute to open a web page in same window.
  • Use html _parent attribute to open a web page in parent frame.
  • Use html _top attribute to open a web page in body of window.
  • Use html <base> tag to link multiple pages within a same website.
  • Use “href=mailto: “ attribute to setup emails on a web page.

 

Interview Questions:

  • Can a link point towards two or more different web pages?

No, a link can point only towards one web page. 

  • How to create an link that would allow you to send an email?

You can create an email sending link using following syntax:

<a href= “mailto: [email protected]”>Send Email</a>
  • How are active link different from normal links?

When you hover a mouse curser over a normal link it changes its color and becomes an active link.

  • Does a link tag only apply to text?

No, you can create links for both text and images. 

 

Practice Exercise:

<!DOCTYPE html>
<html>
<head>
<title> Practice Exercise</title>
</head>
</body>
</html>

In above html code,

  • Add a hyperlink to text ‘Click here to learn html’ (URL = http://freetutorialpoint.com)
  • Open the above webpage in a new window.
  • Create an Email link. (Email – [email protected])
Click here to practice above exercise in real time HTML code editor