How to Create an HTML Banner Ad

Sample HTML Banner Ad

HTML banner ads are a simple and effective way of promoting yourself or your business on the Web. Banner ads allow you to link back and forth in "banner exchange" programs, market yourself on Yahoo! or other search engines, display your image on marketplace websites and do many other things. You can create a text banner using just basic HTML or you can go further and use a graphics program to add images and styling to your banner ad.

Step 1

Open a file in your HTML text editor and insert a table.

Step 2

Set the width of your table and specify the table's "border," "cellpadding" and "border color" to style the banner ad. For example: <table width="275" border="3" cellpadding="3" bordercolor="#0000FF">

Step 3

Center your ad's text, if desired. For example: <td><div align="center">Your HTML Banner Ad Text</div></td>

Step 4

Encompass the table's code with link tags so your banner directs visitors to your website. For example: <a href="http://www.ehow.com"><table width="275" border="1" cellpadding="3" bordercolor="#0000FF"><tr><td><div align="center">Your HTML Banner Ad</div></td></tr></table></a>

Step 5

Name and save your file with the ".html" extension.

Step 6

Open your graphics program and create an image for your banner ad. You can create a single image or design the whole ad.

Step 7

Save your file as a JPG or GIF.

Step 8

Open a file in your HTML text editor and insert a table.

Step 9

Set the width and height of your banner ad. Make sure these settings can accommodate the dimensions of your image.

Step 10

Specify the table's attributes, such as "border" and "cellpadding," if necessary. If you design a complete banner ad in your graphics program, you can bypass this step.

Step 11

Encompass the table's code with link tags so your banner ad directs visitors to your website. For example: <a href="http://www.ehow.com"><table width="275" height="250" border="0" cellpadding="0" bordercolor="#ffffff" background="test.jpg"><tr><td> </td></tr></table></a>

Step 12

Name and save your file with the ".html" extension.

Things You'll Need

  • HTML text editor, such as BBEdit

  • Graphics program, such as Fireworks (optional)

Tip

If you want to use your banner on a specific site, be sure to follow the dimension and file size guidelines. To share your banner, provide the HTML code of your banner ad.

references & resources