Lessons | previous | next |

25. Target That Window

"Add a TARGET to your HREF"

or

"How to Make HyperLinks that Do Not Leave Your Site Behind"

For all of the pages we've worked on so far, we have written documents that have hyperlinks, so that clicking the hyperlink loads a new web page, replacing the content that was there. Yes, a viewer can return to a web page using the browser's back buttons or the Go / History features.

But perhaps there is an application where you might wish a link to open the new content in a second browser window, leaving the originating window in tact. One case where you might do that is where the first page contains a list of links to say 50 different photograph images or definitions in a glossary, It might be handier if the list of links were to remain in view so the users can click a link, view the content, and easily return to the list of choices to select another item.

Or perhaps the first page is part of an educational lesson where the students must visit 5 different web sites and answer questions about each one-- it would help them remember the assignment if the starting page remained in view.

In this lesson we will see how to modify the <a href=...> tag to specify that the link be loaded in a new browser window. In this tutorial we have been creating new windows with our web browser-- now we can see how to provide this functionality via HTML.

Before we begin, there are issues to consider. If your web pages open up too many different web browser windows, it may be confusing to the viewer which one they started with. Also, on some computers, the new browser window completely obscures other ones, so they may not even know that it is a new browser window. So use this feature when it makes the most sense for the content.

The TARGET Attribute

The HTML code we use to specify a target browser (the window to display the content in) looks like:

  <a href="some_url.html" target="window_name">

where as we know from earlier lessons href indicates the URL, either a web address or another one of our own web pages. The new part of the tag is the name we provide for target=.

We can provide any name for the target; it is an internal identifier for the web browser. What happens when you click a link like:

  <a href="http://www.mcli.dist.maricopa.edu/tut/likethis.html" target="tutorial">

is that your browser says, "Hmmm. I must go fetch the HTML for the URL http://www.mcli.dist.maricopa.edu/tut/likethis.html, and place it in a window named tutorial. Ahhh, I do not have any such window, so I will create a new one."



Try it, but this time simply shrink the new window, move it to the side, or simply activate the lesson window to the front. In many web browsers, if you click the link again, it will reload the window, but it will not bring it to the front. In fact, you can keep clicking that link until next year, and it will seem like the link is broken, when it is just hanging around in the back.

The name you provide in the target= attribute can be almost anything. We will see later that there are 4 names that have special meaning:

  1. _top
  2. _self/li>
  3. _blank
  4. _parent

We suggest that you use short but descriptive window names.

previous: "META tags" | next: "Framed Web Sites" |