Web based School

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 XHTML document. A general format for this tag used for redirection is shown below:

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

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. The url attribute gives 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:

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.

Assume a graphic link that loads the first (Slide1.htm) of the four pages of a slide show, all located in the current directory. This initial link is coded below.

<a href="Slide1.htm" target="_blank"><img src="image.gif"/></a>

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 five seconds. The following abbreviated code appears on the slide pages.


<head>
  <title>Slide 1</title>
  <meta http-equiv="refresh" content="5; url=Slide2.htm"/>
</head>
<body>
  <h1>Toy Story</h1>
  <img src="https://img.softlookup.com/CHEC.GIF"/>
</body>


<head>
  <title>Slide 2</title>
  <meta http-equiv="refresh" content="5; url=Slide3.htm"/>
</head>
<body>
  <h1>A Bug�s Life</h1>
  <img src="https://img.softlookup.com/CHEC.GIF"/>
</body>


<head>
  <title>Slide 3</title>
  <meta http-equiv="refresh" content="5; url=Slide4.htm"/>
</head>
<body
  <h1>Finding Nemo</h1>
  <img src="https://img.softlookup.com/CHEC.GIF"/>
</body>


<head>
  <title>Slide 4</title>
  <meta http-equiv="refresh" content="5; url=xhtml07-04.htm"/>
</head>
<body
  <h1>Monsters, Inc.</h1>
  <img src="https://img.softlookup.com/CHEC.GIF"/>
</body>

The final page of the slide show redirects back to this 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 contains a target="_blank" attribute for the new window. Since the final slide page cannot exit the window through its <meta/> tag, the final slide page should inform visitors to close the slide show window.