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.techdotblogs.com”>Tech Dot Blogs</a>
Please Note:
- href attribute is used to specify the targeted webpage.
- Only the link text appears to the user. Here, “Tech Dot Blogs” will only appear to the user, clicking on which allow visiting www.techdotblogs.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=”techdotblogs.com”>Tech Dot Blogs</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.techdotblogs.com” target=”blank”>Tech Dot Blogs</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.techdotblogs.com” target=”_top”>Tech Dot Blogs</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.techdotblogs.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.techdotblogs.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
