Wednesday, September 7, 2011

Make Link Opens a Page in New Window or Tab

Hello. In this tutorial I will show you a small tip in HTML that opens the link on a new window or tab when the user clicks on it. Sometimes, you view a page, and that page has some links to other pages. You want to view the other pages without leaving the current page, but when you click on the link, it moves you from the current page to the new page. The leading browsers including (Firefox, Chrome, IE, Safari and Opera) add a feature that you can right-click on the link and choose whether you want to view it in a new window or new tab. What if you forget to right-click on the link and choose to open it in a new tab, then the browser will take you from the current page to the new page.

For example, check the following two links (click directly on them without right-clicking on them)

Go to Google 1

Go to Google 2

Did you notice the difference. The first link took you to Google homepage and displayed it in a new tab. While the second one took you to Google homepage and you left the current post.

How to do this?

Now we will explain how we managed to do this. In HTML, the tags used to display a link in a webpage are <a> ... </a> tags. The <a> ... </a> tag has an attribute called target attribute that specifies where the link will be opened in the browser. If the attribute target has the value _blank, then this tells the browser to open the link in a new tab when the user clicks on it.

The HTML code for the first link above is:
<a href="http://www.google.com" target="_blank">Go to Google 1</a>
and this is the result of the HTML code
Go to Google 1

and the HTML code for the second link above is:
<a href="http://www.google.com">Go to Google 2</a>
and this is the result of the HTML code
Go to Google 2

At this point, I have reached the end of this tutorial that showed you how to create a link in HTML that opens the targeted webpage in a new tab in the browser when the user clicks on it. I hope you learned something valuable.

No comments:

Post a Comment