You want to put a slide show on your webpage but, either you can not, or do not want to, use Java Script. Well, you can create a slide show using only the html refresh meta tag - no Java Script required.
A "meta tag" is an html tag that you place in the <head> section of your webpage. There are many different meta tags, they are used to provide information to a web server. The refresh meta tag is special in that it tells the browser to send a command to the server. The command tells the server that the page should be reloaded or that a different page should be loaded.
Technically when you load a different page, webmaster's called that a "redirect". Shown below is an example of a refresh meta tag.
<meta http-equiv="refresh" content="5;url=http://domain_name/page_name">
Note the tag's "content" attribute. It is assigned a string with two parts separated by a semi-colon. To the left of the semi-colon is a number that is the time, in seconds, until the page should be redirected. To the right of the semi-colon is the URL that should be loaded.
To create a slide show, we simply put each picture in the slide show on a separate webpage, and in the <head> section of each webpage we place a refresh meta tag that redirects to the page containing the next picture in the slide show. The last webpage in the slide show might have a refresh meta tag that redirects back to the first page.
Shown below is an example of html code for the first page in a slide show.
<html> <head> <meta http-equiv="refresh" content="5;url=page2.htm"> </head> <body> <img border="0" width="300" height="300" src="flower1.jpg" /> </body> </html>
Note the img tag that will load and display the image "flower1.jpg". Note the refresh meta tag with a content attribute that sets a 5 second delay before it redirects to page2.htm. Shown below is example html code for page2.htm.
<html> <head> <meta http-equiv="refresh" content="5;url=page3.htm"> </head> <body> <img border="0" width="300" height="300" src="flower2.jpg" /> </body> </html>
Page2.htm displays the image "flower2.jpg" and has a "refresh" meta tag that redirects to page3.htm. And so on, and so on, we can string together as many "slides" as we desire. But a slide show is usually ON a webpage, it doesn't usually keep changing pages. We can do that using an html <iframe> element.
An <iframe> element is used to embed a webpage within another webpage. In our example we'll create a "main" webpage that contains an <iframe> in which we can load the sequence of slide show webpages. Shown below is example html code for main.htm.
<html> <head> </head> <body> <iframe width="300" height="300" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" src="page1.htm"> </iframe> </body> </html>
Note the attributes of the <iframe> tag, which defines an iframe 300 pixels high by 300 pixels wide, with a border, and with no scrollbars. Note that the iframe's src attribute loads the first page of the slideshow into the iframe.
One advantage a JavaScript slide show has over a refresh meta tag slide show is that JavaScript can be designed to preload the images before the slide show begins, whereas a refresh meta tag can only call the images across the internet one image at a time as each webpage loads. If the user's Internet connection is slow, this could cause slides to be skipped. So don't make your slide show work too fast, allow time for the image to load.
One advantage a refresh meta tag slide show has over a JavaScript slide show is that a user can have JavaScript disabled in their browser. Of course a user can also have iframes disabled in their browser.
If You want to put a slide show on your webpage but you don't want to use JavaScript, use the method described in this example to create a slide show using only the html "refresh" meta tag - no JavaScript required.
More HTML Code:
• HTML5 Nav Element
• HTML title Tag
• HTML5 role Attribute
• How to Troubleshoot an HTML Table
• Use an Image as a Form Submit Button
• Easy Code to Add Yahoo Site Search to Your Website
• HTML Image Basics
• Nesting HTML Lists
• Image Map Basics
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections