HTML links


Links in HTML are used for migrating from one page to other.Links are generally blue in colour and they are underlined.

Hyperlinks

Hyperlink is a text or image that is used to move from one page to other. All HTML links are called Hyperlink.
HTML links are of two types:
  1. Local links
  2. Global links
    Based on navigation prefference there are three type of HTML links:
  1. Unvisited links
  2. Visited links
  3. Active links

HTML link syntax:

<a href="url">text link</a>
Example:<a href="http://www.codehunt.com">CODEhunt.</a>

Example:

<!DOCTYPE html>
<html>
<head>
<title>
HTML links
</title>
</head>
<body>
<a href="http://www.codehunt.com">CODEhunt</a>
</body>
</html>

Output:

HTML local links

Local links are those links which are located on same server on which HTML document code file is present.

Example:

<!DOCTYPE html>
<html>
<head>
<title>
LOCAL LINKS IN HTML </title>
</head>
<body>
<a href="info.txt">Click here</a>
</body>
</html>

Output:

HTML images as links

One can also use images as links in HTML
<a href="http://www.codehunt.com">
<img src="image location">
</a>

Example:

<!DOCTYPE html>
<html>
<head>
<title>
Images as link
</title>
</head>
<body>
<a href="http://www.codehunt.com">
<img src="logo.jpg">
</a>
</body>
</html>

Output:

HTML link colors

We generally use different colours to differ one link from other.Like when one clicks a link its colour changes and a visited link appears in different colour.
<style>
a:link{ color:red; backround-color:transparent; text-decoration:none}
a:visited{color:green; background-color:transparent;text-decoration:none}
a:hover{color:blue;background-color:transparent;text-decoration:none}
a:active{color:purple;background-color:transparent;text-decoration:none}
</style>
Here in above example a simple link remains transparent in colour and link text is written in red colour when one points the mouse over link then it becomes of blue colour and when one clicks on link then link colour changes to purple.Now once link is visited its colour changes to green.
These must be in same order as mentioned in above example.

    Output:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    a:link{ color:red; backround-color:transparent; text-decoration:none}
    a:visited{color:green; background-color:transparent;text-decoration:none}
    a:hover{color:blue;background-color:transparent;text-decoration:none}
    a:active{color:purple;background-color:transparent;text-decoration:none}
    </style>
    <title>
    HTML LINKS </title>
    </head>
    <body>
    <a href="http://www.codehunt.com">CODEhunt</a>
    </body>
    </html>

    Notation:

  • a:link means normal link colour.
  • a:visited means visted link.
  • a:active means link which is clicked.
  • a:hover means link type when mouse is pointed over it.
  • Order of writting link format must be same everywhere.