META / Page

Making Pages Automatically Load

This is a handy application for creating splash screens that automatically disappear to be replaced with home pages, or to build a series of "slideshows" automatically cycling a series of separate HTML pages, one after the other. It's easy to do and, if you use it well, it can be a very effective presentation method.

How It Works

You create this effect by using a meta tag to force the browser to pull another page automatically from the server. The new page will replace the first page. This is accomplished by adding a similar line of code to your HTML file (it MUST be between the head tags) :

<META HTTP-EQUIV="refresh" CONTENT="5; URL=http://www.oocities.org/gmcwebclass/5b.htm">

This meta tag tells the browser to refresh the page by waiting 5 seconds and then looking to the server for the content file named "5b.htm"

View Example

The tag's name is META

The first attribute is HTTP-EQUIV. You use this attribute because you are using the meta tag to communicate with the server. The value for the attribute is refresh, a standard action value understood by most browsers and servers. The word refresh does not need to be in quotes.

The second attribute is CONTENT. It tells the browser how to go about performing the refresh action. The value is the number of seconds to wait before beginning the refresh action (20 seconds), followed by a semi-colon and the URL of the file with which to refresh the page (the URL of the new HTML page.) The entire value of the content attribute must be surrounded by quotation marks, because this information is getting passed along to the server.

The result is that 5 seconds after loading the page, your screen repaints and you see the second HTML page.

One important point to remember is that it takes time to download your page into the browser. Make sure you specify enough seconds of delay time between pages. If you don't leave enough time, a partially loaded page will just disappear to be replaced with another. If you're setting up a slide show, this sense of timing becomes even more important.

A good rule of thumb is that on a 56k modem it takes 1 second for every 4K of information transferred. So, add up the size of all your graphics and the size of your page and use that as the minimum number of delay seconds.

Framed Slideshows

The most typical use of this meta tag is to replace a splash page with a home page. But you can also use it to create slide shows.

Picture a small frame along the edge of the screen that displays a series of images about a social problem on a non-profit page designed to help solve that problem. Or a series of sketches of an architectural project, showing the project from various angles in various stages of creation on a page about the building. The replaced pages can loop or can have a beginning to end path, stopping when a final image, page, or text appears.

The applications for using automatic page replacement go on and on ... and let you add a sense of motion and interactivity with one simple meta tag -- and without any complicated coding, animated GIFs, or animation plug-ins.

Another example: "I hate Mosquitoes" (http://www.spearedpeanut.com/mosquito/hate.html)