Wide's World

Making an HTML Banner

by

Widearea

Porno-Graphix

New Meaning to Rich Media

This week we will take our skills further and create an interactive ad unit using our graphic skills and some knowledge of HTML to make a banner that forces our surfers to interact, and in doing so we will increase our chances of giving them what they want and thus making a potential sale. With this simple technique we are targeting the surfer to his or her interest by offering a few choices for them to actively select right there in the banner or button. You have seen these around the web, and maybe you were even stoked by the fact that it took you where you wanted to go. Our example today will promote the VNWR site to illustrate the basic principle, but hopefully you will see how you can use this to your advantage in your own adult websites.

Interactivity is the key
1. Design the elements of your banner or button. Since the advertising unit is itself controlled by the HTML, your job is to determine the specifications of the unit - the size and how it may fit in with your website and so on. One cool thing about these ad units is in the fact that you can create multiple graphics and table them in the ad itself.
2. In ths week's example we will use a graphic image with some chicks (I mean why shouldn't we? This is an adult webmastering thing, right?). Also we will create a logo or reasonable facsimile, and a small tag line or call to action. This is only to illustrate that creating single elements and putting them all together is part of the fun and the power of the html banner.
3. Get creative... Here's what we came up with for the basic example:

That's the background image, you know, with the hot chicks. Then the branding element:

And finally we threw in some compelling copy to instruct the surfer to interact:

4. Finally we need to put the whole thing together in our HTML. Build a table you can cut and paste at the size required, etc. Below is the unit with a pulldown menu offering a few URL's that the surfer can jump to by selecting the topic and clicking the "Go!" button in the ad itself:

Newbie Board VNWR Resources Newbie Tutorials DFN Weekly

The actual HTML for the table created above is shown here. You can subsititute your own variables for the ones shown in blue, which make the selections actually go to the URL you specify:

This can be a useful way to advertise the many levels of content you offer on your site, and statistics show that an interactive ad can get more clickthru's than a standard, static or animated banner ad. We hope you enjoyed this week's excursion. Enjoy the concept of interactivity in your advertising, and come up with your own applications for this technique to make your adult webmastering more profitable. Thanks for stopping by Wide's World, and until next time, Happy Webmastering!

Reference/Useful Links

HTML Goodies - Nice resource for html tips and tricks
Active Jump - Good HTML tutorials.
Java-Scripts.Net - Resource for basic javascripts.