"Add a TARGET to your HREF"
or
"How to Make HyperLinks that Do Not Leave Your Site Behind"
After this lesson you will be able to:
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 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."
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:
We suggest that you use short but descriptive window names.
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.
<a href="../pictures/seismo.jpg">and edit them to read:
<a href="../pictures/seismo.jpg" target="photo">
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="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html"
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://stromboli.net/"
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.
<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.
<map name="volcmap">insert this HTML:
<base target="_blank">
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.
</map>add this line:
<base target="_self">
NOTE: This now over-rides the previous <base target=..."> tag, so that all links following this will load into the current browser window.
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 topics for this lesson:
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?
Create useful 'frame' sets of web pages... chopping up a single page into useful pieces.
Writing HTML: Lesson 25: Targeting Windows
©1994-1999
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
The 'net connection at MCLI is
Alan Levine
Comments to alan.levine@domail.maricopa.edu
URL: http://www.mcli.dist.maricopa.edu/tut/tut25.html