Hyperlinks

HTML



 WHAT'S NEW 
 HTML FORUM 
 SITE MAP 
 REQUEST HELP 
 TRADE LINKS 
 FREE LINKS PAGE 






WEBMASTERS
Earn Money
Per Click!




SmallDot.com


BraveNet


TrafficSwarm


Submit9000


CodeBrain


Color Schemer


FlashBanger


123TurnKey.com


Web Page Templates


Dynamic Drive


Javascript Source


Javascript City


Javascript Kit


JavaPowered


FreewareJava
Home
General
HTML
Java Applets
Javascript
Wizards
Contact


The Html Help Guide


Hyperlinks



Hyperlinks (more commonly referred to as simply Links) are a means of navigating from one place to another with the click of the mouse. There are many types of links that are used on web pages including image maps and javascript based links like the mouseovers and pulldowns. Here I will cover some of the more common html link tags.

First, a few facts. If you are linking to a file within the directory of your own site, do not use the full url. This makes the browser go back out to the web to locate the file which increases the fetch time. For example, if the url of your site is http://www.mysite.com and you are linking to a page on your site named somepage.html, do not use the full url http://www.mysite.com/somepage.html in the link tag. Instead, just use somepage.html as in <a href="somepage.html">click here</a>

When linking to a web site, and not to a particular page on a site, you should end the url with a forward slash. For example, if you are linking to http://www.microsoft.com the link would be like this.<a href="http://www.microsoft.com/">Microsoft</a> This tells the browser to stop at the main directory and look for the index.html file which shortens the page access time.

Text Links

Text link to a remote site.
<a href="http://www.somesite.com/">click here</a>

Text link to a page on a remote site.
<a href="http://www.somesite.com/somepage.html">click here</a>

Text link to a page within your own directory.
<a href="somepage.html">click here</a>

Text link to a page in a subdirectory.
<a href="subdirectoryname/somepage.html">click here</a>

Text link to open a page in a new browser window.
<a href="http://www.somesite.com/" target="_blank">click here</a>


Image Links

Image link to a remote site.
<a href="http://www.somesite.com/"><img src="myimage.gif"></a>

Image link to a page on a remote site.
<a href="http://www.somesite.com/somepage.html"><img src="myimage.gif"></a>

Image link to a page within your own directory.
<a href="somepage.html"><img src="myimage.gif"></a>

Image link to a page in a subdirectory.
<a href="subdirectoryname/somepage.html"><img src="myimage.gif"></a>

Image link to open a page in a new browser window.
<a href="http://www.somesite.com/" target="_blank"><img src="myimage.gif"></a>


Mailto Links

Mailto links cause an email program to open a new message window with an email address that you specify in the To: field. You can also configure the link to automatically fill in the Subject: field and to add a limited amount of text to the Body of the message.

Basic mailto link.
<a href="mailto:youremail@ddress.com">Email Me</a>

Mailto link with subject.
<a href="mailto:youremail@ddress.com?subject=put subject here">Email Me</a>

Mailto link with subject and body text.
<a href="mailto:youremail@ddress.com?subject=put subject here&body=put body text here">Email Me</a>

Of course you can make these an image link by replacing the words Email Me with an image tag.


Anchors

Anchors are links that link to a certain spot on the same page. Perhaps you want to have a link at the top of a page that takes you to a sentence at the bottom of the page.

First, locate the word or sentence that you want to link to and surround it with an anchor tag.
<a name="">Sentence you want to link to.</a>

Now you have to give this anchor a name. It doesn't matter what name you give it. For this demonstration we'll use the name "a1". Now we have
<a name="a1">Sentence you want to link to.</a>

To link to this anchor you will use
<a href="#a1">click here</a>

What if you're on another page and want to link to that sentence? You will use the name of the page with anchor and add #a1 to the end of it. Say the name of the page with the anchor in it is index2.html. The link would be
<a href="index2.html#a1">click here</a>





Join the Html Help Guide mailing list
Enter your email address.
Subscribe    Unsubscribe