How To's

How To Create An HTML Slide Show

Did you know that you can use the "http-equiv refresh" function of the meta tag to progressively load a sequence of web pages which in effect creates a slideshow without any type of server or client side scripting?

Follow the quick and easy five step procedure below, and you will be on your way to creating an instant HTML slideshow for your site visitors.

1. Create six HTML pages and name them frame1.html, frame2.html, frame3.html, frame4.html, frame5.html and frame6.html. Add your own text to the pages.
2. Then within the web page that will be linking to the slideshow (index.html for example), create a link that states something like this: View Our Slideshow - the presentation runs just under 10 min. (link to frame1.html)
3. Open frame1.html and add the following meta tag code below between the head tags. Note that the URL we specified is directing the refresh to page2.html after 3 seconds: <*meta http-equiv="refresh" content="3;url=frame2.html">
4. Then open frame2.html and add the same code in the same location taking care to edit the refresh to frame3.html. Do this on each of the six pages you created in step 1. In frame6.html (or the last page) you can have the slideshow refresh redirect your visitor to another page on your site by simply editing the page name in the http-equiv code of step 3.
5. You can edit the 3 seconds to whatever you wish and you can create as many HTML pages with refresh redirectors as you need to. Just remember to edit the page name where you want the page to take your visitors next. Above all have fun!

Note: Remove the * character everywhere it appears in the code above. We have used it in this example so the actual code will appear and not be rendered as HTML in this page.

If you would like to create various types of fade ins or fade outs as your visitors enter or leave your slide show pages, you may use the "Page Transition" script contained in our Webmaster Tools package . If you have not yet downloaded the program, you may click here to download now.

Be sure to log into the The Webinar Pros Conference Center to see what a slide show using this script looks like!

This tutorial is brought to you by The Webinar Pros. Visit our website to find out how you can increase sales, while slashing your customer support and training costs!