top of page

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another page or web address or files from the current page.

Syntax

<a href="url">Visible text</a>

Example:
<a href="https://www.elogictechnosolutions.com/">Visit us!</a>

Use target="_blank" to open the linked document in a new browser window or tab:

Example:
<a href="https://www.elogictechnosolutions.com/"  target="_blank">Visit us!</a>

 Image as a Link

To use image as link we just need insert this  <img> tag inside the <a> tag:

Example:
<a href="www.elogictechnosolutions.com">
<img src="logo.png" alt="Image link" style="width:30px;height:30px;">
</a>

In the above example alt="image link" refers to the text or alternative to the image in case the image is not visible to the browser.

to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email

Example:
<a href="mailto:someone@example.com">Send email</a>

Link Titles

The title attribute specifies extra information about the element or link. This will be visible as tooltip text.

Example:<a href="https://www.elogictechnoolutions.com/html/" title="Go to elogic website">Visit us/a>

HTML Link Colors

We can change the style of html link by using CSS properties here we are changing the color of link in different occasion that is when it get visited, active and hover.

Example:<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: yellow;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: none;
}
a:active {
  color: brown;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<p>You can change the default colors of links</p>

<a href="https://www.elogictechnosolutions.com" target="_blank">visit us</a> 

</body>
</html>

bottom of page