HTML - Anchor Tag

Ad Code

HTML - Anchor Tag

RK Tutorials July 25, 2023

 

Hyperlink Anchor Tag

Using <a> tag we can establish hyperlink between source text or image with target text, image or page. Hyperlinks allows us to navigate between web sites by clicking on text, phrases and images. We use href attribute with <a> tag to define URL of page, other sites or object.
Actually <a> tag becomes part of the link and user can click that part to reach to the linked document.

Syntax

<a href = "Document URL" ... attributes-list>Link Text</a>


Example

<!DOCTYPE html>
<html>
   <head>
      <title>Hyperlink Example</title>
   </head>	
   <body>
      <a href="http://tutorials.ggvss.co.in">RK Tutorials</a>
   </body>	
</html>


Output

RK Tutorials

The target Attribute

Sr.NoOption & Description
1

_blank

Opens the linked document in a new window or tab.

2

_self

Opens the linked document in the same frame.

3

_parent

Opens the linked document in the parent frame.

4

_top

Opens the linked document in the full body of the window.

5

targetframe

Opens the linked document in a named targetframe.




Base Path

If we use HTML hyperlink related to the same website then we do not need to give a complete URL for each and every link when we use <base> tag in HTML document header.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Hyperlink Example</title>
         <base href="http://tutorials.ggvss.co.in"/>
   </head>	
   <body>
      <a href="/index.html"  target="_blank">Open in new tab</a> |
      <a href="/index.html"  target="_self">Open in self</a>|
     <a href="/index.html"  target="_parent">Open in parent tab</a>|
     <a href="/index.html"  target="_top">Open in body</a>
   </body>	
</html>


Output

Open in new tab | Open in self| Open in parent tab| Open in body

Download Link

We can create text link to make our PDF, DOC or ZIP files downloadable. We just need to give complete URL of the downloadable file.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Download link Example</title>
   </head>	
   <body>
       <a href="http://tutorials.ggvss.co.in/file.pdf" >Download File</a>
   </body>
	
</html>


Output

Download File


Setting Link Colors

We can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag.

Example


<!DOCTYPE html>
<html>
   <head>
      <title>Set Image Width and Height</title>
   </head>	
   <body alink = "#44A250" link = "#040404" vlink = "#F40633">
      <a href="/index.html"  target="_blank">RK Tutorials</a>
   </body>
	
</html>



RK Tutorials

Posted by RK Tutorials

Post a Comment

0 Comments

Ad Code