Hyperlinking in HTML

HTML allows us to link one web page with another. The text that provides such linking is known as "Hypertext" and the link is known as "Hyperlink".
<A> ... </A> is used for linking web pages. 


We add the address or path in a hyper link by using HREF. This can be a file name of the current directory , any other directory with path or a URL of website in internet or intranet.


This is the text which is connected with hyperlink and points to further references. This part of the text is also known as anchored text.
<a href='http://www.plus2net.com'>More on plus2net</a>
You can see two parts in above code is highlighted, http://www.plus2net.com is the hyperlink and the text part saying More on plus2net is hypertext or anchored text.
We can keep a local file name as hyperlink like this.
<a href='test1.htm'>go to test1.htm</a>
In above code test1.htm file is present in the current working directory

Linking to files in different directory

To move to one step up in current directry we have to use ../ in our path. Here is a sample
<a href='../test1.htm'>go to test1.htm</a>
Same way we can move to two step up or parallel directry by giving relative path address.
<a href='../../another_dir/test1.htm'>go to test1.htm</a>

Absolute Path

The above path are considered as relative linking ad we are defining path from the current working file location. We can also link by giving absolute path starting from the root.
<a href='H:\html_files\my_dir\test1.htm'>go to test1.htm</a>

Linking to webpage or URL linking

We can use an URL as hyperlink and crate a link to external web site. This can be done from your local file or from any other file located in any website server. Here is an example which links to google.com
<a href='http://www.google.com'>Visit Google</a>

Attributes of <A> ... </A>

href: This attribute specifies the next navigatable page.

        link: Used to change the default color of the hyperlink.

        alink: Used to change the default color of a hyperlink that is activated.

        vlink: Used to change the color of a visited link.

      Note: Default color of a hyperlink is blue. The user can specify the color by giving the name of the color or its hexadecimal value. CSS is used to manage hyperlinks, read how CSS can be used under different conditions to manage styles of hyperlinks.


Hyperlink Example

<a href="html_hyperlink.php" link="red" alink="green" vlink="maroon"> Hyperlink Example </a>
Linking within the same web page.
    Click here to see more on Internal Linking Some times it may be necessary to jump to a particular location in the target page. This can be done in the following way.

       a. Identify the location in the target page where to jump and using the name attribute of <a> tag, give it a name.

           For example, <a name="targetloc">

         b. In the first page, from where we are providing a link, along with the target page write the name of the target location concatenated with a '#' as follows.

           <a href="targetPage.html#targetloc">...</a>

Linking within the same web page:

Some times it may be required to jump to a particular location in the same web page. This can be done as below.

           1. Identify the name of the location by giving name to the <a>

           For example, <a name="targetloc">
2. In the position from where to jump, just mention the target location as below.

           <a href="#targetloc">...</a>

           Note: # symbol indicates that a jump is required with in the same document.

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
Your Rating


Post Comment This is for short comments only. Use the forum for more discussions.

Subscribe to our mailing list

* indicates required
Subscribe to plus2net
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer