HYPERLINK


INTRODUCTION

 

It is a method of storing data through a computer program that allows a user to create and link fields of information at and to retrieve the data non sequentially.
Computer software and hardware that allows users to create, store, and view text and move bet-ween related items easily and in a non sequential way. The interconnection between the web pages can be established through the feature provided by HTML(Hyper Text MarkUp Language), called Hyperlinks. Due to this feature we can access to information fast and easily.

 

 

DEFINITION

Hypertext is the organization of information units into connected associations that a user can choose to make. An instance of such an association is called a link or hypertext link. (And the highlighted word “link” in the previous sentence is an example of a hypertext link.)

Hypertext was the main concept that led to the invention of the World Wide Web, which is, after all, nothing more (or less) than an enormous amount of information content connected by an enormous number of hypertext links. By Default colour of a Hyperlink is Blue. When you place mouse pointer ( ) on any hyperlink , the cursor will change to ( ).

 

TYPES OF LINK

Links are used to connect the different pages from one area to another area. Some of the links are :

  • Local Links: a link to different webpage in same website or on the same server or directory.
  • Internal Links: a link within same webpage or a section on current page.
  • External Links: a link to webpage outside the current webpage or a page on a different sever/directory.
  • Download Links: a link to a file or document for user to download
  • E-mail Links: a link for visitors to send an email very quickly.

 

 

Local links

A Local link uses a page name (including sub-directories if needed) as the target. It is “local” to the current server.

 

Let’s take example , you want to create a link to another page on your own site named nik2.html. Your link might look like this:

Link 1:     A HREF=”http://www.nikhilarora.com/nik2.html”  Page 2  /A

On the other hand, the same link might look like this:

Link 2:     A HREF=”nik2.htm”  Page 2  /A

Link 1 looks like an external link. Link 2 is definitely a local link. This brings us to another important difference, the difference between absolute URLs and relative URLs.

Link 1 is an example of a link using an absolute URL. An absolute URL uses the complete address, starting with http://… An absolute URL describes the exact location of a page. External links always use absolute URLs. However, this link is a local link, which happens to use an absolute URL. Absolute URLs may be used for local links, but relative URLs are simpler.

Link 2 is an example of a relative URL. Relative URLs are used for links to other pages on your own site. The location of the HREF destination page is described relative to the current (source) page. If the destination page is a file in the same folder as the page on which the link is used, then all you need for the HREF attribute is the destination file name. For pages on your own site, you may use either absolute URLs or relative URLs.

  • Local links are links to other pages on your own site.
  • Absolute URLs describe the exact location of a file using the complete address.
  • Relative URLs describe a file’s location in relation to the current page.
  • Local links can use either absolute or relative URLs.
  • Images can also be used as links by placing the IMG tag inside an anchor tag container.

Internal links

Internal links can also be called page jump, u can make this jump with two simple steps.

suppose your web page has lots of contents and very big in length(approx 2000 lines)

includes lots of headings. You want to jump 130 heading number. Instead of scrolling, you can use internal links just click on the link and you will move to your destination.

 

 

Example:

Source code

<html>

 

<head>

</head>

 

<body>

 

<p><a href=”#MODEM”>Link to MODEM</a></p>

<p><a href=”#BROADBAND”>Link to BROADBAND</a></p>

<p><a href=”#ISP”>Link to ISP</a></p>

<p><a href=”#BLUETHOOTH”>Link to BLUETHOOTH</a></p>

<p><a href=”#EMAILS”>Link to EMAILS</a></p>

<p><a href=”#SATELLITE”>Link to SATELLITE</a></p>

<p><a href=”#INFRARED”>Link to INFRARED</a></p>

 

 

 

<h1 id=”modem”>MODEM</h1>

<p>Text text text text</p>

 

<h1 id=”broadband”>BROADBAND</h1>

<p>Text text text text</p>

 

 

<h1 id=”ISP”>ISP</h1>

<p>Text text text text</p>

 

 

 

<h1 id=”BLUETOOTH”>BLUETOOTH</h1>

<p>Text text text text</p>

<h1 id=”EMAILS”>EMAILS</h1>

<p>Text text text text</p>

<h1 id=”SATELLITE”>SATELLITE</h1>

<p>Text text text text</p>

<h1 id=”INFRARED”>INFRARED</h1>

<p>Text text text text</p>

 

 

 

 

</body>

 

</html>

IN BROWSER:

Click on “link to infrared”. You will move to move on internal link

 

External links

<A> TAG :

Anchor  tag this tells browser to anchor something else on the web. The HTML <a> tag is used for creating a hyperlink to another web page. You can use the target attribute to specify whether to open the web page in a new browser window or not. You can also use this tag to link an image.

General syntax:

< a> ….. </a>

Example:

 

 

 

Start.html

 

 

 

Link.html

 

 

 

 

When you open “start.html” in a web browser, it will look like:

 

 

 

In above screen “this is a hyperlink !!” act as a link to another page . when this link is clicked by the user, then the web browser will activate the link and ulr specifies with href attribute of <a> will get open i.e “link.html”.

 

 

 

Download links

Source code: <!DOCTYPE html>

<html>

<body>

 

<p>Click on the  logo to download the image:<p>

 

<a href=”image.jpg” download>

<img border=”0″ src=”image.jpg” alt=”antenna” width=”104″ height=”142″>

</a>

 

<p><b>Note:</b> The download attribute is not supported in IE, Safari or Opera version 12 (and earlier).</p>

 

</body>

</html>

 

IN BROWSER

Click on picture ,next window will appear as follows:

Click on “save image as” to download the image.

In google chrome, image will download directly when you click on image.

 

Download audio:

Source code

<html>

<body>

 

<p>Click on the  logo to download the song:<p>

 

<a href=”aaj.mp3″ download>

<img border=”0″ src=”diljit.jpg” alt=”antenna” width=”104″ height=”142″>

</a>

 

<p><b>Note:</b> The download attribute is not supported in IE, Safari or Opera version 12 (and earlier).</p>

 

</body>

</html>

In browser

 

e-mail links

source :

<html>

<body>

 

<p>

This is an email link:

<a href=”mailto:nikhil_arora_22@yahoo.com” target=”_top”>Send Mail</a>

</p>

 

<p>

<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.

</p>

 

</body>

</html>

In browser

When you click on send mail, next window will appear as:

Follow outlook process as discussed previous chapter.

 

 

Images as hyperlinks

Images also used as hyperlinks, its so simple. We can use image as hypelinks,when you want to link another page with an image.

Lets take example for more clear.

I want to make web page in which if user want to download songs of particular singer then he/she will click on image of any singer then he/she able to download it.

Source code:

 

<html>

<body>

 

<p>Click on the  logo to download the song:<p>

 

<a href=”diljit.html” download>

<img border=”0″ src=”diljit.jpg” alt=”diljit” width=”104″ height=”142″>

</a>

<a href=”gp.html” download>

<img border=”0″ src=”gp.jpg” alt=”gippy” width=”104″ height=”142″>

</a>

 

<a href=”jaz.html” download>

<img border=”0″ src=”jaz.jpg” alt=”jazzyb” width=”104″ height=”142″>

</a>

</body>

</html>

In browser:

If you want to download diljit song click on image ,next window will appear as

Source:

<html>

<body>

 

<p>diljit songs:<p>

 

<a href=”s1.mp3″ download>

song1

</a>

<br>

 

<a href=”s2.mp3″ download>

song2

</a>

<br>

<a href=”s.mp3″ download>

song

</a>

 

 

 

 

</body>

</html>

 

In browser:

Click on any song to download. Enjoy!!!!!

By default, links appear as follows in all the web browsers:

  1. A visited link is underlined and appear in purple color.
  2. A unvisited link is underlined and is in blue color.
  3. A active link is underlined and is of red color.
Attributes Specification
Link It changes the default color if desired , you can specify name of the color “Red” or an hexadecimal number like”#999ff” which is equivalent to any color.
Alink It changes the color of active links to desired color
vlink It changes the color of visited links to desired color

For example:

 

                                                           

 In browser:

 

 

HREF

This is an attribute of <a> tag which is use to define “address” of another page link. This can be a webpage, image or a file etc.

Syntax:

 

<a href=”link/URL”>  ……  </a>

 

For Example:

 

Apple.html                                                           In browser

 

When you click on “click here“, apple.com will open like this: