HTML Links
- HTML links are nothing but the hyperlinks.
- Hyperlinks are used to navigate between web pages by clicking on words, phrases, and images.
- The HTML anchor tag is used to define a hyperlink.
<a href="URL"> Link text </a>
href: Specifies the destination address
Link text: Link text is visible part.
Example: Hyperlink
<!DOCTYPE html>
<html>
<head>
<title>HTML links Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tutorialride.com/">Visit TutorialRide.com</a>
</body>
</html>
Output:
Click following link
Visit TutorialRide.com
- Hyperlink appears blue in color and underlined.
- When the mouse cursor moves on the hyperlink, its arrow changes the shape to a little hand.
The target attribute
- The target attribute is used to specify the location where linked document is opened.
- Every target name starts with underscore (_).
| Option | Description |
|---|---|
| _top | Opens the linked document in new window breaking all the frames. |
| _blank | Opens the linked document in new blank window. |
| _parent | Opens the linked document in the parent frame of the current document. |
| _self | Opens the linked document in the current frame. |
Example: target attribute
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click any of the following links</p>
<a href="http://www.tutorialride.com/" target="_blank">Opens in New</a></br>
<a href="http://www.tutorialride.com/" target="_self">Opens in Self</a></br>
<a href="http://www.tutorialride.com/" target="_parent">Opens in Parent frame</a></br>
<a href="http://www.tutorialride.com/" target="_top">Opens in new window</a>
</body>
</html>
Output:
HTML links colors
Colors of hyperlink can be set by using the following attributes.| Attribute | Description |
|---|---|
| link | Used to change the default color of the hyperlink. |
| alink | Used to change the default color of the active hyperlink. |
| vlink | Used to change the default color of the visited hyperlink. |
Example:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body link="#000080" alink="#54A250" vlink="#ff0000">
<p>Click on the following link</p>
<a href="http://www.tutorialride.com/" target="_blank">TutorialRide.com</a>
</body>
</html>
Output:
Click on the following link
TutorialRide.comThe color of the active link in this case would be: TutorialRide.com
And, the color of the link once you have visited it, would be :
