HTML for Absolute Beginners

Views 315 Likes Comments Comment
Like if this guide is helpful

This guide is intended to help eBayers with no knowledge of HTML learn to format their own listings. The topics covered will be:

  1. What HTML is, and why you should know it.
  2. Formatting text
  3. Links
  4. Images
  5. Tables
  6. Designing your listing

What is HTML?

HTML (it stands for "Hyper-Text Markup Language" - but you don't need to remember that!) is simply a set of instructions that tell your browser (Internet Explorer, AOL, Firefox etc.) how to display words and pictures. It isn't "computer programming" and if you get it wrong, all you'll get is a funny-looking web page. You can't blow up your computer, destroy eBay or close down the internet with HTML: in other words, it's nothing to be afraid of.

Why learn HTML?

Why bother learning something new when eBay provide you with listing templates and a listing designer? With just a little work, you can make your listings look completely different from everyone elses. Rather than the same border as your competition, you can have your own logos, your own colour scheme, and a layout that's designed specifically for the items you sell. You can have consistent branding across your auction listings, eBay Shop pages and email marketing: in fact, you can make your presence on eBay unique!

Words

In this section, we'll take a look at our first HTML tags and learn some very easy ways to control the appearance of text in your listings. "Tag", by the way, simply means one small piece of HTML code: <b> for example.

Bold, Italic and Underline

Let's take a look at our first HTML tags. Perhaps you want something to stand out in your listing: you could make the text bold or italic.
To make the text bold, all you do is type <b> at the beginning of the bold text, and </b> when you want the bold to stop. The pointy brackets are the ones on the second-to-bottom row of your keyboard, just to the right of "m".

<b>here is some bold text</b> will give you here is some bold text
Italics works in the same way: <i>here is some italic text</i> will give you here is some italic text

Notice how these tags come in pairs, an opening one and a closing one: remember to put in the closing tag, or the text will be changed for the rest of the listing! 

The tags for underlining are <u> and </u>. Though underlining can sometimes be useful, be careful where you use it. On the internet, underlined usually indicates a link: if you underline text that isn't a link, you can confuse your buyers.

Line breaks

We've all seen auctions where the text is in one huge block, with the item description, postage, payment methods and terms and conditions all running into each other in a big, illegible block. I can't be bothered to read them, and I'm sure most buyers would feel the same. Putting in line breaks is one of the simplest things you can do, but can make the biggest difference to how legible your auction is.

The tag for this is also very simple: <br> will give you one line break...

just like that! And if you want a gap between the two lines, all you need to do is put two <br> tags in...

 

like that!

Changing text size and colour

There are several ways to change the size and colour of your text. I will show you the easiest one here.

The <font> tag is a very versatile tag, which can change text's size, colour or both. To make text larger, use <font size="+2">make this text bigger</font>. The number after the "size" attribute tells the browser, 'make this text two sizes larger than normal'. If you want to, you can also make the text smaller: <font size="-2">here is some small text</font>.

In the same way, you can change the colour of your text: <font color="red">this text is in red</font> gives you red text! (Note the American spelling of 'color'.)

There are sixteen different colour names you can safely use with the font tag: aqua, black, blue, fuscia, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. And if none of those is quite right, you can even specify the exact mix of the red, green and blue primary colours with the hash sign followed by a six digit code like this: <font color="#ff00ff">this text will be bright pink</font>.

Links

In this section, we'll learn how to create clickable text that links to another web page: for example, to your eBay Shop front. Here's what a link tag looks like: <a href="URL">LINK TEXT</a>

"href" stands for "hypertext reference", which is a geeky way of saying the URL of the page you're linking to: e.g. href="http://www.ebay.co.uk"

The second element in the link is the text that you want to be clickable, which goes between the opening and closing tags: <a href="http://www.ebay.co.uk">eBay's front page</a> turns into eBay's front page

The text, of course, can be anything you like. The URL can be a link to your shop home page or perhaps better, to specific shop categories relevant to your listed item. If you're selling electronic goods, a link that says "buy the batteries to go with this item" and links directly to the relevant shop listing, might be just what your customer is looking for! Adding links to your listings is an easy way to guide buyers to go where you want them.

Images

In this section, we'll look at putting pictures into your listings, why eBay's picture hosting isn't necessarily the best solution for you, and how you can have multiple images on your auctions without paying the earth for them.

Why not just use eBay's picture hosting?

eBay's picture hosting offers you one free picture on every listing. While for some items, this can be enough, often it's not. Close-ups of jewellery, back views of clothing, the interior of a car: all of these can mean higher bids or quicker buy it nows. If you have a Gallery picture on your item, you can probably find a better way to use that feature than a shrunk-down version of the big picture. If you host your own pictures rather than leaving it to eBay, you can have as many pictures as you like for very little money, and perhaps for free!

In order to use pictures in your listings, you'll first need to get them from your computer onto the internet. If you don't already have free web space from your ISP, or some other web space that you're paying for, there are many services which will host your pictures for free: one of my favourites is Photobucket (www.photobucket.com). Sign up for an account with them and you can quickly and easily upload your pictures to their server, and from there you'll be able to use them on your eBay listings, or anywhere else you like.

Once you have the picture hosted somewhere, you can use it in a listing. The tag looks like this: <img src="FILENAME"> If you're using Photobucket, the filename is the name in the first box right underneath the picture itself. Here's an example:

<img src="http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif">

creates this picture:

Pictures can also be links

Pictures can also be made into links by wrapping the img tag in an a href tag, like this:

<a href="http://www.ebay.co.uk"><img border="0" src="http://pics.ebaystatic.com/aw/pics/uk/logos/logoEbay_150x70.gif"></a>

Note the attribute border="0" added to the img tag: if this is omitted when the image is a link, an ugly blue border will appear round the image!

Tables

In this section, we'll look at tables, and how they can be used to present information like postage rates or clothing size measurements, and also how tables can help with the layout of your auction. You've probably seen something that looks like this before:

This is a table. It has rows, going horizontally, and columns, going vertically. Tables are made up of cells: the individual boxes, and can have borders: the lines surrounding the cells. Tables can be used in many ways, but perhaps the most obvious is to present a series of data. Let's create a small table and see how it works.

Tables require a series of HTML tags to define the table itself, each row, and each cell. <table> and </table> tags begin and end the table. <tr> and </tr> begin and end each line (tr for table row), and <td> and </td> (td for table data) begin and end each cell within the row. Sounds complicated? It isn't really:

<table>
  <tr> <td> </td>  <td> </td> </tr>
  <tr> <td> </td>  <td> </td> </tr>
</table>
will make a table, with two rows, each row with two cells. Remember you'll need the same number of cells in each row. A table cell can contain whatever you want. To create the table pictured above, we just enter text in the cells:

<table border="1">
<tr><td>First Class</td> <td>£1.00</td></tr>
<tr><td>First Class Recorded</td> <td>£1.65</td></tr>
<tr><td>Special Delivery </td> <td>£4.50</td></tr>
</table>

Note the attribute border="1" on the <table> tag: this tells the browser to put in the thin lines surrounding each cell. If you miss this out, the lines won't be there; this can look prettier, but be more difficult to read, so think which will be more appropriate for where you're using it.

Another useful attribute of tables is the background colour of cells. Many people use a table with a single cell containing their whole auction listing to set the background colour for their entire listing. Colours are set with the same words or codes as we saw for the <font> tag.

So for example, this layout would produce a pale minty-green background to your auction:

<table> <tr><td bgcolor="#ccffcc">COPY YOUR WHOLE AUCTION LISTING INTO THIS TABLE CELL</td></tr> </table>

You can also specify images as backgrounds to table cells. Suppose you wanted a row of daisies at the top and bottom of your listing, with a matching coloured background for the words between. You'd need three rows: one lot of daisies, one auction description, some more daisies. Here's one layout you might use: <table>

<tr><td background="URL of your daisy pic" height="100"></td> </tr>
<tr><td bgcolor="#ffff66">DESCRIPTION GOES HERE</td></tr>
<tr><td background="URL of your daisy pic" height="100"></td> </tr>
</table>

The filename works in the same way as for images above, and needs to refer to a single instance of the picture you want to use. This will then be tiled over the whole of the cell background. With the daisy table above, we'd get:

Notice how I've specified the heights of the rows with the daisies in them. Because there's no text in these rows, the browser thinks there's nothing to display. By specifying the height of the row, we force it to show the background image.

More complex tables can also be used to lay out your entire auction. Suppose you wanted a thin column running down one side of your main listing, showcasing other items you're selling: you could achieve this with a one row, two cell table: one cell containing the main listing and the other containing the showcase pictures. Multiple rows and columns can be used to line up pictures with text, and to create exciting and unique layouts for your listings. 

In this section we've looked at how tables work, and how they can be used to lay out both data, and entire listings.

Designing your listing

In this section, we'll look at how you might begin to put all of the above together to create your own unique listing.


When I'm starting to design a new listing from scratch, I find it very helpful to sketch my ideas on paper. This gives me an overall idea of what I want to achieve, which I can then break down into the rel event bits of HTML coding.

Think about how the colour scheme of your auctions can enhance the sale:

  • If you already have a logo, consider using the same or complimentary colours in your listings to create a consistent brand image.
  • How will colours enhance the feel of the listing? Baby blue and pink will be great for selling clothes for newborns, but probably aren't so appropriate for selling leathers to bikers!

Make a list of all the different elements you want to include:

  • pictures: how many?
  • add-on items: do you need pictures and/or links to direct buyers to these?
  • terms and conditions: are these going on your auction, or on a separate page that you'll link to?
  • payment and postage details: these need to be well laid out or they'll just get ignored!

Consider which elements of your listing are the most important, and present those near the top.

  • If you're selling something where visual appearance is paramount, it makes sense to have the picture(s) at or near the beginning.
  • Collectibles need plenty of information about the condition as well as several good pictures.
  • For computer, electronics or automotive items, part numbers might be something you'd need to feature prominently.

And include plenty of empty space: nothing is more difficult to read than an auction listing where everything is crammed together in one big lump!

Finally, just because you *can* do something, doesn't mean you *should*. We saw earlier how difficult huge text is to read. As you get more proficient with HTML, it's tempting to show off a little: resist that temptation! A dozen different colours of text just looks messy: stick with one or two. And remember, buyers don't like surprises: nobody expects to have music suddenly blare out of an auction, or an animated wizard pop up out of nowhere, so don't put these annoying elements in your listings!

Conclusion

In this guide, we've looked at the basics of HTML, including text formatting, links, pictures and tables. We've seen that there are great things you can do with HTML, and some things that are not so advisable. This is only an introduction: there are numerous books and websites that will help you develop things further, so do have fun experimenting.

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