Making a Living from Your eBay Business (2nd Edition)

Here's a secret known to successful sellers: eBay lets you use HTML to spruce up your item listings. While this isn't a task for the faint of heart, writing your own code lets you create highly individualized item listingsmuch fancier than you can do with a template-driven listing creator.

How HTML Works

HTML coding might sound difficult, but it's really pretty easy. HTML is really nothing more than a series of hidden codes that tell web browsers how to display different types of text and graphics. The codes are embedded in a document, so you can't see them; they're visible only to your web browser.

These codes are distinguished from normal text by the fact that they're enclosed within angle brackets. Each particular code turns on or off a particular attribute, such as boldface or italic text. Most codes are in sets of "on/off" pairs. You turn "on" the code before the text you want to affect and then turn "off" the code after the text.

For example, the code <h1> turns specified type into a level-one headline; the code </h1> turns off the headline type. The code <i> is used to italicize text; </i> turns off the italics. (As you can see, an "off" code is merely the "on" code with a slash before it.)

Entering HTML Codes

You enter HTML codes while you're creating your item listing. Just go to the Describe Your Item page, scroll down to the Description box, and click the HTML Mode option. When the box changes to the HTML editor view, as shown in Figure 22.3, enter your code in the box. You can switch back to normal text editing mode to view the results of your code.

While most users enter HTML code directly into the listing creation form, you can create your code in another application and then cut and paste it into the Description box. The only thing you have to remember is that the pasted code must be in plain-text formatyou can't paste a Word document into the box.

Note

If all you want to do is add some bold or color text to your listing, you don't have to learn HTML or use fancy listing-creation tools. eBay's standard text editor is available when you create your item listing with the Sell Your Item form. It lets you add HTML effects in a WYSIWYG environment, much the same way you add boldface and italics in your word processor. Just highlight the text you want to format and then click the appropriate formatting button. No manual coding necessary.

For example, I typically use Windows Notepad to create short amounts of HTML code. I'll actually save some boilerplate code in a Notepad file and then edit it for my individual ads. It's very easy to cut from Notepad and then paste into the Description box. And I can save the code I use in a Notepad file, so it can be reused in multiple auction listings.

Codes to Format Your Text

We'll start off with some of the most common HTML codesthose used to format your text. Table 22.1 shows some of these text-formatting codes you can use in your item description.

Just surround the text you want to format with the appropriate on and off codes, and you're ready to go. For example, to format a piece of text as bold, you'd write something that looks like this:

<b>this text is bold</b>

Codes for Font Type, Size, and Color

You can also use HTML to specify a particular font type or size, using the <font> code.

To specify a font type for selected text, use the <font> code with the face attribute, like this:

<font face="xxxx">text</font>

Replace the xxxx with the specific font, such as Arial or Times Romanin quotation marks.

Another common use of the <font> code is to specify type size. You use the size attribute, and the code looks like this:

<font size="xx">text</font>

Replace the xx with the size you want, from 6 to +6, with 6 being the smallest, +6 being the biggest, and 0 (or no size specified) being "normal" size type.

You can also use the <font> code to designate a specific text color. In this instance, you use the color attribute, like this:

<font color="#xxxxxx">text</font>

Replace the xxxxxx with the code for a specific color. Table 22.2 lists some basic color codes.

If you don't want to bother with learning hexadecimal color codes, you also have the option of simply entering the actual name of the color (still within quotation marks, of course). While this limits you to a handful of primary colors, it's easier than remembering all the detailed codes. For example, to rewrite our previous red text example, you use the following simplified code:

<font color="red">red text</font>

Note

By the way, the twenty colors listed in Table 22.2 are just a fraction of the available colors you can use in your auction listings. To view all available colors, consult one of the many web-based HTML color charts, such as the ones at www.immigration-usa.com/html_colors.html and www.html-color-codes.com.

Codes for Paragraphs, Line Breaks, and Rules

Some of the simplest HTML codes let you break your text into separate lines and paragraphsand add horizontal rules between paragraphs. These codes are inserted into your text just once; there are no matching ending codes.

Table 22.3 lists these "on-only" codes.

Codes for Graphics

Adding pictures to your item listings really brings some excitement to the normally plain-text world of eBay. While you can add pictures the eBay way (via the Sell Your Item page), you can also add pictures in the middle of your item description, using HTML.

Before you can insert a graphic into your listing, you need to know the address of that graphic (in the form of a web page URL). Then you use the following code:

<img src="URL">

No off code is required for inserted graphics. Note that the location is enclosed in quotation marksand that you have to insert the http:// part of the URL.

Note

eBay allows links to pages that provide additional information about the item listed, additional photos of the item, and your other eBay auctions. eBay prohibits links to pages that attempt to sell merchandise outside eBay. Link at your own risk.

Codes for Links

You can use HTML to add links to your own personal web pages (a great idea if you have additional images of this specific item) or to related sites. Many sellers also like to provide a direct email link in case potential bidders have questions they need answered.

To insert a link to another web page in your item listing, you use the following HTML code:

<a href="URL">this is the link</a>

The text between the on and off codes will appear onscreen as a typical underlined hyperlink; when users click that text, they'll be linked to the URL you specified in the code. Note that the URL is enclosed in quotation marks and that you have to include the http:// part of the address.

You can also create a mail-to link in your listing; users will be able to send email to you by simply clicking the link. Here's the code for a mail-to link:

<a href="mailto:yourname@domain.com">click here to email me</a>

Codes for Tables

Believe it or not, tables are key to creating some of the more interesting auction listing effects. You create a table and then format the cells within the table however you likeand put whatever you like within each cell. Used correctly, a table creates an invisible (or visible, if you like) grid that lets you align multiple text and graphic items within your listing.

You start by enclosing your table with <table> and </table> codes. Then you enclose each individual row in the table with <tr> and </tr> codes and each cell in each row with <td> and </td> codes.

A basic table with two rows and two columns (four cells total) is coded like this:

<table> <tr> <td>row 1 cell 1</td> <td>row 1 cell 2</td> </tr> <tr> <td>row 2 cell 1</td> <td>row 2 cell 2</td> </tr> </table>

Within any individual cell in your table, you can insert any type of itemplain text, formatted text, bulleted lists, background shading, and even graphics. Figure 22.4 shows what this simple table looks like (with borders separating the cellsas described next).

You can also use HTML to format both a table as a whole and the cells within the table, to some degree:

• To dictate the width of the table border, use the <table border="xx"> code, where xx is in pixels. (A border value of "1" is common.)

• To specify the border color, use the <table bordercolor="xxxxxx"> code, where xxxxxx is the color hex code.

• To shade the background of an individual cell, use the <td bgcolor="#xxxxxx"> code, where xxxxxx is the color hex code.

  Note

  I've shown just a handful of the huge number of HTML codes available to you. If you want to learn more about these and other HTML codes, I recommend that you go to the HTML Goodies (www.htmlgoodies.com/tutors/) website. You can also pick up a copy of Sams Teach Yourself HTML and CSS in 24 Hours, 7th Edition, by Dick Oliver and Michael Morrison (Sams, 2005), available wherever good books are sold; this book is a great primer for creating your own web pages with HTML. And Nicholas Case's Easy HTML for eBay (Que, 2004) offers a variety of eBay-specific code you can use in all your auction listings.

• To dictate the width of a cell, use the <td width="xx%"> code, where xx is a percentage of the total table width; for example, <td width="50%"> specifies a cell that is 50% of the total table width. You can also specify an exact width, in pixels, like this: <td width=xxx, where xxx is the number of pixels wide.