Chapter 9: Text Formatting

Okay, let's get the easy stuff out of the way. Here are the most basic HTML tags ("tags" are HTML commands) that you can use in your eBay auctions. After explaining all of these basic tags, I’ll show examples of these tags in use.

… 
These are paragraph tags. Use them to separate text into paragraphs.

… 
These are bold tags. Any text placed between them will appear in a bold font.

… 
Italics tags italicize a font.

Anything placed within the center tags is, you guessed it… centered.

This forces a line break to occur, but only breaks one line, unlike the paragraph tag which breaks two lines.

<img src="http://www.yoursite.com/yourimage.jpg" />
The image tag allows you to insert an image. The "src" attribute of the image tag is where you specify the location of the image. You cannot use an image on your local machine. You must first upload the image to a webserver.

… 
This tag allows you to change a font type, from the standard Times New Roman to Arial for example.

<table> … </table>
As a beginner, the table tag will be one of the more difficult tags to understand. However, it is one of the most important tags you will learn about. We'll talk more about the table tag later on in the next section.

You may have noticed that most of the HTML tags we've talked about have two parts. These are known as the opening tag () and closing tag (). Nearly every HTML tag has both an opening and closing tag. Though it is not always necessary to use the closing, you should get in the practice of doing so. This is because many tags require the use of a closing tag.

Some tags don't utilize a closing tag. For example:
<img />

Since the image tag is simply specifying the location of an image, there is no need to close it. Same goes with the line-break tag. It's simply saying, "put a line break here!" No need for a closing tag.

HTML standards say that the way to “close” these tags is by inserting the forward slash (/) at the end of it, as shown in the above examples. However, it is not a requirement. Therefore works the same as .

Examples:

Okay, now that we've talked about some of the tags you'll be using in your eBay auctions, let's take a look at exactly how we would use the HTML code.

First, the paragraph tag:

here's paragraph one.
here's paragraph two.

The output of the above code would look like this:

here's paragraph one.

here's paragraph two.

Next, the bold tag and italics tags:

this will appear bold, and this should appear italicized.

And the output:

this will appear bold, and this should appear italicized.

The center and line-break tags:

<center>centered text with a line break</center>

The output:

centered text
with a line break

Now let's take a look at the font tag. I think you'll like this one. The font tag allows you to specify that a particular font be used. You can also specify various attributes of the font, such as size and color. Take a look:

I'm a big blue Tahoma font!

You may have noticed that I put the opening tag, the text, and the closing tag on separate lines. I do that strictly to make it easier for me to read my own code. Browsers will completely ignore it. Here is how the output of the above example looks:

I'm a big blue Tahoma font!

It is not always necessary to use all the available attributes of a particular tag. For example, with the font tag you may choose to use only the face attribute, only the size attribute, only the color attribute, or any combination thereof.

If you choose to not use a particular attribute, a browser will either use a default, or use an attribute that was specified in an earlier tag that has not yet been closed.

The font tag's default face attribute is generally Times New Roman. The default color is usually black. And the default size is usually 3.

So if we were to only utilize a font tag's color attribute without specifying the face and size, then the face would automatically become Times New Roman and the size automatically becomes 3. For example:

I'm dark green for sure, but what else?

Your browser would fill in the missing attributes with the defaults, like so:

I'm dark green for sure, but what else?

One thing you need to be aware of when using the “face” attribute of the font tag: The font face that you specify will only be displayed if the person viewing it has that exact font installed on their computer.

Here's an example. I have a couple of interesting fonts installed on my computer called "Tigerteeth ICG" and "Zebrawood Regular". Here's what they look like:

I'd be willing to bet that you don't have either font installed on your computer. And if by chance you do have one, I'd bet even more that you don't have the other. If I were to try to use the font tag to display those fonts, here's what the code would look like:

This is Tigerteeth ICG 
This is Zebrawood Regular

This is Tigerteeth ICG
This is Zebrawood Regular

Since I have both the Tigerteeth ICG and Zebrawood fonts installed on my computer, everything looks the way it should. However, on your computer, you'd just see both lines in Times New Roman, or as the most recently defined font type (which in the case of this webpage, is Verdana).

Since most people probably don't have all of the crazy fonts on their computer as I do on mine, I try to stick with fonts that are very common. But what if I want you to see something in the Tigerteeth or Zebrawood font, and I absolutely refuse to settle for anything less?

The solution is actually quite simple. I would simply create an image of the fonts and used the image tag to display them.

Since you must use an image to display any fancy fonts you want to use, you should use this trick sparingly.

Okay, let's get back on track here.

You can use more than one tag at a time. Here's an example of how we can mix and match the HTML tags we've talked about:

Here's a red Tahoma font. 
This text has also been
bolded and italicized

And the output:

Here's a red Tahoma font.
This text has also been bolded and italicized

Did you notice the use of a font tag within another font tag? This is called embedding. Once you start mixing together different tags and embedding tags within each other, you'll find that having some way of sorting through it all is very important. The way you format your code will determine how easy it is for you to read and debug it when you run into errors.

In the next section, we’ll learn how to control the layout of the page by using the very important “table” tag.

Next: Controlling Page Layout

Subchapters:

Simple Text Formatting
Controlling Page Layout
Advanced HTML Techniques
Chapter 9 Summary & Takeaways

Jump to another chapter:

Chapter 1: Driving Traffic to Your Auction Listing
Chapter 2: Listing for Higher Profits
Chapter 3: Does Any of this Stuff Work?
Chapter 4: eBay Stores
Chapter 5: Auction Management
Chapter 6: Doing Market Research
Chapter 7: Finding Products to Sell on eBay
Chapter 8: Mining eBay's Traffic
Chapter 9: HTML Tutorial
Chapter 10: Acting Like a PowerSeller
Chapter 11: Final Words