HTML - Hyperlink

Example (Text Hyperlink):
<HTML>
<HEAD>
<TITLE>Text Hyperlink Example</TITLE>
</HEAD>
<BODY>
<A href="http://www.google.com"> Click Here</A>
</BODY>
</HTML>
 
You can link to a variety of online resources.  When a page is shown some words need further explanation. Such words are called Hot Text and they appear in a different color and will have an underline. On click of those words another HTML page gets open that will have required explanation. Such Hot Texts are created using <A> and </A> tags. You can create links to other HTML pages (either on your Web site or on another Web site), create links to different locations on the same HTML page, or to resources that aren't even HTML pages at all (such as e-mail addresses, pictures, and text files).
 
The kind of link you create is determined by where you link to:
 
Absolute Link: It uses a complete URL to connect browsers to a Web page or online resource. When you link to files on someone else's site, you must always use absolute URLs in the href attribute of the anchor element.
 
Relative Link: It uses a kind of shorthand to specify the URL for the resource you're pointing to. You create relative links between resources on the same domain, and because the two resources are on the same domain, you can omit the domain information from the URL. A relative URL uses the location of the resource you're linking from to identify the location of the resource you're linking to.
 
Imagine that the following URLs identify documents on your Web site. The only difference between them is the specific file they point to:
 
http://www.mysite.com/webdocs/home.html
http://www.mysite.com/webdocs/about.html
 
Because both of these pages reside on the same Web site, you can take advantage of relative URLs when you create a link between them. If you want to make a link from home.html to about.html, you can use this simplified, relative URL in the anchor element:
<P>Learn more <A href="about.html">about</A> our company.</P>
 
Example (Graphical Hyperlink):
<HTML>
<HEAD>
<TITLE>Graphical Hyperlink Example</TITLE>
</HEAD>
<BODY>
<A href="E:\Neeta\Mywork\Material n Examples\LivingThings.html">
<IMG width=277 height=114 src=”E:\Neeta\Images\living_things.jpg”>
</A>
</BODY>
</HTML>
 
An image can also be used as a link to other HTML document. Just place <IMG> tag in between <A> and </A> tags. 
 
Example (Linking to a Section of document):
<HTML>
<HEAD>
<TITLE>Link to a Part of Document Example</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Linking to a Section in a Page</H1>
Click here to go to the <A href="#bottom">bottom</A>of the page.
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
<BR> <BR> <BR> <BR> <BR> <BR>
<A name="bottom">this is the bottom of the page</A>
</CENTER>
</BODY>
</HTML>
 
name attribute is used with href to create link within the same document. Specify the name in the href attribute with # sign and in the name attribute specify the same name.
 
Example (Image Maps):
<HTML>
<HEAD>
<TITLE>Hot spots in Image</TITLE>
</HEAD>
<BODY>
<A href="try.html">
<IMG src="E:\Neeta\Images\unilogo.jpg" align="middle" width="48" height="48">
</A>
<BR>
<BR>
<BR>
<IMG src="E:\Neeta\Images\cell.jpg" width="145" height="126" usemap="#cellmap">
<MAP id="cellmap" name="cellmap">
<AREA shape="rect" coords="18,28,38,45" alt="centriole" href="ChangeBackground.html">
<AREA shape="circle" coords="65,28,10" alt="mitochondria" href="CursorExample.html">
<AREA shape="poly" coords="100,100,100,200,150" alt="lysosome" href="Characteristics.html">
</MAP>
</BODY>
</HTML>
 
<MAP> </ MAP > defines an image map on your web page.  <AREA> tag is used for specifying the coordinates of hot spots in image maps. One <AREA> element for each hot spot on the image. Note that <AREA> is an empty element. <IMG> tag will be used to specify the image you want to use your image map.
Example (Open Link in a New Window):
<HTML>
<HEAD>
<TITLE> Open Link in a New Window</TITLE>
</HEAD>
<BODY>
<P>
The <A href="http://www.w3.org" target="_blank">World Wide Web Consortium</A> is the standards body that oversees the development of the HTML specification.
</P>
</BODY>
</HTML>
 
target attribute with the value of _blank is used to open the link in a new browser window instead of opening in the current window. Possible values are:
_blank: This causes the results of the link to be loaded into a new browser window. Unless the document referred to by the src attribute is a master frame document, the new page won’t use frames.
 
_self: This causes the results of the link to be loaded into the same frame as the <A> tag, which created the link.
 
_parent: This causes the results of the link to be loaded into the <FRAMESET> parent of the current frame. If there is no <FRAMESET> parent, the results of the link are loaded into the same frame.
 
_top: This causes the results of the link to be loaded into the full browser window, canceling frames. When would you want to use this? If you have a “back to home” link on the bottom of your main screen, you would want it to point to the master frame document with a target of _top. This way, you would not end up with the problem of unintentionally nested frames.
 
Example (Creating a File Download Link):
<HTML>
<HEAD>
<TITLE>Creating a File Download Link</TITLE>
</HEAD>
<BODY>
<H1>Download the new version of our software</H1>
<P>The <A href="E:\HTML\EBooks\HTMLBible.pdf">software</A></P>
<P>The <A href=" E:\ Resume.doc ">documentation</A></P>
</BODY>
</HTML>
 
Non web files like software.zip and doc.pdf in the above example can be opened from a link in a web page.
 
Example (Linking to an E-Mail Address):
<HTML>
<HEAD>
<TITLE> Linking to an E-Mail Address </TITLE>
</HEAD>
<BODY>
<P>Send us your <A href=”mailto:comments@mysite.com”>Comments</A>. </P>
</BODY>
</HTML>
 
You can also link to e-mail addresses using mailto.