Copyright © tutorialspoint.com

HTML Text Links

previous next


Advertisements

Web pages can contain links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on your any web page.

In this tutorial you will learn how to create text links between the different pages of your site, links within pages of your sites, and how to link to other sites ( or external sites). If you want to know more about URL then check Understanding URL Tutorial.

Linking Documents - The <a> Element:

A link is specified using the <a> element. This element is called anchor tag as well. Anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document.

Following is the simple syntax to use this tag.


<a href="Document URL" attr_name="attr_value"...more attributes />

Anchor Attributes:

Following are most frequently used attributes for <a> tag.

A Simple Example:

<a href="http://www.tutorialspoint.com/" target="_blank" >TP Home</a> |
<a href="http://www.amrood.com/" target="_self" >AMROOD Home</a> |
<a href="http://www.change-images.com/" target="_top" >Change Images Home</a>

This will produce following result, Click and come back to proceed with rest of the tutorial:

Tutorials Point | AMROOD | Change Images

Base Path for Links:

It is not required to give a complete URL for every link. You can get rid of it if you will use <base> tag in your 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.

For example we have used following base tag in all the pages at tutorialspoint.com:

<head>

<base href="http://www.tutorialspoint.com/">

</head>

So now if you will use <a href="/html/index.htm" then it will be considered as <a href="http://www.tutorialspoint.com/html/index.htm".

Linking to a Page Section:

You can create a link to a particular section of a page by using name attribute. Here we will create three links with-in this page itself.

First create a link to reach to the top of this page. Here is the code we have used for the title heading HTML Text Links

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

Now you have a place where you can reach. To reach to this place use the following code with-in this document anywhere:

<a href="/html/html_text_links.htm#top">Go to the Top</a>

This will produce following link and you try using this link to reach to the top of this page:

Go to the Top

NOTE: Here we are using relative path. You can give complete URL and then # and then link name eg. http://www.tutorialspoint.com/html/html_text_links.htm#top

You can use this type of URL in any other page to reach directly to a particular section.

Setting Link Colors:

You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag. But it is recommended to use CSS to set colors of links, visited links and active links.

Following is the example we have used for our web side tutorialspoint.com

a:link    {color:#900B09; background-color:transparent}
a:visited {color:#900B09; background-color:transparent}
a:active  {color:#FF0000; background-color:transparent}
a:hover   {color:#FF0000; background-color:transparent}

You can refer to Style Sheet Tutorial for a complete understanding on CSS.

Otherwise you can use <body> tag to set link colors. Here is the syntax.

<body alink="#FF0000" link="#900B09" vlink="#900B09">
.......
</body>

Create Download Links:

You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple, you just need to give complete URL of the downloadable file as follows:

<a href="http://www.example.com/file.pdf">Download File</a>

This will produce following link and will be used to download a file.

Download File

You can not make an image download able until you follow the following procedure.

How To Raise a "File Download" Dialog Box ?

Sometime it is desired that you want to give option where a use will click a link and it will pop up a "File Download" box to the user in stead of displaying actual content. This is very easy and will be achived through HTTP header.

This HTTP header will be different from the header mentioned in previous section.

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

#!/usr/bin/perl

# HTTP Header
print "Content-Type:application/octet-stream; name=\"FileName\"\r\n";
print "Content-Disposition: attachment; filename=\"FileName\"\r\n\n";

# Actual File Content will go hear.
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100) )
{
   print("$buffer");
}

For more detail on CGI go through our another tutorial PERL and CGI.


previous next

Copyright © tutorialspoint.com