HTML Links

HTML Links are called hyperlinks.

Almost every website contain links

Links are use to jump from one page to another

When you hover mouse over links, mouse arrow is changed to little hand.

You can make link to anything like text, image, heading, etc.

Links Syntax




<a href="link">Link Text</a>



Links Example




<html>
      <head>
      </head>
      <body>
             <a href="http://10xmorningstar.com/">Visit 10X Morning Star</a>
      </body>
</html>



Output


Visit 10X Morning Star

HTML Local Links



Local links are used when you are using html file on same server or same project.

Local Link Example




<html>
      <head>
      </head>
      <body>
             <a href="Cpp-Introduction">Visit C++ Introduction Page</a>
      </body>
</html>



Output


Visit C++ Introduction Page



Note: As we used "Cpp-Introduction" because our file system is different, but in your case you will use filename.html or if your project is in php then "file_name.php" or if in asp then "file_name.asp"

HTML Links Target



Target is used to specify where to open link.

  • _blank Open link in new tab.
  • _self Open link in same window on same page. This is by default.
  • _parent Open link in parent frame.
  • _top Open link in full window.


Taget in Link Example




<html>
      <head>
      </head>
      <body>
             <a href="http://10xmorningstar.com/" target="_blank">Visit 10X Morning Star</a>
      </body>
</html>



Output


Visit 10X Morning Star

HTML Links Title



Title is shown on hover like a tooltip.

Title in Link Example




<html>
      <head>
      </head>
      <body>
             <a href="http://10xmorningstar.com/"  title="Go Check Out Home Page">Visit 10X Morning Star</a>
      </body>
</html>



Output


Visit 10X Morning Star

HTML Links to Image



In this we will convert image to link. For that we are taking external image.

Image Link Example




<html>
      <head>
      </head>
      <body>
             <a href="http://baneinnovation.com/"  target="_blank"> <img src="bane.png" style="width:100px;height:100px"></a>
      </body>
</html>



Output




Back To Top