Anchor/Hyperlink/Links Tag (<a> </a>)

NB :

  • A Broken link/Dead link/orphan link is a link on a web page that no longer works because the website is encountering face one or more of the reasons i.e. an improper URL entered for the link by the website owner or the destination website removed/deleted the linked web page (causing what is known as a 404 error). or it may also be a temporary condition if the Web server is down/going to under maintenance.
  • When a link occurs inside/within a page of html it is called Internel link otherwise called External link..

Example : How to create a Relative Link/Hyperlink of a text in html page.

<!DOCTYPE html>
<html>
	<body>
	   <h5>HTML Anchor/Hyperlink/Links Code</h5>
           
           <a href="../Page2.html" target="_blank">Page2 Link</a>   //Opens the linked page in 
                    a new window or tab.
  
           <a href="Page3.html">Page3 Link</a>   // Similar as _self.          
           <a href="Page3.html" target="_self">Page3 Link</a>    //Opens the linked document in the 
                    same window/tab by replacing existing open window (default attribute).
                    
           <a href="New Folder3\Page4.html" target="_parent">Page4 Link</a>   //Opens the linked 
                    document in the parent frame.

           <a href="New Folder3\Page4.html" target="_top">Page4 Link</a>  //Opens the linked document 
                    in the full window form.

           <a href="C:\New Folder3\Page4.html" target="_blank">Page4 Link</a>   //Opens the linked 
                    document in the new tab.                          
	</body>
</html>

NB :
Relative Link :
- Here, both the files(source files and linked/destination files) are located in the same 
  /different parent folder or drive.The files may be any types i.e. .html/.php/.docx/.aspx etc.
- A relative link is any link that shows the current URL's location to the linked page's URL. 
- Instead of having the whole reference URL in the href tag, relative links only show the relative 
  link paths.(more details below in absolute link)

Example : How to create a Absolute Link/Hyperlink of a text in html page.

<!DOCTYPE html>
<html>
	<body>
	   <h5>HTML Anchor/Hyperlink/Links Code</h5>

	   <a href="https://www.google.com">Google Website Home Page Link</a>
           <a href="https://www.codershelpline.com">Codershelpline Website Link</a>
           <a href="https://www.codershelpline.com/androids">Codershelpline Website Link</a>            
	</body>
</html>

NB :
Absolute Link : 
- Absolute paths always include the domain name of the website, such as http://www...., whereas 
  relative links only point to a file or a file path located in same/different parent folder or 
  drive.
- In other words, an absolute path refers to the same location in a file system relative to the root 
  directory, whereas a relative path points to a specific location in a file system relative to the 
  current directory we are working on.
- An absolute link is a hyperlink containing a full URL address, with all related information 
  needed to find a particular site, page or document or other addressable item on the Internet.This 
  information mainly includes the protocol to use, such as HTTP/HTTPS(Hypertext Transfer Protocol) or 
  FTP (File Transfer Protocol).

Example : An image as hyperlink (hypermedia) in html page.

<!DOCTYPE html>
<html>
	<body>
		<h2>Codershelpline</h2>

		<a href="https:\\www.codershelpline.com">
		  <img src="image1.jpg" alt="Home Page NA" style="width:50px;height:50px">
                  <img src="c:\New Folder1\image1.jpg" alt="Home Page NA" style="width:50px;
                       height:50px">
		</a>
	</body>
</html>

Example : A text hyperlink with tooltip/link title feature in html page.

<!DOCTYPE html>
<html>
   <body>
	<h2>Codershelpline</h2>
	<a href="https:\\www.codershelpline.com" title="Versatile Website for All">Home Page Link</a>
   </body>
</html>

NB: Here title contents acts as tooltip value in the hyperlink text .

Example : An Button as hyperlink in a html page.

<!DOCTYPE html>
<html>
   <head>
      <title>Button Hyperlink</title>
   </head>
   <body>
      <button onclick="window.location.href = 'https://codershelpline.com';">Click Me</button>
      <button onclick="document.location = 'https://codershelpline.com';">Click This</button>	  
   </body>
</html>

--------  OR  --------

<!DOCTYPE html>
<html>
   <head>
      <title>Button Link</title>
   </head>
   <body>
      <form action="https://codershelpline.com/">
      <!--<form action="https://codershelpline.com/" method="post" target="_blank"> -->
         <button type="submit">Click This</button>
      </form>
   </body>
</html>

--------  OR  --------

<!DOCTYPE html>
<html>
   <head>
      <title>Button Link</title>
   </head>
   <body>
      <form>
         <button type="submit" formaction="https://www.codershelpline.com">Click me</button>
      </form>
   </body>
</html>

--------  OR  --------

<!DOCTYPE html>
<html>
   <head>
      <title>Button link</title>      
   </head>
   <body>      
	   <a href="https://www.codershelpline.com/"><button type="submit">Click This</button></a>
   </body>
</html>

Example : How to move location in a same/different page using Anchor tag in a html page.

(Same Page Anchor)

<!doctype html>
<html>
  <head>
     <meta charset="utf-8">
     <title>Untitled Document</title>
  </head>

  <body>	
	<a href="#Location1">Go to Anchor Part</a>
	
	<br>
	
	<p>		
	        codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com				
	</p>
	
	
	<br><br><br><br><br>
	
	<p id="Location1">
		
		codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
				
	</p>
  </body>
</html>

-------- OR  ---------

(Different Page Anchor)

Page1.html

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
   </head>

   <body>
	
	<h1>Anchor with Another Page</h1>
	<p>		
		<a href="#Location1">Bottom Link</a>  <br/>
		
		<a href="Page2.html#Location2">Next Page Link</a>  <br/>
	<!-- Here 'Location2' is anchor id of another page stored in same folder 'Page2.html' -->
	</p>
	
	<br>
	
	<p>		
	        codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
				
	</p>	
	
	<br><br><br><br><br>
	
	<p id="Location1">
		
		codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
				
	</p>
   </body>
</html>


Page2.html

<!doctype html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
  </head>

  <body>
	
	<h1>Anchor with Another Page</h1>
		
	<br>
	
	<p>		
	        codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
				
	</p>	
	
	<br><br><br><br><br>
	
	<p id="Location2">
		
		codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
		codershelpline.com
				
	</p>
   </body>
</html>


NB :
- Anchor tag is mainly useful when page contents are larger than screen area.
- Anchor tag is used to move location in a page/different page stored in same folder. 

Example : How to send email through email links in a html page.

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Untitled Document</title>
   </head>

   <body>
	
	<h1>Anchor with Email Links</h1>	
		
	<p><a href=mailto:[email protected]?subject="Sending Prospectus">Send Me an email</a> 
        </p>  <br/>			
		
   </body>
</html>

NB :
When the visitors to be able to send an email to an admin, then a user/visitor can use 'email links' of the 'mailto' type as mentioned above. 

 430 total views,  1 views today

Categories: HTML

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.