How to make link in HTML

The tags used to produce links are the <a> and </a>.

The <a> tells where the link should start and the </a> indicates where the link ends.

Everything between these two will work as a link.

The target of the link is added to the <a> tag using
the href="http://www.whateverpage.com" setting.

The example below shows "Click here to go to LinktoHow".

Click <a href="http://www.linktohow.blogspot.com">here</a> to go to LinktoHow.


You simply:

  • Specify the target in the <a href=" ">.
  • Then add the text that should work as a link.
  • Finally add an </a> tag to indicate where the link ends.
ADVANCED TEXT LINKS


Instead of just turning off the underline on all links you could be more specific in defining the way you want your links to work.

In the example below underlining is turned off for all links.

The A:hover tells the browser that when the mouse is over a link the underline should appear.
The hover option only works on MSIE 4+.
(But it does not cause an error on Netscape if you include it - the effect just does not appear.).

<html>

<head>
<title>This is my page</title>
<style type="text/css">
<!--
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline}
-->
</style>


</head>

<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com">This Link To Yahoo has no underline</a>
</body>

</html> 


The methods described above will turn off the underline effect for links on the entire page.

If you want to turn off the effect for just a single link, add a style property to the<a href> tag:


<a href="http://www.yahoo.com" style="text-decoration: none">Go to Yahoo</a> 


NOTE:
The method described above only works on MSIE 3, Netscape 4 or newer browsers.


You can make multiple style settings instead of just removing the underline. Why not define the colors you want for visited links as well?

This example will show you how:
<html>

<head>
<title>This is my page</title>

<STYLE TYPE="text/css"><!--
A.set1:link {color: #FF00FF; }
A.set1:active {color: #FFFF00; }
A.set1:visited {color: #00FFFF; }

A.set2:link {color: #AA00FF; background: FF00AA; text-decoration: none}
A.set2:active {color: #FF00AA; background: none transparent;}
A.set2:visited {color: #FFFF00; text-decoration: none}
--></STYLE>

</head>

<body>
Welcome to my world!<br>
<a href="http://www.yahoo.com CLASS=set1> Yahoo </a>
<a href="http://www.linktohow.blogspot.com CLASS=set2> Hotbot </a>
</body>

</html> 



Try clicking the two links below to see how these effects would work. (links have been deactivated on this page)


Yahoo

Hotbot






You can create much more advanced links with CSS (Cascading Style Sheets). 



IMAGE LINKS


If you want to make an image work as a link, the method is exactly the same as with texts.

You simply place the <a href> and the </a> tags on each side of the image.

Below is the HTML code used to make the image work as a link to a page calledmyfile.htm:





<a href="myfile.htm"><img src="rainbow.gif"></a> 



If you haven't entered a border setting you will see a small border around the image after turning it into a link. To turn off this border, simply add border="0" to the <img> tag:

<a href="myfile.htm"><img src="rainbow.gif" border="0"></a> 


Images that work as links can show a popup text when you place the mouse over it.
This is done with the alt property in the <img> tag.

For example:

<a href="myfile.htm"><img src="rainbow.gif" border="0"alt="Link to this page"></a> 





Link to this page


LINK TO NEW WINDOW


If you want your link to open a page in a new window use the target="_blank" in the <a href> tag.

Targetting the link to "_blank" simply opens a new browser window that will load the linked page.

Linking to Yahoo the traditional way would require this link:

<a href="http://www.yahoo.com">Go to Yahoo</a> 



If you add a target="_blank", the page will open in a new window:

<a href="http://www.linktohow.blogspot.com" target="_blank">Answer of all "HOW"</a> 



Click the link below to see this link in action:

If you want to customize the new window as to which buttons, menus etc. should be available and which size it should have, you will need to do that with javascript.



LINK TO EMAIL


Having a link that allows visitors to send email from your website can be a great addition to your site, making it easy for your visitors to send questions or comments.

There is a special link for this action.

Email links are done much the same as links to other pages, using the
<a href> tag.

An email link would require the following code:

<a href="mailto:youremailaddress">Email Me</a> 


This will result in the visitor's email program opening a new email with your address already in the To: field.




If you wish to have a specific subject in the email, you can add it to the html code using subject= setting :

<a href="mailto:masterinbloggin.howto@blogger.com?subject=SweetWords">
Send Email</a> 



Suppose you want an email link for your visitors containing specific text in the body of their message, simply add &body=:

<a href="mailto:masterinbloggin.howto@blogger.com?body=Please send me a copy of your new program!">Send Email</a> 


Or combine all the options and allow your visitor to send email with the address, subject and text already entered.

<a href="mailto:masterinbloggin.howto@blogger.com?subject=SweetWords
&body=Please send me a copy of your new program!">Email Me</a>
1 Comments
Disqus
Fb Comments
Comments :

1 comment: