HTML Links - Hyperlinks

  • 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="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="images/html_tut.JPG" /></a>
    <a href="#image2"><img src="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="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="images/html_tut.jpg" alt="HTML tutorial"> </a>
    </body>
    </html>


    To see live output : Visit Try Yourself Editor

    Output