25. Target That Window

"Add a TARGET to your HREF"

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

Objectives

After this lesson you will be able to:

Write the HTML to make a hyperlink open a URL or web page in a second web browser window
Write HTML so that all links in a page load in a specified browser window
Understand the limitations of opening multiple browser windows

Lesson

Note: If you do not have the working documents from the previous lessons, download a copy now.

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 now.

NOTE: The first time you try the link, it should display a new web page in a window that sits on top of this lesson page. If you close that window, and try the test link above, it will behave the same way.

Try it again, 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:

_top
_self
_blank
_parent

We suggest that you use short but descriptive window names.

Adding a Targeted Window Links to Your Pages

We will now use this new code in our volcano lesson. From our previous work, the page we created describing Volcanoes in the United States contained the small graphic of the seismograph, that when it was clicked, linked to a larger image. We will now adjust the HTML so that the large image opens in a new browser window.

Open the usa.html file in your text editor.
Find both instances where we have links to the seismo.jpg image file that read:
```
  <a href="../pictures/seismo.jpg">
```
and edit them to read:
```
  <a href="../pictures/seismo.jpg" target="photo">
```
Save and Reload in your web browser.

Now, both the links from the smaller image as well as it's hypertext caption should load the larger JPEG image in a new browser window.

We now will show you a way to set the TARGET attribute so that the link is forced to open in a new browser window and be in front... by using the special window target name "_blank". The disadvantage with this approach is that if you have 20 links with this window target name, it is possible to then have your single web page spawn 20 different browser windows. Because additional browser windows require more computer memory, this might be a recipe for a computer crash!

But let's look at a case were we can use this feature. In our Volcano Web site, the page for terminology contains the image of different volcano types, each hyperlinked to an external web site. Although the href links are written differently because they are embedded in the code we created to make the clickable image map (in lesson 23), we could modify them to read:

<map name="volcmap">
  <area shape="rect"    
     href="" 
     target="_blank" coords="48,46,204,153">
  <area shape="rect" href="explode.html" 
     target="_blank" coords="0,66,26,227">
  <area shape="rect" href="height.html" 
     target="_blank" coords="95,283,378,309">
  <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/"  
     target="_blank" coords="321,154,468,261">
  <area shape="rect" href="http://www.swisseduc.ch/stromboli/" 
     target="_blank" coords="172,155,318,274">
  <area shape="rect" href="http://hvo.wr.usgs.gov/volcanowatch/" 
     target="_blank" coords="36,155,168,276">
  <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/" 
     target="_blank" coords="90,3,343,123">
  </map>

If we wrote our code this way, any hyperlink from the image map would load the linked site in a new web browser window. But since we have a series of links all with the same window target, we can use a different tag to write HTML that will do the same thing:

  <base target="window_name">

which means that all hypertext links after this tag will be opened in the window specified. So now we will update our working files to use this new tag.

Open the term.html file in your text editor.

After the line that reads:

  <font size=+2>Investigate each type by clicking on a picture</font><br>

add this line:

  <font size=-1>each link will open its own browser window</font><br>

This provides a message for the user so they understand what will happen when they follow the links.

Now let's specify the window. On the line above the HTML code that reads:
```
<map name="volcmap">
```
insert this HTML:
```
  <base target="_blank">
```
Save and Reload in your web browser.
NOTE: If you click on any of the hyperlinks from the image map, the links to the different volcano sites should open in new browser window, in front of the lesson window. Note what happens if you click the part labeled SURTSEYAN, leave the new window open, return to the first page, and repeat the click-- now you have two windows open with the same URL!

But there is another subtle problem; below our image map we have more hypertext links to other documents and web sites that we do not want to load into a new window! We can take care of this situation by using another one of the special window target names, "_self" which means load the new url/page into the same browser window.

Open the term.html file in your text editor.
After the end of the image map code:
```
  </map>
```
add this line:
```
  <base target="_self">
```
Save and Reload in your web browser.
NOTE: This now over-rides the previous <base target=..."> tag, so that all links following this will load into the current browser window.

Check Your Work

Compare your web pages with this sample of how it should appear. If your pages are different from the sample or the hypertext links do not work correctly, review the text you entered in the text editor.

Review

Review topics for this lesson:

How can you modify links to force them to open a URL in a different browser window?
What are some problems in opening new browser windows? What is an approach you can take to lessen the confusion for the viewer?
How can you make it so all links after a certain point open in a new window? How can you make this effect stop after a certain point?

Independent Practice

In your own web page, look for places where it would make sense to open new browser windows. Experiment with adding the TARGET=... tag to some of your links. Does it make sense to other people? Do they understand what has happened?

Coming Next....

Create useful 'frame' sets of web pages... chopping up a single page into useful pieces.

GO TO.... | Lesson Index | previous: "META tags" | next: "Framed Web Sites" |

Writing HTML: Lesson 25: Targeting Windows
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

URL: http://www.mcli.dist.maricopa.edu/tut/tut25.html