21. Target That Window

For all of the pages we have created and worked on so far, we have written several documents that have hyperlinks in them, so that clicking on the hyperlink loads a new web page, replacing your site content that was there. Yep, we know a viewer can return to the web page using the browser's back buttons or using 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 on the first page of a web site is several different links you wish to research. It certainly would be a great help to remember where they started from if the starting page remained in view.

In this lesson we are going to see how to modify the <a href=...> tag to specify that the link to be loaded into a new browser window. Now we can see how to provide this functionality via HTML.

So as always, there are some 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. Plus, 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
No the HTML code that is used to specify a target browser (the window to display the content in) looks like:

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

The name you provide in the target="xxxxxx" attribute can be almost anything. What happens when you click a link like:

   <a href="http://www.eazyhtml.com/pages/clicked.htm" 
   target="party">

Try It Now

What is that your browser says, "OK? I have to go fetch the HTML for the URL http://www.eazyhtml.com/pages/clicked.htm, and now Ii have to place it in a window named party. Oh, I do not have any such window, so I will create a new one."

So here are the 4 names that have special meaning:

ADDING A TARGETED WINDOW TO YOUR LINKS
In our issapissin.htm we has a small image of a seismograph, we are now going to alter the HTML code on that hyperlink so the larger image will open in its own window.

1. Open your issapissin.htm file in your text editor.
2. Find both instances where we have links to the seismo.jpg image file that read:

      <a href="images/seismo.jpg">
   			  
       To Read:  
   	
      <a href="images/seismo.jpg" target="photo">

3. Save and Reload in your web browser.

Now, both the links from the smaller image as well as its 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 when the link is clicked, the link is now 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 happen to 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!

1. Find and open volcanic.htm in your text editor.
2. Find your unordered list with the URL's links to out side web sites.

      <li><a href="http://www.websiteurl.com/xxxxx/xxx">
      This site</a></li>
        to look like this
      <li><a href="http://www.websiteurl.com/xxxxx/xxx"
      target="_blank"> This site</a></li>

3. Save and Re-Load in your web browser.

Try clicking on your links now. What happens?? That's right, they all now open in a separate window leaving you site in your original browser window for you to still access.

INDEPENTANT PRACTISE
So now work through your own web site, look for places where it would make sense to open new browser windows. Experiment with adding the target=... tag to some of your links.

Top of page | Previous Lesson| Lessons Index | Next Lesson