Hyperlinking Web Pages

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".

HTML Hyper links to navigate between web pages using address or URLs in networks

<A> ... </A> is used for linking web pages.

Hyperlink

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.

Hypertext

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='https://www.plus2net.com'>More on plus2net</a>

You can see two parts in above code is highlighted, https://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>

Portability is a big issue if you are using absolute path to link your files. If you want to shift all your files to different drives or different path then all links present inside the files are to be modified and to be given new absolute path starting from drive name. So relative path linking is always better way to link your files as this can work in any location.

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='https://www.google.com'>Visit Google</a>

Write one search.htm page and keep three links inside it pointing to google, Yahoo and Bing. Each link should take take you to corresponding search page.

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.

Example:

Hyperlink Example

Code:

<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

Create three pages test1.htm, test2.htm, test3.htm. Each page should have two links pointing to other two pages. It should tell go to test1 , go to test2, go to test3 etc.

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.
HTML Linking different parts within a page with back to top code
HTML Form Textarea in form Checkbox in a form

Hyperlinking in HTML