Ready-to-Use HTML Templates

Let's look at two examples of graphically appealing ads created with simple HTML codes. You can use these codes exactly as printed in your own listings. Just copy the codecharacter for characterinto the Enter Your Own HTML tab in the Description box in the Sell Your Item page, and insert your own description in place of my generic sample text.

Second-Column Details

The first example, shown in Figure 22.5, is an all-text listing that uses a simple two-column, single-row table. The left column is designed to hold the ad's headline and the bulk of the descriptive copy; the thinner right column holds a bulleted list of item details and features.

Figure 22.5. A two-column listing, with bulleted copy in the subsidiary shaded column.

Here's the code you use to create that ad:

 <table border="0">   <tr>     <td width="70%">       <font face="Arial">       <center><h1>This Is The Headline</h1></center>       <p>       This is the <b>standard description</b> of the item       for sale. As you can see, this is formatted in       standard paragraph form, just lines and lines of       text, broken into <i>separate paragraphs</i>.       <p>       You can enter as much text as you want within this       single cell. Just remember to insert paragraph breaks.       <p>       This paragraph includes a hyperlink to another Web page.       Click on <a href="http://www.molehillgroup.com">this       link</a> to access that page.       <p>       This is yet another paragraph, containing even more       sentences describing the item for sale. See? I can go       on forever, just entering nonsense text like this. Can you?       <p>       This is yet another paragraph, containing even more       sentences describing the item for sale. See? I can go       on forever, just entering nonsense text like this. Can you?       <p>       This is yet another paragraph, containing even more       sentences describing the item for sale. See? I can go       on forever, just entering nonsense text like this. Can you?       </font>     </td>     <td bgcolor="#DDDDDD" width="30%">       <font face="Arial">       <h2>Here are some important features:</h2>       <p>       <ul>         <li>Feature one, something really important that         everyone should read </li>         <p>         <li>Feature two, something really important that         everyone should read</li>         <p>         <li>Feature three, something really important that         everyone should read</li>         <p>         <li>Feature four, something really important that         everyone should read</li>         <p>         <li>Feature five, something really important that         everyone should read</li>       </ul>       </font>     </td>   </tr> </table> </font> 

You can add a picture to this listing by inserting the appropriate <img> code in either the left or right cell of the table.

Big Picture, Colored Background

The next example is even easier than the first. You create another two-column, one-row table. This time, though, don't bother to set the column widths. This way, the columns size naturally, based on their contents.

The contents in this ad are pretty simple. The left column contains a picture of your item, and the right column contains a brief description (in large text). The table background is all blue, and you reverse the text out of the background by coloring the text white.

The whole thing is preceded by a large colored headline above the table. The completed ad looks like Figure 22.6.

Figure 22.6. Another table ad, with the picture on the left and the description on the right.

Here's the code you use to create that ad:

 <h1><center><font color="#FF0000">This Is The Headline <br> On Two Lines, In Color!</font></center></h1> <p> <center> <table bgcolor="#0000FF">     <tr>       <td>         <img src="/books/2/947/1/html/2/http://www.webserver.com/picture.jpg">       </td>       <td>          <center><h2><font color="#FFFFFF">Look at this item!          <p>          It's really cool!          <p>          You should buy it!          <p>          Send me all your money <i>now!</i></font></center></h2>       </td>    </tr> </table> </center> 

Obviously, you can add as much text as you want in the right-hand cellor additional pictures on the left.

Note

Use these examples as basic templates, and then add your own codes to see what results.