Creating an eBay Item Listing in HTMLCreating an item listing for eBay using HTML and CSS is surprisingly similar to creating any other web page. In fact, it's a good idea to first create the listing as a normal web page, and then incorporate it into the eBay item description when you list the item for auction.
Listing 20.1 contains the code for an eBay item skeleton web page that you can use to create and test item pages for eBay. Listing 20.1. The HTML Code for an eBay Item Skeleton Web Page<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><title></title></head> <body> <!-- EBAY HTML CODE STARTS HERE --> <!-- EBAY HTML CODE ENDS HERE --> </body> </html> As you can see, this code is extremely minimal, consisting only of a couple of comments in the body of the page that are used to help call out where the eBay item code goes. When you develop a page using this template, be sure never to place any code outside of these comments because you won't be allowed to do so in the actual eBay listing page. This is a good way to simulate the limitations of an actual eBay listing. Listing 20.2 contains the code for a web page that contains a suitable item description for a pair of ice hockey skates that I listed for sale on eBay. Listing 20.2. A Very Basic Example of Using HTML and CSS to Describe an eBay Item<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><title></title></head> <body> <!-- EBAY HTML CODE STARTS HERE --> <h2 style="text-align:center">Mission Amp Fly Men's Ice Hockey Skates - Size 12 </h2> <div> This size 12 pair of Mission Amp Fly men's ice hockey skates is used but in very good condition. These suckers have plenty of life in them, not to mention a few goals and assists. Following are the details of the skate features, along with a picture. Thanks for bidding! <ul> <li>Carbon outsole stiffer, lighter and thinner</li> <li>Split Throat™ pattern design for improved flexibility and minimized creasing</li> <li>Indy Foam® ankle chambers with multiple foam layers provide superior ankle lock and increased comfort</li> <li>Interior Material - Clarino™ moisture wicking lining</li> <li>Sensory™ footbed</li> <li>Stiffness Rating - 7.3 Surlin™</li> <li>Leather quarters</li> <li>Improved Formula™ Bladeholder with DriveShaft technology. Single allen key bolt system</li> <li>Laser-cut stainless steel runner from Sweden, with superior grain</li> </ul> </div> <div style="text-align:center"> <img src="http://www.michaelmorrison.com/ebay/skates1.jpg" alt="Mission Amp Fly Ice Hockey Skates" style="border:5px solid black" /><br /> <div style="text-align:center; font-size:16pt; font-weight:bold">Side view of skates, some scuffs but overall good shape.</div> </div> <!-- EBAY HTML CODE ENDS HERE --> </body> </html> This code uses HTML and CSS to improve on the plain-text version of the same item that was shown in Figure 20.2. Figure 20.3 shows the item description in Listing 20.2 as it appears in an actual eBay listing page. Figure 20.3. HTML and CSS are used to improve the layout and appearance of the eBay item listing.
Admittedly, this is a fairly tame example of using HTML and CSS to jazz up the look of an eBay auction. Don't worry, upcoming sections build on this code to make the item listing considerably more compelling to potential buyers. Figure 20.4 shows the hockey skates eBay listing as it appears in my list of eBay items for sale. Figure 20.4. The hockey skates eBay item listing appearance in my list of items for sale.Figure 20.4 reveals how any HTML and CSS code that you inject into an eBay listing has no visible effect on anything but the item description. In other words, a potential buyer has to click the item and view its detailed listing in order to see your code. This means that it's still very important to do a good job of coming up with a catchy and accurate item description, as well as using pertinent eBay listing features such as a gallery image or bold title.
|