HTML 101 for Merchants (part 1)

August 28, 2006 12:00 am

HTML 101 for Merchants (part 1)


HTML 101 for Merchants

Note: This started out as just an explanation of how to use HTML inside your product pages, but has turned into a beginner's guide to HTML, in which you will learn the basics of this programming language. Relax! it's very easy to understand! You'll be coding your way to great product descriptions in no time. :-)

~ * ~ * ~ * ~ * ~ * ~ * ~

In the beginning...

Most people probably already know this, but let's start with the incredibly obvious: What is HTML?

HTML is an acronym for HyperText Markup Language. It is the language used to create most of the pages you see on the Web. It uses text and a defined set of commands (known as tags) which either determines the text behaviour (bold, italic, etc.) or act as commands to insert a link or a picture, among other things.

Now, before we start learning about HTML and how to use it well inside product pages, you should always remember that you're not writing the product description for yourself, you're writing it so other people visiting the page will want to buy your product, so keep in mind that:
  1. Not everyone has as big a screen setting as you do
  2. Not everyone has the same browser as you've got
  3. Not everyone is using the same color scheme as you are
  4. Not everyone has a high speed connection! ;-)
Basically, this means that "what looks good on your screen might not look good on someone else's".

~ * ~ * ~ * ~ * ~ * ~ * ~

Anatomy of a webpage.

Since we're going to be using this word a lot, it might be useful to explain that "tags" are arguments which you will see between brackets ("<" and ">") all over your HTML page. Tags usually come in pairs. This means that for everything you want to do with the text, you must open a tag and eventually close it right back. The rest of the page is... just plain text!

If you take a peek inside an HTML page (you can even look at this one, just select "view source" from one of your browser's menus - it's location can vary from browser to browser) ...ok, so if you take a peek inside an HTML page, the very first tag you'll see inside is called "HTML". This tag informs the browser that HTML is what the text is formatted in and also serves as a marker telling the browser "hey, the page starts here!". Remember what we said about tags earlier? They come in pairs, an opening tag and a closing one. Can you guess what you will find if you scroll all the way to the bottom of the page (the page's source, that is!)? That's right, at the end of the HTML code, the very last thing you will see is a closing HTML tag.

In between the two HTML tags, you'll find both sections of the page: its head and its body. They both have their own tags (called HEAD and BODY) between which is stored the relevant information. The HEAD section is where you specify information such as the page's TITLE (that's another tag you'll see up there). And inside the BODY section, I'm sure you can guess, is where the actual contents (what will be seen by your visitors) is written.

Let's make this very easy to understand. Imagine a story book: it's got a cover, then the first page which probably holds the book's title, with the author's name and year of publication and then you've got the story, all the way to the words "The End" and the book's back cover. A webpage is pretty much like a story book: it's got a cover (the HTML tag) and then a place that holds the title and perhaps the author's name as well (the HEAD, which includes the TITLE) and then it's got the story that surfers will read (the BODY) all the way to "The End" (a closing BODY tag) and of course you need a back cover, to tell the browser the page stops here (a closing HTML tag).

Consider this for a second... You wouldn't dream of having a second book cover and an entire new story right in the middle of Cinderella's ball or Alice's visit with the White Rabbit, would you? Well, just the same, there can't be more than one HEAD or BODY tag inside your page.

These tags: HTML, HEAD, TITLE and BODY, cannot be repeated inside the page! They have their precise function and location. All your files should be constructed in this exact manner. If you define any of them more than once, or out of sequence, there's no telling exactly how your browser will interpret the code. The only thing we know for sure is that your browser's going to be very confused. And when a browser is confused, more often than not, it will refuse to display the page properly - it may even refuse to display the page completely! So be careful and write your story... huh, your webpage correctly. :-)

~ * ~ * ~ * ~ * ~ * ~ * ~

Tag, you're it!

Ok... we've learned that an HTML page has sections. But... You know what? You won't be using sections in your product descriptions. No!!! ...wait just a second before you start throwing rotten tomatoes at the screen!! ;-) We mentioned that a webpage is like a story, remember? Well, you'll understand why it was necessary to explain this in just a little while. For the moment, let's just keep the suspense alive a little.

Before we learn about tags we're actually going to be using in our product descriptions, we need to know a few things about tags...

We've said this a few times before already: HTML tags usually come in pairs.
  • There's an opening tag, which is enclosed in brackets, like these: "<" and ">".
  • There's a closing tag which is also enclosed in brackets, but in order to define it as a closing tag this one contains a slash (like this: "/" ) right after the first bracket.
An opening tag might look like this for example: Can you guess what the closing tag for it would be? That's right, the closing tag would be .

The opening tag goes right before the text it should apply to and the closing tag goes right after the text it applies to. For example, if you wanted to make the words "This is my product" appear in bold in the text, then you would code it this way:
    This is my product
B means that the text will be bold.

Always close your tags! If you forget to close the tag at the end of the sentence, then everything else (your description and the rest of the page!) will be in bold. And we certainly don't want that! In fact, if and when we find product pages where some of the HTML tags entered in the description box haven't been closed properly, you will be asked to fix it at once.

If you've peeked at the code of an HTML page, you might have noticed that tags aren't all as simple as the one shown above. Some tags may have attributes. For example, the image source tag (explained a little further) can contain special attributes so that the image is aligned to the left or right. Attributes are part of the opening tag, they are contained inside the brackets along with the actual tag argument. They do not need to be repeated in the closing tag. Not all tags can have attributes, though - bold is bold, there is no "bolder" bold. ;-)

An image source tag that would center the image to the right might look like this:
IMAGE, well, because this is an "image" tag.
SRC is for source and tells the browser where to get the image to display, ie: the file's path.
ALIGN is an attribute and we've set it to "left" so the image will be at the left of the screen.
BORDER is also an attribute and it's set to 1, which means that this image will have a 1 pixel thick border all around it.

HTML is not case sensitive.
is equivalent to
. There are a few exceptions, though, but these tags are for more advanced HTML and are not covered in this tutoral.

~ * ~ * ~ * ~ * ~ * ~ * ~

Handful of Tags you Might Like

Here's an overview of some HTML tags that you can use in your description texts. You will find some more advanced HTML a little further in this tutorial. And there are many others tags still, which will not be covered in this tutorial, if you want to learn about them, please check the links section at the end of this document.

Tags with no attributes
 and     Will change your text to bold, as we've seen earlier.
 and     Will change your text to italics

   Will create a line break - Note that this tag does not come in a pair
Tags with optional attributes

   Will insert an horizontal line, it can hold attributes for height and width - Note that this tag does not come in a pair


   Indicate the start and end of a paragraph, it can hold attributes for alignment - it will create line breaks before and after the paragraph's text.
   Indicate the start and end of a "division", like a paragraph for instance or a title. It can hold attributes for alignment and it will create line breaks before and after the paragraph's text. When used with align="center" as an attribute, it will center the text in the page.
Tags with mandatory attributes
 and     Will format your text in a number of different ways. It must have at least one attribute, no matter which one it is. Attributes may include size, color and even face to change the font that's being used to display the text.
 and     Will display an image. Mandatory attribute is SRC which point to the file's location, it can hold optional attributes as well.
 and     Will create a link to something, like another page for instance. Mandatory attribute is HREF which point to the link's location, it can hold optional attributes as well.

For a list of attributes these (and other) tags can hold, there's a nice, simple list right here: HTML Help Online - HTML Element Reference

A little about file and link location... The location you type in should be relative to that of the page in which this path is entered. For example: if the image you want to display inside your page is at the same place the page is, then you don't need a full path, all you need is the file's name. Now let's say you have a folder called "web" and inside it you've got your page and another folder called "images" which contains all the images for your page. When displaying an image inside this page you'll have to write the path like this: SRC="images/MyImage.jpg" so the browser knows to look inside the "images" folder in order to find the image. If your path is not coded this way, the image won't be found.

When linking to images or pages, do not enter absolute paths, like "C:DocumentsWebImagesMyImage.jpg" -- your C: drive is not available to your next door neighbour when he's visiting your webpage, in fact if the path starts with "C:" your neighbour's browser will start looking for the image to display on his C: drive! Chances are it's not going to find the image there. ;-)

However, if the image is located on a different web server somewhere, like your Renderosity Artist Page, for instance, then you will have to enter the complete URL which points to the image file. This is fine because no matter where you are, your browser can get access to a URL and it will find the image (or the page) it's looking for. Well, assuming it exists, of course!

WARNING! Before you start linking images from other websites, make sure that you are allowed to do this -- when you link an image from another server, it uses a little bit of the server's bandwidth everytime that image is displayed. Linking images from servers without their owner's consent is "bandwitdth theft" and while there might be no law against it, this is definitely not something you should do. Don't worry, though, you are allowed to link to images from your gallery or your artist page inside product pages that are being displayed in the MarketPlace. Whew!

~ * ~ * ~ * ~ * ~ * ~ * ~

Continued: part II