Rapid HTML Primer

For many sellers, the introduction to HTML comes in the disappointment of seeing a carefully formatted description seemingly mutilated by eBay. For example, this text:

Antique steam shovel toy:
     real working treads
     working shovel, turn crank to raise
     glossy red lacquer
in immaculate condition!

will look like this when viewed on an eBay auction page:

Antique steam shovel toy: real working treads working shovel, turn crank to raise glossy red lacquer in immaculate condition!

The fault lies not with eBay, but with the way web browsers interpret plain text. All spacing, alignment, and line breaks are effectively ignored in favor of the HTML code that is the basis of formatting in all web pages.

HyperText Markup Language (HTML) consists of plain text interspersed with markup tags. A tag is a special formatting keyword enclosed in pointy brackets (also known as carets and greater-than and less-than symbols). For instance, simply place the <br> tag in your text to insert a line break, or <p> to insert a paragraph break. For example:

real working treads<br>working shovel, turn crank to raise<br>glossy red lacquer

Tags that modify text actually require two parts: a tag to turn the formatting on and another to turn it off. For example, the <center> tag, used to center-justify text and images, requires a corresponding </center> tag later on to restore the default left justification. Other tags that work like this include <b>bold</b>, <i>italics</i>, and the <table></table> structure, all described in the next sections.

HTML Quick Reference

^[2] For a complete listing of all HTML tags, consult an HTML reference such as www.w3.org or HTML & XHTML: The Definitive Guide (O'Reilly).

Table 4-2. HTML tags that affect spacing and alignment

So using some of these tags, we can fully reproduce the steam shovel description as intended:

Better yet, let's use bullets:

Note that the individual tags don't have to be on separate lines, but it would sure make the code easier to read. shows the commonly used HTML tags that affect the appearance of text.

Table 4-3. HTML tags that affect fonts and appearance

Tags can be combined to achieve just about any effect. Take care when nesting HTML tags, however, so that structures do not improperly overlap. For example, this is wrong:

The <i>coldest <b>winter</i></b> I ever spent

But this is correct:

was <i>a summer in <b>San Francisco</b></i>

Essentially, tags that are opened first should be closed last.

TIP

If you want to test your HTML code before placing it into your auction, simply type it into a plain text editor. Save the file with the .html filename extension and open it in your favorite web browser. Reload/refresh to see changes as they're made.

Images and Links

An image of any size, from a tiny icon to a full-size photo of what you're selling, can be inserted anywhere in your text using the <img> tag, like this:

<img src="http://pics.ebay.com/aw/pics/navbar/ebay_logo_home.gif">

In this case, the image URL points to a GIF file on eBay's pics.ebay.com server that happens to be the eBay logo itself. See [Hack #59] for information on placing your photos on the Web and referencing them from your auctions.

By default, the image will appear inline with the text, which typically doesn't look very professional. Instead, you can left-justify or right-justify the image and the text will wrap around it:

<img src="http://pics.ebay.com/aw/pics/navbar/ebay_logo_home.gif" 
align=right hspace=4 vpsace=7 border=1>

Also shown in this example are the hspace and vspace parameters, which specify invisible horizontal and vertical margins in pixels, and the border parameter, which places a black line around the image with the thickness also specified in pixels.

Hyperlinks are created by placing the <a> (anchor) structure around ordinary text, like this:

<a href="http://www.ebayhacks.com/">click here</a>

WARNING

Always test each and every one of your links before placing them into your auction descriptions. The last thing you want is 20 confused bidders emailing you because you mistyped a URL in one of your links.

Of course, you don't want your bidders to click a link and leave your auction, never to return. To have the link open in a new window, leaving your auction description window intact, include the target="_blank" parameter:

<a href="http://www.ebayhacks.com/" target="_blank">click here</a>

Note that the <img> and <a> tags can be combined to make clickable images; see [Hack #60] for details.

Tables

Tables are easy to create and are a great way to organize information in your auction descriptions. A table is defined with a single <table></table> structure with one or more <tr></tr> and <td></td> structures contained therein. For instance, this code defines a simple table with two rows and two columns:

<table width=90% border=1>
  <tr>
    <td>Color:</td>
    <td>red lacquer with chrome trim</td>
  </tr>
  <tr>
    <td>Dimensions:</td>
    <td>3 inches high, 4 inches long</td>
  </tr>
</table>

Each <tr></tr> structure defines a row in the table, and each <td></td> structure defines a single table cell inside that row. Once a row is complete, another row begins. The resulting table looks like this:

Note that text and images should never be placed outside the <td> tags. Use indents, like in the example above, to make the code more readable and to help you keep track of your rows and columns.

Using nested tables, you can create a nice-looking box to highlight important information:

<table border=0 cellspacing=0 cellpadding=0 width=40% bgcolor=#000000>
  <tr><td>
    <table width=100% border=0 cellspacing=1 cellpadding=3>
      <tr><td bgcolor=#CCCCCC align=center>
        <b>Condition of this item</b>
      </td></tr>
      <tr><td bgcolor=#FFFFFF>
        Brand new in the original box with all original paperwork.
        <br>Batteries are not included.
      </td></tr>
    </table>
  </td></tr>
</table>

which should look something like this:

The bgcolor parameter in the <td> tag sets the background color; the six-digit code is explained in [Hack #41].

Tables are also often used to make simple bars and stripes. For example, to include section headers that match those on eBay auction pages, use this code:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td bgcolor="#9999CC">
  <img src="http://pics.ebay.com/aw/pics/x.gif" width=1 height=1>
</td></tr>
<tr><td bgcolor="#EEEEF8" nowrap>
  <img src="http://pics.ebay.com/aw/pics/x.gif" width=6 height=1>
  <font face="Arial" size="3"><b>
    Your Title Goes Here . . . 
  </b></font>
</td></tr>
</table>

Table cells with background colors set with the aforementioned bgcolor parameter can be fine-tuned with transparent, single-pixel images (like x.gif here) used as spacers.

Using a WYSIWYG Editor