Links

Links found on the web pages allow the user to navigate from one webpage to another. A single click on the link is required for navigation or jumping from one page to another.

 

Hyperlinks

All HTML links are known as hyperlinks.

Hyperlink is a word(s) or image on a webpage that allow the user to navigate from one page to another with a single click.

Hyperlinks in the form of text are sometimes highlighted using a different color or writing it in bold.

In HTML, Hyperlinks are defined using <a> tag.

Syntax
<a href=”http://www.technologydiving.com”>Technology Diving</a>

Please Note:

  • href attribute is used to specify the targeted webpage.
  • Only the link text appears to the user. Here, “Technology Diving” will only appear to the user, clicking on which allow visiting technologydiving.com.
  • The link text needs not to be a text. It can be an image also.

 

Local Links

The above example explained used a full web address.

A local link need not be defined using complete URL i.e., without using “http://www.

Syntax
<a href=”technologydiving.com”>Technology Diving</a>

 

HTML Links using Colors

Whenever a mouse is moved over a hyperlink, a few effects can be seen:

  • The mouse arrow shows a different pointer.
  • The color of the hyperlink changes.

By default, the hyperlinks link will appear as follows:

  • An unvisited hyperlink will be underlined and appears blue
  • A visited hyperlink will be underlined and appears purple
  • An active hyperlink is underlined and appears red

The color, font and style of the hyperlink can be changes using <style>.

Syntax
<style>
a:active {color:red; background-color:transparent; text-decoration:none}
a:visited {color:blue; background-color:transparent; text-decoration:underline}
a:link {color:yellow; background-color:transparent; text-decoration:underline}
a:hover {color:green; background-color:transparent; text-decoration:none}
</style>

 

HTML Links – The Target Attribute

The hyperlinks will open the new page in the same window or same tab until the targeted page is specified.

target attribute is used for specifying where to open the linked webpage.

Syntax
<a href=”http://www.technologydiving.com” target=”blank”>Technology Diving</a>

Different target attributes are used for different purposes.

Target Value                   Usage
_blank                         Open the targeted page in a new tab or window
_self                          Open the targeted page in the same tab or window
_parent                        Open the targeted page in the parent window
_top                           Open the targeted page in the full page of the window
framename                      Open the targeted page in the defined frame

Please Note: If your webpage to be opened is locked within a frame, you can break out the frame using “_top”.

Syntax
<a href=”http://www.technologydiving.com” target=”_top”>Technology Diving</a>

 

Adding Links To Images

Links are generally used on images for allowing the user to navigate from one page to another.

Syntax
<a href=”http://www.technologydiving.com”>
<img src=”Welcome to the website” alt=”Tutorial” style=”width:26px;height:26px;border:0”>
</a>

 

Creating a HTML bookmark

HTML bookmarks allow the user to access the specific page directly without opening the home page.

  • Bookmarks are very helpful, if the website is having a huge number of pages.
  • A link is required to be added to create bookmark.
  • When the added link is clicked, the page will scroll to the bookmarked location within the webpage.
Syntax
Step 1 : Create a bookmark using id attribute
<h3 id=”important”>This content is important.</h3>
Step 2: Add the link using “id attribute” within the same page
<ahref=”#important”>Read the important text here.</a>

A link can be added to the bookmark from another page also.

Syntax
<a href=”http://www.technologydiving.com#important”>Read the important text here.</a>
Let us quickly revise:
<a>                        To define a link
href                       To define the link address or URL
target                     To define where to open the link
<img>                      To link the image with the URL
email