• Have Any Question?
  • contact@eitworld.com

HTML Links





  • A link or a hyperlink is some content that directs to some other location.
  • Anchor tag <a> is used to create a hyperlink in the html document.
  • The location that the link will direct to is mentioned by href attribute.
  • A word, a paragraph, an image or a button can be used as a link.
  • The content enclosed by anchor tag will be presented as a hyperlink.
  • By default, there are three states of a hyperlink-
    • Unvisited link- It looks blue and underlined.
    • Visited link- It looks purple and underlined.
    • Active (focused) link- It looks red and underline.

Types of HTML Links

 

There are three types of links-

  • External Link
  • Internal Link
  • Local Link

External Link

 

    • It directs to some other document.
    • The location of that document is mentioned as the value of href attribute.
    • It can also be used for Email Id by using mailto:

Syntax

 

<a href= “address”>any text/image</a>
or
<a href= mailto:Email Id>any text/image</a>

 

Example

 

<!DOCTYPE html>
<html>
<body>
<a href=”http://www.eitworld.com”>Click for home</a><br /><br />
<a href=”http://www.eitworld.com/Popular_Tutorials/HTML%20Tutorial/html_tutorial.html”> <img src=”http://www.eitworld.com/assets/images/rightnav.gif” /></a><br /><br />
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

  • Here first hyperlink is a text which will direct to http://www.eitworld.com.
  • Second hyperlink is an image which will direct to http://www.eitworld.com/Popular_Tutorials/HTML%20Tutorial/html_tutorial.html.

Internal Link

 

    • It directs to some other location in same page.
    • It uses id or name attribute to define the location.

Syntax

 

<a href= “ContentId”>any text/image</a>

 

Example

 

<!DOCTYPE html>
<html>
<body>
<a id=”image1″><img src=”http://www.eitworld.com/assets/images/html_tut.JPG” /></a>
<a href=”#image2″><img src=”http://www.eitworld.com/assets/images/rightnav.gif”/>
</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a id=”image2″><img src=”http://www.eitworld.com/assets/images/images.JPG” /></a>
</body>
</html>

To see live output : Visit Try Yourself Editor

  • For the first image, <a> has been given id as image1. For the second image, <a> has href attributes that means this image is a hyperlink. Value of href is #image2. # has been used to specify an id.For the first image, <a> has been given id as image2.
  • By clicking on the second image i.e. rightnav.gif, page will be scrolled to the image, which has the id image2.
  • Notice the scroll bar and the address bar in both images.

Local Link

 

  • A local link (link present in the same website) is associated with a relative URL (without http://www….).

Example

 

<!DOCTYPE html>
<html>
<body>
<a href=”http://www.eitworld.com/Popular_Tutorials/Android_Tutorial/
android_tutorial.html”>Android Tutorial</a>
</body>
</html>

To see live output : Visit Try Yourself Editor

The target attribute

 

  • The target attribute defines the window or frame in which the new page will be opened after clicking the hyperlink.

  • This example will show the use of various target attributes:

    Example

    <!DOCTYPE html>
    <html>
    <body>
    <p>Click any of the given link:</p>
    <a href=”http://www.eitworld.com/” target=”_blank”>Home Page:Open in new window</a>
    <a href=”http://www.eitworld.com/” target=”_parent”>Home Page:Open in the parent window</a>
    <a href=”http://www.eitworld.com/” target=”_self”>Home Page:Open in the default window</a>
    <a href=”http://www.eitworld.com/” target=”_top”>Home Page:Open in the full window</a>
    </body>
    </html>

    To see live output : Visit Try Yourself Editor

    Output

  • In the above example first link has a target attribute “_blank”, so the link will open in a new browser window or tab.
  • Second link has a target attribute “_parent”, so the link will open in the parent window.
  • Third link has a target attribute “_self”, so the link will open in the default window.
  • Fourth link has a target attribute “_top”, so the link will open in the full window.

Setting Link Colors

 

  • By default, there are three states of a hyperlink-
  • Unvisited link- It looks blue and underlined.
  • Visited link- It looks purple and underlined.
  • Active (focused) link- It looks red and underline.
  • You can change the color of the default links, active links and visited links respectively by using link, alink and vlink attributes. See the following example:

    Example

    <!DOCTYPE html>
    <html>
    <body alink=”cyan” link=”green” vlink=”orange”>
    <a href=”http://www.olx.com/” target=”_blank”>Home Page:www.olx.com</a>
    </body>
    </html>

    To see live output : Visit Try Yourself Editor

    Output

  • Check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.
  • You can change the defaults links, using styles tag.See the following example:

    Example

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    a:link {
    color:red;
    }
    a:visited {
    color:cyan;
    }
    a:hover {
    color:orange;
    }
    a:active {
    color:green;
    }
    </style>
    </head>
    <body>
    <a href=”http://www.paytm.com/” target=”_blank”>Home Page:www.paytm.com</a>
    </body>
    </html>

    To see live output : Visit Try Yourself Editor

    Output

  • Check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.

Image as Link

 

  • You can also use a image as link. See here the example:

Example

 

<!DOCTYPE html>
<html>
<body>
<p>Click on the given image it will redirect you to our html tutotrial’s home page:</p>
<a href=”http://www.eitworld.com/Popular_Tutorials/HTML%20Tutorial/
html_tutorial.html”>
<img src=”http://www.eitworld.com/assets/images/html_tut.jpg” alt=”HTML tutorial”> </a>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output



Real Time Web Analytics