---

Search posts under HTML5:

---

Links in HTML5

How to create links in HTML5?

Links:

Links are used to open the external page by clicking the link. It allows the user to open the multiple pages in a web by using the links. HTML links are used to as hyperlinks which are used to open the webpage by clicking the link.

Syntax of HTML link:

<a href="url">link</a>

In the above code snippet we have defined how to use the links. We have taken the <a> tag to provide the links and href is used to specify the url of the page and url is defined as which we are giving the in the link and the link is used to provide the text which we are giving the links in the url.

Displaying a hyperlink:

In order to display the hyperlink we should follow

<p><i>This displays the title as dotnetfunda </i></p>
<a href="http://www.dotnetfunda.com">dotnetfunda</a>

In the above code snippet we have defined how to create the hyperlink in the html page. We have taken <a> tag to define the hyperlink. In the <a> tag we have href as hyperlink reference as http which means (Hyper Text Transfer Protocol) of the www( World Wide Web). We have given the site name as dotnetfunda.com which is called the hyperlink. We have given the title attribute as dotnetfunda which appears as the title in the output.

output  

Link image:

In order to keep the image as a link we have to add the image source to the <a> tag.

    <p> Adding link to the image </p>
    <a href="http://www.techfunda.com">
    <img src="TechFunda.gif" width="80" height="30" />
    </a>
    <p> Adding link to the image </p>
    <a href="http://www.dotnetfunda.com">
    <img src="dnf.png"  width="80" height="80"/>
    </a> 

Image link 

In the above code snippet we have displayed how to create the image as a link. In orderto give a ;link to the image we hgave to arrange the image in <a> tag to create the image as a link.

output

Links colors:

There are different types of links which uses the style attribute to provide the links 

• Active links
• Visited links
• Hover link

Hover link

    <style>
            a:hover  {color:pink;}
    </style>
    <a href="http://www.dotnetfunda.com">dotnetfunda</a>   

    <style>
            a:active  {
                background-color:blue;
                  }
    </style>
    <a href="http://www.dotnetfunda.com">dotnetfunda</a>  

 

Visited link:

It is used to allow the link to change the color to the when the link as visited 

    <style>
            a:visited  {
                color:orange;
                  }

    </style>
    <a href="http://www.dotnetfunda.com">dotnetfunda</a>   

Visited link

In the above code snippet we have taken the color ass orange and we have given in the <a> tag to change the color of the link when it is visited 

output

Link using Target:

Link using target is used to select the link to open in another pages

    <p>Click any of the following links</p>
    <a href="http://www.dotnetfunda.com" target="_blank">Opens in New</a> |
    <a href="http://www.techfunda.com" target="_self">Opens in Self</a> |
    <a href="http://www.kidsfunda.com" target="_parent">Opens in Parent</a> |
    <a href="http://www.itfunda.com" target="_top">Opens in Body</a>

Link using target

In the above code snippet we have defined the target attribute we have 

• _blank to open the page in new window
• _self to open the page the new document in the same window and frame as the current document.
• _Parent will load the new document where the inner frameset file had been.
• _Top is used load the page in top most frame

Adding Bookmarks to the links:

Bookmarks are used to add the links to jump to the given link

    <p><a href="#techfunda">Go to dotnetfunda by clicking this</a></p>

    <h2>Techfunda</h2>
    <p>Techfunda is a online tutorial</p>
    
    <h2>Itfunda</h2>
    <p> itfunda is online tutorial which provides the EBook for learning </p>
    
    <h2>Kids funda</h2>
    <p>is a online tutroial which provides the entertainmnet to the kids</p>
    
    <h2 id="techfunda">dotnetfunda</h2>
    <p>dotnetfunda is a online tutorial which provides to share and learn technologies </p>
    
    <h2>Techfunda</h2>
    <p>Techfunda is a online tutorial</p>
    
    <h2>Itfunda</h2>
    <p> itfunda is online tutorial which provides the EBook for learning </p>
    
    <h2>Kids funda</h2>
    <p>is a online tutroial which provides the entertainmnet to the kids</p>
   
     <h2>Techfunda</h2>
    <p>Techfunda is a online tutorial</p>
    
    <h2>Itfunda</h2>
    <p> itfunda is online tutorial which provides the EBook for learning </p>
    
    <h2>Kids funda</h2>
    <p>is a online tutroial which provides the entertainmnet to the kids</p>

Link with Bookmarks

In the above code snippet we have taken the link in the <a> tag as #techFunda and we have given the may headings techfunda, dotnetfunda, kidsfunda, itfunda, etc. This is used to select the wanted link as giving by the reference as in the given the link we have given the link as #techFunda and in the heading <h2> we have given the id as techfunda and when the link is pressed it goes and calls the  option as dotnetfunda

output

This is the output before clicking the link

This is the output after clicking the link

output