In order to post an image you must first have your image uploaded somewhere on the internet.
Image hosts such as Photobucket and Imageshack are free and easy to use. Photobucket requires a registration but provides you with all the codes you need to post an image so you don't really need to continue reading this tutorial. Imageshack requires no such registration. You simply use the upload box on the page and when your image has completed uploading a new page will appear with text fields and codes. Copy the code from the field that is labeled "Direct Link" and use it when the following tutorial calls for the URL.

Here, for those of who like to learn, is a further exposition on the HTML image tag.
All tags begin with the "Less Than" symbol: <
And end with the "Greater Than" symbol: >
(For stand alone tags that have no closing tag, the correct closing syntax for a tag includes a forward slash before the final less than sign : /> )
Then the tag is defined by it's job: IMG (image)
Next, any number of elements can be defined, though generally this is where you define the SRC (source) of your image.
Other optional elements can include HEIGHT, WIDTH, BORDER, VSPACE (vertical space), HSPACE (horizontal space), ALIGN, etc.

HEIGHT & WIDTH
are determined automatically as the image loads, but sometimes you may want your image to appear in a different size than what it originally is. For instance: Have you ever been reading a webpage with images that are in the process of loading? If the images don't have a defined height and width then the page will adjust in length as the images load. This can result in text you are reading suddenly appearing further down the page. So in this instance it would have been advantagious to dictate a height and width.
Or perhaps you might want to augment the standard dimensions of an image.

This image is 150 pixels in width and 150 pixels in height.

<img src="voo.jpg" width="150" height="150" />

by changing the width to 50 pixels and keeping the height at 150 pixels, the same image would look like this:

<img src="voo.jpg" width="50" height="150" />

BORDER
adds (or removes in the case of a linked image) borders around images.

<img src="voo.jpg" width="50" height="50" border="10" />

VSPACE & HSPACE
can be used to add a bit of padding around a picture. Vspace adds padding to the top and the bottom of an image. Hspace adds padding to the right and left of the image.

<img src="voo.jpg" width="50" height="50" align="left" vspace="10" />

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

<img src="voo.jpg" width="50" height="50" align="left" hspace="10" />

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

<img src="voo.jpg" width="50" height="50" align="left" vspace="10" hspace="10" />

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

ALIGN
is most commonly used to wrap text around an image. By default, text will start at the bottom right side of a picture like so:

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

by adding align="left"to the image tag, the text will instead hug the sides of the image, like so:

<img src="voo.jpg" width="50" height="50" align="left" />

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

<img src="voo.jpg" width="50" height="50" align="right" />

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text