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.)
Effect | On Code | Off Code |
---|---|---|
Bold | <b> | </b> |
Italic | <i> | </i> |
Underline | <u> | </u> |
Center | <center> | </center> |
First-level headline | <h1> | </h1> |
Second-level headline | <h2> | </h2> |
Third-level headline | <h3> | </h3> |
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>
Color | Code |
---|---|
White | FFFFFF |
Red | FF0000 |
Lime Green | 00FF00 |
Green | 008000 |
Blue | 0000FF |
Fuchsia | FF00FF |
Teal | 00FFFF |
Yellow | FFFF00 |
Black | 000000 |
Silver | C0C0C0 |
Light gray | D3D3D3 |
Action | Code |
---|---|
Line break | <br> |
New paragraph | <p> |
Horizontal rule (line) | <hr> |
Codes for Graphics
Adding pictures and other graphics to your listings really brings some excitement to the normally plain-text world of eBay. You can add pictures the eBay way, which puts all your pictures at the end of your text description or you can put a picture anywhere in your text, 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.
As an example, if your graphic is the file graphic01.jpg located at www.webserver.com/mydirectory/, you insert this code:
<img src="https://www.webserver.com/mydirectory/graphic01.jpg">
The nice thing about inserting graphics this way is that you can include more than just picturesyou can add logos, starbursts, you name it. (And you can put the graphics anywhere in your text description.) You use the same technique to link to any graphic image anywhere in your item listing.
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 Lists
Finally, if you have a lot of features to list for your item, you might want to format them in a bulleted list. Using HTML codes, it’s easy to create a neatly bulleted list for your ad.
First, you enclose your bulleted list with the <ul> and </ul> codes. Then, you enclose each bulleted item with the <li> and </li> codes.
The code for a typical bulleted list looks like this:
<ul> <li>item one</li> <li>item two</li> <li>item three</li> </ul>
When you're dealing with complex coding like this, it's easier to understand what's going on if you indent the different levels of code.
Bulleted lists are great ways to run through a list of attributes or specifications; it’s a lot cleaner than just listing a bunch of stuff within a long text paragraph.