HTML Links, Anchors and Links

HTML Links

HTML Anchors and Links

Anchors are used to specify HTML link locations or to set anchors for locations to link to. This enables the person using the browser to click on a link (anchor) and their browser will go to the location pointed to by the anchor. Anchors begin with the <A> tag and end with the </A> tag.

Anchor Attributes

• NAME - Sets an anchor at a named location in the document for later use by an anchor tag.
• HREF="hw.html" - A hypertext reference which defines the name of the document or the named location in the document for the anchor link to send the web browser to.
• TARGET - Specifies the frame target the referenced page will be put into. The target may me a named window or one of the special reserved names below. If the target is a named window that exists the web page the link points to will be loaded into that window. If a window by that name does not exist, a new window with that name will be created.
• _blank - The web linked page loads in a new window and does not name the window.
• _parent - The new page will load in the parent frame or window.
• _self - The new page will load in the same window that the link is in. If the link is in a frame, it will load inside the frame. This is the default target.
• _top - The new page will load into the top window reguardless of how many framesets deep the link is embedded.

Examples

Example 1 - Named Anchor

At the top of this page is a named anchor which is used for other examples on this page. Its text is:

<a name="top"></a>

Example 2 - Link to another page

This is an example of HTML source code using an anchor link:

<a href="htmlintroduction.html" >Introduction</a>

Here is how it looks:

Introduction

It will take you to the introduction page if you click on it.

Example 3 - A Mail Link

This example shows how to set up a mail link that invokes the installed mail program when it is clicked on. Here's the source code:

<a href="mailto: ctdp@operamail.com">ctdp@operamail.com</a>

Below is the implemented example. If you click on it it should invoke your mail program such as Microsoft Outlook so you can send an e-mail. Feel free to click on it to see the effect. You can send an e-mail telling us that the example worked or exit the e-mail program.

tvprashanthnair@gmail.com

Example 4 - Image Link

This is an example of HTML source code using an anchor link with a button image embedded (It also includes some JavaScript):

<a href="htmlgraphics.html" onMouseOver="window.status='To graphics page' ;return true" onMouseOut="window.status='';return true"<>img src="bluestartbutton.gif" alt="Graphics" vspace="3" border="0" height="35" width="120"></a>

Here's how it looks and works:

It will take you to the graphics page of this document. The JavaScript part includes the "onMouseOver" and onMouseOut" definitions. They are event handlers for the MouseOver and MouseOut events. The "window.status" definition is an attribute of the window object. You can read about JavaScript in the JavaScript Manual.

Example 5 - Local Page Link

Here's an example of HTML source code that will take you to the top of the page:

<a href="#top">Take me to the top of this page.</a>

Here's how it looks and works:

Take me to the top of this page.

Example 6 - Non-Underlined Link

Here's an example of HTML source code that will take you to the top of the page, but it is not underlined:

<a href="#top" style="text-decoration: none" >Take me to the top of this page.</a>

Here's how it looks and works:

Take me to the top of this page.

Example 7 - Hidden Link

Here's an example of HTML source code that will take you to the top of the page, but it is not underlined, nor is the color changed for a normal link color. It is also embedded with other text to make it harder to find. This link is essentially hidden and can only be found by placing the mouse directly over the link.

Take me to the <a href="#top" style="text-decoration: none" style="color='black'" >top</a> of this page.

Here's how it looks and works:

Take me to the top of this page

Take me to the <a href="index.html" target = "_top">main HTML</a> page.

Here's how it looks and works:

Take me to the main HTML page.

Example 9 - Target set to self

Take me to the <a href="index.html" target = "_self">main HTML</a> page.

Here's how it looks and works (Use the BACK button on your browser to return):

Take me to the main HTML page.

Example 10 - Target set to blank

Take me to the <a href="index.html" target = "_blank">main HTML</a> page.

Here's how it looks and works:

Take me to the main HTML page.

If you continue clicking on this link, it will continue making new pages.