...

Web Technologies - HTML

Back to Course

Lesson Description


Lession - #159 HTML Textlinks



A webpage may have multiple links that guide you to other pages or even particular sections of a given page. These are referred to as hyperlinks.
Visitors can move between websites by clicking on words, phrases, and images. As a result, you may construct hyperlinks from text or pictures on a webpage.
Please keep in mind that I encourage you go through a brief tutorial on Understanding URL

Linking Documents

The HTML element <a> is used to specify a link. This tag is known as an anchor tag, and everything between the opening a> tag and the closing </a> tag forms part of the link, which a user may click to access the linked content. The straightforward syntax for using the <a> tag is as follows.
<a href = "Document URL"...attributes-list> Example of Link Text </a>
 

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


This will result in the following screen, where you can click on the generated link to get to the Google home page (in this example>
.

The Attribute that should be used as a target

In the last example, we used the target attribute. The location where the linked document is opened is specified by this attribute. The possibilities are as follows: –
Sr.No Option & Description
1

_blank

The referenced document is opened in a new window or tab when you use _blank.

2

_self

The connected document is opened in the same frame as _self.

3

_parent

The referenced document is opened in the parent frame when you use _parent.

4

_top

The connected document is displayed in the window's full body.

5

targetframe

The referenced document is opened in a designated targetframe.



To grasp the basic differences between a few target attribute choices, consider the following example.
 
<!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 get the following result, where you may click on various links to learn more about the differences between the various target attribute selections.

Using the Base Path

It is not necessary to provide a complete URL for each link when linking HTML pages from the same domain. If you utilise the base> element in your HTML document header, you can get rid of it. This tag specifies the base path for all links. As a result, your browser will combine the specified relative path with this base path to form a full URL.
Example
The following example uses the base> element to define a base URL, after which we may utilise relative paths to all links instead of providing each one a whole URL.

        <!DOCTYPE html>
<html>

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

    
This will yield the following result, where you may access the HTML instructional by clicking on the link produced HTML Tutorial. a href = "/html/index.htm" is now regarded ahref = "http://www.google.com/html/index.htm"

Linking to a Section of a Page

The name property may be used to create a link to a specific area of a webpage. It's a two-step procedure. The name property has been deprecated in HTML5. This property should not be used. Instead, use the id and title attributes. Create a link to the location within a webpage where you wish to go and label it using the <a...> tag like follows:
Create a link to the location you wish to go within a webpage and name it using the <a...> element as shown below.
h1>html text links <<a name = "top"></a></h1>
The second step is to establish a hyperlink that connects the document to the location where you wish to go.
<a href = "/html/html_text_links.htm#top">
Go to the top This will generate the following link, which you may then click on. To get to the top of the HTML Text Link lesson, click Go to the Top.
This will generate the following link, which you may then click on. To get to the top of the HTML Text Link lesson, click Go to the Top. Ascend to the summit

Changing the Link Colors

The link, alink, and vlink properties of the body> element may be used to change the colour of your links, active links, and visited links.
Example
As see how the link, alink, and vlink characteristics function, save the following to test.htm and open it in any web browser.


<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.google.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>
As a consequence, you'll get the following outcome. Simply verify the link's colour before clicking on it, then check it again after you activate it and after it has been viewed.

Links to Download

To make your PDF, DOC, or ZIP files downloadable, build a text link. It's extremely simple; all you have to do is provide the entire URL of the downloaded file, as shown below.


<!DOCTYPE html>
<html>

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


Dialog Box for Downloading Files

It is often desirable to provide an option whereby a user may click a link and instead of seeing actual content, they will get a "File Download" window. This is a simple process that may be accomplished by including an HTTP header in your HTTP response.
If you wish to make a Filename file downloadable from a specific link, for example, the syntax is as follows.

    #!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = "filename"rn";
print "Content-Disposition:attachment; filename = "filename"rnn";

# Open the target file and list down its content as follows
open( FILE, "<filename" >
; while(read(FILE, $buffer, 100>
>
{ print("$buffer">
; }

Why to Learn HTML?

This will provide the following result, where you can click on the generated link to go to Tutorials Point's home page (in this example>
.
The Attribute that should be used as a target
In the last example, we used the target attribute. The location where the linked document is opened is specified by this attribute. The following are some of the possibilities: