How to create banner ads that use the IFRAME tag using FrontPage

View products that this article applies to.

Summary

The IFRAME tag is defined in the Hypertext Markup Language (HTML) 4.0 specification by the World Wide Web Consortium. This tag allows Web authors to insert a frame in the middle of a Web page. This article explains how to use this tag to create alternative "banner advertisements" that work with Microsoft Internet Explorer. Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements. The following steps demonstrate how to create a series of Web pages to create banner advertisements.

Example Pages

Important Note

For each example page, create a new page in FrontPage and then switch to HTML view to insert the HTML and cascading style sheet (CSS) code described in each step.

First, create the parent Web page that contains the IFRAME that loads the advertisements, and also create the style sheet that all the ad pages share.

Save the following HTML code as "IFrameBannerAds.htm":

<html>
<head>
<title>IFrame Banner Ads</title>
<style>
body { font-family: Arial, Helvetica; background-color:rgb(0,0,0); 
color:rgb(255,255,255) }
</style>
</head>
<body>
<iframe src="ad_1.htm" width="400" height="100" align="center" 
frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
Your browser does not support the IFRAME tag.
</iframe>
<h1 align="center">Welcome to My Web Site!</h1>
</body>
</html>

Save the following CSS code as "ad_style.css":

a:link { color: rgb(0,102,153); }
a:visited { color: rgb(0,153,102); } 
a:active { color: rgb(0,102,102); }
body { font-family: Arial, Helvetica; background-color: rgb(204,204,153); 
color: rgb(0,51,51); }

Next, create the individual advertisement pages. (This example uses just three pages.) Each advertisement page uses the style sheet from step 1, and uses "client pull" to load the next page in the series. In addition, the advertisement pages use random, Dynamic HTML (DHTML) transition effects when they change to another page.

Save the following HTML code as "ad_1.htm":

<html>
<head>
<title>This is Advertisement 1</title>
<link rel="stylesheet" type="text/css" href="ad_style.css">
<meta http-equiv="refresh" content="5;URL=ad_2.htm">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">
</head>
<body>
<p align="center"><a target="_blank" href="http://www.microsoft.com">
<img border="0" src="http://www.microsoft.com/library/toolbar/images/mslogo.gif"><br>
Click here to visit Microsoft's web site!</a></p>
</body>
</html>

Save the following HTML code as "ad_2.htm":

<html>
<head>
<title>This is Advertisement 2</title>
<link rel="stylesheet" type="text/css" href="ad_style.css">
<meta http-equiv="refresh" content="5;URL=ad_3.htm">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">
</head>
<body>
<p align="center"><a target="_blank" href="http://msdn.microsoft.com">
<img border="0" src="http://msdn.microsoft.com/msdn-online/shared/graphics/banners/home-banner.gif"><br>
Click here to visit the MSDN web site!</a></p>
</body>
</html>

Save the following HTML code as "ad_3.htm":

<html>
<head>
<title>This is Advertisement 3</title>
<link rel="stylesheet" type="text/css" href="ad_style.css">
<meta http-equiv="refresh" content="5;URL=ad_1.htm">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">
</head>
<body>
<p align="center"><a target="_blank" href="http://www.msn.com">
<img border="0" src="http://msimg.com/w/logo_bf2.gif"><br>
Click here to visit the MSN web site!</a></p>
</body>
</html>

When you browse the "IFrameBannerAds.htm" page with Internet Explorer, you see the IFRAME tag populated with the first advertisement page, followed shortly by each additional advertisement in the series.

↑ Back to the top