Using simple html to enhance your listings

Views 68 Likes Comments Comment
Like if this guide is helpful

A quick friendly guide to the basics of html


Ebay allows you to use simple html to "dress up" your listings. It is possible to use these commands to add simple tables, pictures, format  your text etc. html is simple enough to do, once you're introduced to  the basics, but most courses will assume that you're going to be building whole web sites, or at least whole pages. Within ebay listings you may only make minor changes to the layout, so if that's all you want to achieve, there's no real need to study the whole shooting match. However,  you might also be interested in adding a few pages to your own web site, blog  etc, so I'll include a few non-ebay fundamentals too. 

So, here is a quick, friendly guide to the absolute basics...

Lesson 1 - what is html and how does it work?.

html is HyperText Mark-up Language, which in English means it's a language used to mark other text to show how it should be displayed, in this case in browser windows.

html consists of a number of instructions that generally take the format of a pair of "tags" enclosed in chevrons, with a plain tag to start the format command, and a "slash" version to close it. Thus:

<blink> some text </blink> says display the text "some text" which is held between the tags using the fomatting/display command "blink".

Some tags only apply to a spot in the text, rather than enclosing a string of text to be formatted, so these do not need a closing tag and are single rather than pairs. Thus:

<br> says break the line and start a new one here.

A normal, very basic html page (a web page in other words) needs to tell the browser that 1. it is indeed an html page, it has a body of text, and not much else. It *can* get more complicated, but that will do the job for now.

Thus:

<html>
<body>
here is the entire contents of the page
</body>
</html>

When writing html code to be included in ebay listings you do not need to include these tag pairs because they will already be in place thanks to ebay's own coding. Anything you write to go in the description part of your listing, either via TL or web page will be included within those tags already (and many more!)

Creating html files:

html pages, files, documents, whatever you want to call them should be named with a "htm" or "html" suffix when filing them on your PC. This tells your computer (and all others) that this file is a web page in the same way that a suffix of doc tells the world it's a Word document. So where a word document about your shop might be called "shop.doc" a web page about it should be called "shop.htm".

The simplest way to create web pages (html files) is using a plain text editor, "notepad" is provided for free on your PC and will do the job perfectly well. If you haven't already found it, it's probably under accessories in your program list.

If you click on a ".htm" file, it will automatically be opened with your browser. Thus, if you wish to have a go at any of this stuff, you should write your files with a .htm suffix, but if you just click on them to make changes, you'll see them in your broswer instead of your editor. To make changes to the file you will need to "open with" a text editor, or run your text editor first and then open the file from within it. This latter is generally the simpler version. So write/change in notepad, view the changes in your browser.

First exercise: create a new html file with the name "shop.htm" and put the above content in (or use whatever text you like, but keep it absolutely simple and don't try to format anything yet).

Open and close the file in your text editor, make changes to the text itself, make sure you know how this bit of technology works. View the page in your browser and make sure you know where it is, what it's called, and that it looks how you expected.

You have learned the absolute basics and familiarised yourself with the tools you will use. You are ready for lesson 2...

Lesson 2 - Using headings.

An easy way to make text larger, bolder, one a line of its own, and generally make it stand out, is to define it as a heading. Headings start at type "1" for largest and as the numbers go up, the size goes down.

The format for heading tags is <h1>heading</h1>, <h2>smaller heading</h2> etc.

The browswer will see the "h" tag and know it needs to start a new line, the number will tell it how big to make the text, and the "/h" will tell it the heading has finished and it can throw another new line and carry on with the rest of the text.

Exercise 2: add some more text to your web page and make at least two headings of different sizes. You do not have to start at 1 if you think it's too big, you can just use <h3>modest heading</h3> if you prefer how it looks.

Lesson 3 - Formatting text.

One of the main things people like to change on their listings are aspects of the font used, making text a different style, colour or size. This is done using the <font></font> tag pair, enclosing the text inside the tags which will affect the way the text is displayed.

The most useful values that can be set for the font are the style, colour and size. These values are set in the opening tag and stay applied until the tag is closed.

These values are set using:
face=styleofchoice such as face=verdana
color=preferredcolor such as color=green
size=prefferredsize such as size=1

Note the spelling of color!

Colours can be set to a more varied range by using numerical values, but we'll get to those later, for now, just while testing, let's stick with red, green, blue, black etc.

If you want to set more than one value, they can go in the same tag. Thus:

<font face=verdana color=black size=3>

Experiment with different colours and sizes to see what the results are!

If you want to apply one value to a whole sentence, but a second to only part of it, you can "nest" tags. Nesting is where you open a tag, then open another, then close and close. Thus:

<font face=verdana>This book is really <font color=red>great!</font></font>

Any set of tags (font or other sorts) can be nested, but should not be "over-lapped".

So:

<h1>This book is <font color=red>great!</font></h1> is fine but:

<h1>This book is <font color=red>great!</h1></font> is wrong.

Most browsers will still display the text above in the way you want, but when things get more complicated they can start going wrong, so get into good habits when you start. Nesting good, over-lapping bad.

Lesson 4 - lists, bold and other font widgets.

There are several changes you can make to your text that do not involve the <font> tag. Here is a small sample of useful tags:

<i> italic text </i>
<b> bold text </b>
<strong> strong text </strong> (same as bold!)
<blink> blinking text </blink> Note: nearly everybody hates this so I don't recommend it, but it's your choice!
Oh, and I think <u></u> will give you underline as I recall, but I never, ever use it as underlining on web pages makes no sense to me... it looks like a link but doesn't work like one, which will confuse and annoy your readers. But still your choice!

You can also put things into lists. Numbered or unnumbered - the latter uses bullets instead of numbers.

The tag pair for number is <ol></ol> and for unnumbered is <ul></ul>

Within the pair, you itemise the list elements by starting each one with a <li> tag - no closing tag required.

So:

<ol>
<li>item number 1
<li>item number 2
<li>item number 3
</ol>

or

<ul>
<li>first bullet point
<li>second bullet point
<li>third bullet point
</ul>

If you add those to your test page, you'll be looking pretty fancy-dancy in no time!

Lesson 5 - Creating links.

Putting links and pictures in your listings is one of the first things most ebayers learn to do when starting to look at writing their own html, so you probably know all this anyway... but for completeness we'll include them, and you might pick up an additional wrinkle you weren't aware of!

Links are defined using the "href" tag. So a simple link to take your readers to another website might just say:

<a href="http://www.bykimbo.com>go here</a>

The href part describes where the destination page is. By including "http://" we're giving the full website address, so we could be leaving the current site and going elsewhere, or just being very specific about where abouts in the current site we want to go. Because some websites - and ebay's a good example - are huge and have very complicated structures, addresses can get long and complicated to. So to go to the "add to favourites" location, for example, I end up with "<a href="http://my.ebay.co.uk/ws/eBayISAPI.dll?AcceptSavedSeller&amp;mode=0&amp;pre\ ference=0&amp;sellerid=bykimbo &amp;ru=http%3A%2F%2Fcgi.ebay.co.uk%2Fws%2FeBayISAPI.dll%3FViewItem%26item%3D831\ 0842868&amp;ssPageName=STRK:MEFS:ADDVI">" on my listings. The easiest way to get these links is to go to the place you want as destination and copy the address from the address bar at the top of your browser window. Copy the address box content and paste into your href tag in quotes. Hey presto! Link! Remember to put some appropriate text inside the tag pair to tell the reader where they're being sent.

Inside your own website you don't always need to use the full http address. Using the http part means your link has an "absolute address" - no matter where you put that link, with that full address it will always go to the same place. You can also have a "relative address". This means that the address given for the link is relative to where you are now. So if you have a page/file on your website called "shop.htm" and another called "aboutme.htm" each sitting in your web site directory, you can get to one from the other by simply using the file name. So: 

<a href="shop.htm">go shopping!</a>
<a href="aboutme.htm">learn about me</a>

If you put those in a list that we learned about earlier, you have a menu!

<ul>
<li><a href="shop.htm">go shopping!</a>
<li><a href="aboutme.htm">learn about me</a>
</ul>

You'll notice, by the way, that I always lay out my html with line breaks and spaces to make it easier to read and maintain. ebay doesn't tend to do this for you, so code created in TL, for example, is going to be much harder to read, and the above example written by them might look like:

<ul><li><a href="shop.htm">go shopping!</a><li><a href="aboutme.htm">learn about me</a></ul>

If you find yourself wanting to change some code written like that, the first thing to do is put in some line breaks so you can see what's happening!

What else can we do with links?

Sometimes a plain link that just moves the customer to another page is exactly what you want. But when you're putting code into an ebay listing you quite often don't actually want your buyer to *leave* your listing, just open another window in their browser and see both the old and new pages. You can do this by use of the target value. If you write your link as:

<a href="http://www.bykimbo.com" target="_blank">

that underscore blank will tell the browswer to start a fresh window/session for the new page, and leave the current one untouched.

Lesson 6 - Using images.

Adding images to your web page...

The basic image tag is <img> (no end tag, it's a declaration that here is an image, not a begin doing something, do it for a while, stop doing something type of instruction).

The absolute minimum you need to tell an img tag is, unsurprisingly, where the image is. This might be in a sub-folder of your own website, or might be on a picture service site such as photobucket. As with links, you can use relative addresses for the former, and must use absolute addresses for the latter, thus:

<img src="images/picture.jpg">

or

<img src="http://www.bykimbo.com/images/picture.jpg">

There are a number of useful values you can add to the image tag to
define how it looks.

The obvious ones are
border
height
width
alt
title

If you want a border to appear around your image, set the border size in pixels - if not, set it to zero.

<img src="images/picture.jpg" border=0>

If you want to define the size of the picture, give the height and width. If you *don't* do this, then as your page loads the text will "dance about" while the broswer works out how much space everything needs. By giving the size information for every picture, you tell the browswer immediately what the space requirements are, and your readers can start reading a static page while the pictures fill-in - it looks much more professional!

<img src="images/picture.jpg" height=200 width=400>

If you want to display your picture at other than it's real size, you can adjust those measurements -- but remember that only changes the display size, not the physical size of the displayed contents so you're not saving loading speed or bandwidth, just compressing the pic into a smaller area of screen and probably degrading the quality in the process. If you do choose to do this (and there are good reasons why you might) you need to keep the height and width in proportion, or the image will be distorted. If you don't want that to happen, a simple compromise is to only define *one* of the dimensions - the other will be adjusted to match, which is pretty neat. So if I wanted to display the above image at half-size, and wasn't up to dividing both numbers by two, I only need to say:

<img src="images/picture.jpg" width=200>

and the rest will be done for me.

alt and title

Different broswers use alt and title in slightly different ways, so we'll simplfy and say that for our purposes they're text descriptions of what the picture is, or what it does (if it's a link, you might like to say where it's going, for example) and they will be shown when your reader hovers over the image, or if the image fails to load for some reason. So for our purposes we can say they should be set to the same value.

<img src="images/picture.jpg" alt="glass vase" title="glass vase">

A lot of people only use alt, and skip the title. I think that's slack (which doesn't mean I don't do it all the time!) so I'm telling you the pukka version, then you can't blame me. :o)

Two common ways of using images, beyond the merely decorative, are to use an image to provide a link, and to use a small image to provide a link to a larger version -- particularly popular on ebay where screen space is limited and large versions of pictures are popular with buyers who want to see detail.

We've done links (href) and images (img) now, so we can combine the two very easily.

<a href="aboutme.htm"><img src="images/mugshot.jpg" alt="read about me" title="read about me" height=200 width=200></a>

As you see, the alt and title values have been used to give the text that would otherwise have appeared as the link text if we weren't using a picture instead. This aids navigation for all, but is particularly important if you want the visually impaired to be able to get around your site - for those using voice recognition software, their browsers will read the text and they'll be able to know what's happening.

If you're using the "click on little picture to see big picture" technique popular on listings, you'll need to set your link something like this:

<a href="images/bigpic.jpg"><img src="smallpic.jpg"></a>

I've stripped out the additional info' there so you can see the essentials - the smaller picture effectively makes up the "link text", while the link itself is also to an image (or could be to a page with the larger image on it). Remember that here the href image is being used as a link address, not an image per se, so you don't set image values for it, you set link values such as target. The smaller image *is* being shown as a pic, so that needs the usual picture values. So the real, expanded version of the above might read:

<a href="images/bigpic.jpg" target="_blank"><img src="smallpic.jpg" width=200 alt="click to see full size glass vase in separate window"></a>

Lesson 7 - Building tables.

A table is a handy way of controlling where on the screen yourinformation appears. It allows you to put pictures up next to text, for example. Tables can get very complicated, but we're just interested in the basics here, so here goes...

The table is definded by the <table></table> tag pair. Within that pair you need to describe where rows and cells begin and end. Rows are defined by <tr></tr> and cells by <td></td>

Thus a simple two-by-two table would be:

<table>
<tr>
<td>row one cell one</td>
<td>row one cell two</td>
</tr>

<tr>
<td>row two cell one</td>
<td>row two cell two</td>
</tr>
</table>

You'll notice I've spread my table definition down the page with a line per cell and gaps between rows. This makes reading your hmtl code much easier. It might seem sensible to layout your code to match the table layout... but once you get a load of text and pictures in there believe me it becomes much easier my way!

If you want your table to have lines, use the "border" value. If you don't, still use border but set it to zero!

<table border=o>

Be aware that tables have a tendency to mess up your font formatting. This is a boring truth and there's no simple solution. My recommendation is to build your table first, then take a look at the results. If you find your font inside the table no longer matches that outside, you've no choice but to reapply it within the table. Sorry about that, blame the html standards guys!

That's the very simplest of table usage... but probably enough for the purposes of laying out your ebay listings.

If at the end of all that you're still thinking "yes, but how do I put it in my listing?" the answer is simple: copy from your notepad (or other text editor) the relevant text and paste it into your listing description - and remember to use "html view" not description builder!

I hope you've found this hmtl "quick and dirty" guide useful. God bless her and all who sail in her. :o)

Kimbo xx

Have something to share, create your own guide... Write a guide
Explore more guides