MGA Logo

Web Development Tutorials



  
  

Redirecting Pages

You probably have visited Web sites at which you are automatically redirected from one page to another. This technique is often used when a home page is moved from one URL to another. For a certain period of time, the original URL redirects to the new URL until users have a chance to change their bookmarks or link references.

The <meta> Tag

Redirection is provided with a <meta> tag which appears in the <head> section of the document, and in general, is used to provide information about the HTML document. A general format for this redirection type tag is shown below. 

    <meta
      http-equiv="refresh"
      content="seconds; url=url"
    >

Listing 7-17. General format for <meta> tag.

The http-equiv attribute identifies this use of the <meta> tag as a refreshing, or reloading, of the current page. The content attribute specifies the number of seconds to wait before reloading takes place, along with the URL of the page to which redirection is to take place when the current page is reloaded.

For example, the following link goes to a page named Redirect.htm located in the current directory. The Redirect.htm page is coded with a meta tag that redirects back to this page after five seconds.

Redirect Page

In the <head> section of the Redirect.htm page is the following <meta> tag to link back to this page. 

    <head>
      <title>Redirect Page</title>
      <meta http-equiv="refresh" content="5; url=redirecting-pages.aspx">
    </head>

Listing 7-18. Coding to automatically redirect to a different page.

A Slide Show

A <meta> tag with http-equiv and content attributes can also be coded on a series of pages to provide a self-running slide show that automatically loads one page after another. Each <meta> tag specifies the viewing time for the page along with a link to the next page in sequence.

The following graphic link loads the first (Slide1.htm) of five pages of a slide show that are all located in the current directory. This initial link is coded below. 

    <a href="Slide1.htm"><img src="Pixar.gif" alt="View Slide Show"></a>
Link to pixar slide show.

Figure 7-15. Link to slide show.


Each of the slide show pages contains a <meta> tag giving the URL of the next page in sequence and setting the refresh timer for three seconds. The following abbreviated code appears on the slide pages. 

    <head>
      <title>Slide 1</title>
      <meta http-equiv="refresh" content="3; url=Slide2.htm">
    </head>
    <body>
      
      <h1>Toy Story</h1>
      <p><img src="ToyStory.jpg" alt="Toy Store Image"></p>
    </body>

    <head>
      <title>Slide 2</title>
      <meta http-equiv="refresh" content="3; url=Slide3.htm">
    </head>
    <body>
      
      <h1>A Bug's Life</h1>
      <p><img src="BugsLife.jpg" alt="A Bugs's Life Image"></p>
    </body>

    <head>
      <title>Slide 3</title>
      <meta http-equiv="refresh" content="3; url=Slide4.htm">
    </head>
    <body>
      
      <h1>Finding Nemo</h1>
      <p><img src="FindingNemo.jpg" alt="Finding Nemo Image"></p>
    </body>

    <head>
      <title>Slide 4</title>
      <meta http-equiv="refresh" content="3; url=Slide5.htm">
    </head>
    <body>
      
      <h1>Monsters, Inc.</h1>
      <p><img src="MonstersInc.jpg" alt="Monsters, Inc. Image"></p>
    </body>

    <head>
      <title>Slide 5</title>	
      <meta http-equiv="refresh" content="3; url=xhtml07-04.htm">
    </head>
    <body>
      
      <h1>Toy Story 2</h1>
      <p><img src="ToyStory2.jpg" alt="Toy Store 2 Image"></p>
    </body>

Listing 7-19. Partial coding for slide show pages.

The final page of the slide show redirects back to this tutorial page containing the original link to the first slide.

If you want to run the show in a separate browser window, then the original link opens a new window. 

    <a href="Slide1.htm" target="_blank">
      <img src="Pixar.gif" alt="View Slide Show">
    </a>

Listing 7-20. Opening a slide show in a separate browser window.

Note that since a <meta> tag cannot close a browser window, the final slide page that is opened in this separate window should not contain a <meta> tag to redirect back to the original page, thereby resulting in the original page being opened in two separate windows: in the original window and in the separate slide-show window. Rather, the final page of the slide show should inform visitors simply to close the slide show window to reveal the original window containing the original link page.


TOP | NEXT: Traversing Folders