Header Ads Widget

Ticker

6/random

HTML Hyperlinks Complete Tutorial

Image result for html


HTML Hyperlinks
To Create hyperlink in html document use href attribute that used in <a> anchor tag look like
that <a href="http://www.google.com">Google</a> When click on Google than you will be redirect to given site just like here www.google .com
How To Create Dashed Line Hyperlink?
The default hyperlink underline has been removed by setting the text-decoration property value to none, and the border-bottom property has been added to the code.
Sample Code
<head>
<style>
a {
text-decoration: none;
}
a:link {
color: #00ff00;
border-bottom: 1px solid #ff0000;
}
a:visited {
color: #0000ff;
border-bottom: 1px solid #c0c0c0;
}
a:hover {
color: #000000;
border-bottom: 2px dashed #dd0000;
}
</style>
</head>
How to Open Hyperlink In New Window or New Tab?
To Open hyperlink in a new window use target attribute in <a> anchor tag and for open tag in new window use value _blank and to open hyperlink in new tab use value _new .See Example
For New Blank Window
<a href="http://mindsmania.blogspot.com"  target="_blank">New Browser Window</a>
For New Tab
<a href="http://mindsmania.blogspot.com"  target="_new">New Browser Window</a>

How To Create Image Hyperlink?

It is simple to create image hyperlink just placed image tag between <a> anchor tag and when click on image browser will be redirect to given address in href address.See Example

<a  href="http://mindsmania.blogspot.com/pages.html">
<img src="images/sample-image.jpg" title="Example Link" width="300" height="200" />
</a>

How to Remove Underline From Hyperlink?

Simply underline can be removed from hyperlink text just used inline style sheet and add text-decoration Property to None.See Example

<a href="http://mindsmania.blogspot.com" style="text-decoration: none;">Remove Hyperlink Underline</a>

How To Make Email Address Hyperlink?

Use mailto in anchor tag <a> that will launch client email ready to send email  .See Example 

<a href="mailto:abc@example.com">Mail Us</a>

How To Make a Link Button

Easy way to create link button use form tag <form> and use the mouse event property onclick that create a link button on html document.See Example

<form>
<input type="button" value="Button Label" onclick="window.location.href='http://www.mindsmania.blogspot.com/button-links.php'" />
</form>


Post a Comment

0 Comments