HTML Links

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.

Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images.

It can point to any resource on the Web: An HTML page, an image, a sound file, a movie, etc.

*openging <a> and closeing </a> tag.

The syntax of creating an anchor:

<a href="url"> Text to be displayed </a>

Various attributes

Target :-The target attribute is used to specify where the linked document will be opened.

To open a linked document in a new window, use the attribute

target="_blank"

1. _top:
The user agent should load the document into the full, original window (thus canceling all other frames). This value is equivalent to _self if the current frame has no parent.

2. _parent:
The user agent should load the document into the immediate FRAMESET parent of the current frame. This value is equivalent to _self if the current frame has no parent.

3. _blank:
The user agent (i.e. Internet browser) should load the designated document in a new, unnamed window.

4. _self:
The user agent should load the document in the same frame as the element that refers to this target. By default its "_self".

Link Colors and Icons

When you move the mouse cursor over a link, two things will normally happen:

  • The mouse arrow will turn into a little hand
  • The color of the link element will change
  • By default, links will appear as this in all browsers:

An unvisited link is underlined and blue

  • A visited link is underlined and purple
  • An active link is underlined and red

To set colors of the links, active links and visited links can be done using link , alink and vlink attributes of <body> tag.

Example

<html> 
  <head>  
   <title> Welcome to HTML Tutroial </title>  
   </head>  
   <body alink="red" vlink="blue" link="green">
     <a href="http://www.acadnote.com">Acadnote</a>
   </body>  
</html>
Output
Acadnote

Links - Image as Link

It is common to use images as links:

<a href="html_links.php">
   <img src="html.png" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Output

Linking to a specific section of a web page

Syntax 
<a href="url#label">content</a>

Example

<html> 
  <head>  
    <title> Welcome to HTML Tutroial </title>  
  </head>  
  <body>  
   <a href="html_links.php#lsswp">HTML Links</a>
  </body>  
</html>

TARGET HTML DOCUMENT

<html> 
  <head> 
    <title> Welcome to HTML Tutroial </title>  
  </head>  
  <body>  
   <a name="lsswp">HTML Links</a>
   <h1> Learn More and Enjoy More </h1>
  </body>  
</html>
Output
Links - Image as Link

Or, create a link to the <a> element from another page:

<a href="www.fastlearning.in/html_links.php#down">Visit</a>
Share this article on