Text link with target attribute:
In this tutorial we will be setting the browser window / tabs destination with the target attribute

If you want to follow the tutorial please download tutorial template here
If you are following these tutorials continue to use your own source code from previous tutorial.

The code below is what we covered in the previous tutorial, it has no target attribute set. The target value will be set to the default setting which will open the link in the same window / tab that you or the user is currently in.
<a href="http://myprogramingjourney.blogspot.ie/">My Programing Journey</a>

Next we will be adding a target attribute within the opening tags to set the window / tab destination that you want to set.

Target attribute values are as follows:
target = "_blank"     New tab / window  
target = "_top"     Existing tab / window  
target = "_self"     Existing tab / window  
target = "_parent"     Existing tab / window  

In this example I have chose to use the _blank target. This will open the link in a new tab on a browser.
  • The advantage to using the new tab system is that your website page is still showing on the users browser.
  • The disadvantage to using the new tab system is that if the user closes your tab they will be left with the new tab from your hyperlink with no back history to your website.
<a href="http://myprogramingjourney.blogspot.ie/" target="_blank">My Programing Journey</a>

Save your HTML document and test on browser of choice. If you wish to continue following the tutorials type Yes into the table data column after Text hyperlink with target attribute in the completed tutorials table.

<tr>
   <td>Text hyperlink with target attribute</td>
   <td>Yes</td>
</tr>

To download the finished example for this tutorial please click here

In the next tutorial I will cover Anchor links in connection with table of contents

Previous tutorial Next tutorial

0 comments:

Post a Comment

Please feel free to leave comments or ask questions related to the tutorials.