HTML Links


Links

When you open another page or document on the click, then we have to use Link tags, it is basically associating external url in HTML

In HTML links or anchor are start with <a> and end with </a>



HTML Link Example

<!DOCTYPE html>
<html>
<head>
<title>Hyper Link Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "" target = "_self"> </a>
</body>
</html>

Target Attribute

This specifies the location in which document or web page will open

1. _blank
2. _self
3. _parent
4. _top
5. Targetframe

Links Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- HyperLink Example . -->
<a href = "/index.htm" target = "_blank">Open in New</a>
<a href = "/index.htm" target = "_self">Open in Self</a>
<a href = "/index.htm" target = "_parent">Open in Parent</a>
<a href = "/index.htm" target = "_top">Opens in Body</a>

<!-- ImageLink Example -->
<img src = "/logo.png" alt = "Tutorials" border = "0"/>
<!-- Email Link Example -->
<a href = "mailto: ab@example.com">Send Email</a>

</body>
</html>


Absolute Links

Absolute URL are URL in which we give full URL with Http in href attribute

Absolute URL

<p><a href="https://www.example.com/">Example</a></p>

Relative Links

Relative URL are URL that are local to the code and we specify the URL without Http in href attribute

Relative URL

<p><a href="/images/example.aspx/">Example</a></p>

Image as a Link

To Use Image as a link, we need to place img Tag inside the a Tag

<a href="image.aspx"> <img src="cool.gif" alt="Cool Image" style="width:20px;height:20px;"> </a>

Link to Email

We have to use mailto: inside the href attribute. This will open Email when user click on link

<a href = "mailto: ab@example.com">Send Email</a>

Button Link

We have to use Javascript code for working for button as the link

<button onclick="document.location='default.aspx'">HTML</button>