HTML Text Link ( HTML anchor )

Web pages can contain links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks. In web world language, it is known as “HTML anchor Tag
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on any web page.

In this tutorial, you will learn how to create text links between the different pages of your site, links within pages of your sites, and how to link to other sites ( or external sites).

1. Linking Documents – The <a> Element: ( HTML anchor )

A link is specified using the <a> element. This element is called an anchor tag as well. Anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach the linked document.
Following is the simple syntax to use this tag.

 

Anchor Attributes:

Following are the most frequently used attributes for the <a> tag.

  • href: specifies the URL of the target of a hyperlink. Its value is any valid document URL, absolute or relative, including a fragment identifier or a JavaScript code fragment.
  • target: specify where to display the contents of a selected hyperlink. If set to “_blank” then a new window will be opened to display the loaded page, if set to “_top” or “_parent” then the same window will be used to display the loaded document, if set to “_self” then loads the new page in the current window. By default, it’s “_self”.
  • name & id: attributes place a label within a document. When that label is used in a link to that document, it is the equivalent of telling the browser to go to that label.
  • event: attributes like onClick, onMouseOver, etc. are used to trigger any Javascript or VBscript code.
  • title: attribute lets you specify a title for the document to which you are linking. The value of the attribute is any string, enclosed in quotation marks. The browser might use it when displaying the link, perhaps flashing the title when the mouse passes over the link.
  • accesskey: attribute provides a keyboard shortcut that can be used to activate a link. For example, you could make the T key an access key so that when the user presses either the Alt or Ctrl key on his keyboard (depending on his operating system) along with the T key, the link gets activated.

A Simple Example:

 

This will produce the following result, Click and come back to proceed with the rest of the tutorial:

Hacking tricks |
love quotes |
Online learning

2. Base Path for Links:

It is not required to give a complete URL for every link. You can get rid of it if you will use the <base> tag in your header. This tag is used to give a base path for all the links. So your browser will concatenate the given relative path to this base path and will make a complete URL.

For example:

So now if you will use <a href=”/html/index.php”> then it will be considered as <a href=”http://www.learning4uworld.com/html/index.php”>.

3. Setting Link Colors:

You can set colors of your links, active links, and visited links using a link, alink, and vlink attributes of the <body> tag. But it is recommended to use CSS to set colors of links, visited links, and active links.

For example:

 

4. Create Download Links:

You can create a text link to make your PDF, or DOC or ZIP files downloadable. This is very simple; you just need to give the complete URL of the downloadable file as follows:

 

 

Loading