First of all, you must use the "customize" listing format and not use the "keep it simple" listing format. The "simple" listing format does not support the use of HTML.
The easiest way to do it is to build your descrption as your normally would in the standard editing window. When you get to the point you want a photo, type something like ***PIC-1***. Continue on and, when you get where you want another pic, type ***PIC-2***, and so on. Then click the HTML editor tab and type or paste the photo's code, replacing the ***PIC-1*** with that photo's code, then replace ***PIC-2*** with that photo's code, and so on. Then click back to the standard editor and continue. Be careful not to delete anything other than the ***PIC-1***, you don't want to delete part of the code the editor puts in. (HINT: You can use your browser's Edit/Find feature to locate your ***PIC-1*** text buried in the HTML code.)
The syntax for the code will look like this:
<img src="http://www.your-host.com/folder/image1.jpg">
That's the code for the address of the pic, the <img src=" is the HTML tag that tells the browser to display the pic and the http://www.your-host.com/folder/image1.jpg is the URL of the pic.
You need to add the <img src=" to the front of the pic's URL and you need to add "> to the back of the pic's URL to make up the correct HTML code.
Obviously that's a generic pic URL, you'll have to edit it to reflect the URL of your pics. If you use PhotoBucket, use the Direct Link for the pic URL.
To line them up, side by side, you'd type the code one right after the other, no spaces or line feeds, just type one code, then the next, then the next, such as:
<img src="(pic1 URL)"><img src="(pic2 URL)"><img src="(pic3 URL)">
The editor will auto-wrap it as needed, so don't try to get it back to one line if it wraps.
If you want the pics to be centered, start off with <center>, then put the pic code(s). When done, input </center> to close the centering process.
<center><img src="(pic1 URL)"></center>
If it turns out that you've got 3 pics and they stretch out the screen when placed side-by-side, input <BR> (or 2 or 3 of them) between the pic codes to create a line feed(s) and place the next pic below the ones before it.
<center><img src="(pic1 URL)"><img src="(pic2 URL)"><BR><img src="(pic3 URL)"></center>
You can also specify the border that goes around the pic by using a border value:
<img border="x" src="(pic1 URL)">
border="0" would have no border, border="1" would have a thin border, border="2" would be thicker, and so on.
Lastly, you can specify a space that surrounds the pic. The value HSPACE sets the horizontal space between the image and surrounding text (puts space side-to-side). VSPACE sets the vertical space between the image and surrounding text (puts space top and bottom). You would put those values in using the same format you do for the border="x" value.
Here are 3 images with border="2" value:
Same 3 images with the additional HSPACE="5" value:
Here is the code for showing one of the above 3 pics:
<img border="2" hspace="5" src="http://pics.ebaystatic.com/aw/pics/logos/logoEbay_x45.gif">
As you do all this, remember that typos count, so be careful when doing it. This is especially true for the pic's URL, which is case-sensitive.
A very helpful and detailed tutorial can be found at:
http://www.isdntek.com/demo/hosting.htm
The easiest way to do it is to build your descrption as your normally would in the standard editing window. When you get to the point you want a photo, type something like ***PIC-1***. Continue on and, when you get where you want another pic, type ***PIC-2***, and so on. Then click the HTML editor tab and type or paste the photo's code, replacing the ***PIC-1*** with that photo's code, then replace ***PIC-2*** with that photo's code, and so on. Then click back to the standard editor and continue. Be careful not to delete anything other than the ***PIC-1***, you don't want to delete part of the code the editor puts in. (HINT: You can use your browser's Edit/Find feature to locate your ***PIC-1*** text buried in the HTML code.)
The syntax for the code will look like this:
<img src="http://www.your-host.com/folder/image1.jpg">
That's the code for the address of the pic, the <img src=" is the HTML tag that tells the browser to display the pic and the http://www.your-host.com/folder/image1.jpg is the URL of the pic.
You need to add the <img src=" to the front of the pic's URL and you need to add "> to the back of the pic's URL to make up the correct HTML code.
Obviously that's a generic pic URL, you'll have to edit it to reflect the URL of your pics. If you use PhotoBucket, use the Direct Link for the pic URL.
To line them up, side by side, you'd type the code one right after the other, no spaces or line feeds, just type one code, then the next, then the next, such as:
<img src="(pic1 URL)"><img src="(pic2 URL)"><img src="(pic3 URL)">
The editor will auto-wrap it as needed, so don't try to get it back to one line if it wraps.
If you want the pics to be centered, start off with <center>, then put the pic code(s). When done, input </center> to close the centering process.
<center><img src="(pic1 URL)"></center>
- --or--
If it turns out that you've got 3 pics and they stretch out the screen when placed side-by-side, input <BR> (or 2 or 3 of them) between the pic codes to create a line feed(s) and place the next pic below the ones before it.
<center><img src="(pic1 URL)"><img src="(pic2 URL)"><BR><img src="(pic3 URL)"></center>
You can also specify the border that goes around the pic by using a border value:
<img border="x" src="(pic1 URL)">
border="0" would have no border, border="1" would have a thin border, border="2" would be thicker, and so on.
Lastly, you can specify a space that surrounds the pic. The value HSPACE sets the horizontal space between the image and surrounding text (puts space side-to-side). VSPACE sets the vertical space between the image and surrounding text (puts space top and bottom). You would put those values in using the same format you do for the border="x" value.
Here are 3 images with border="2" value:
Same 3 images with the additional HSPACE="5" value:
Here is the code for showing one of the above 3 pics:
<img border="2" hspace="5" src="http://pics.ebaystatic.com/aw/pics/logos/logoEbay_x45.gif">
As you do all this, remember that typos count, so be careful when doing it. This is especially true for the pic's URL, which is case-sensitive.
- IMAGE1.JPG is different than image1.JPG
image1.JPG is different than image1.jpg
image1.jpg. is different than IMAGE1.JPG
A very helpful and detailed tutorial can be found at:
http://www.isdntek.com/demo/hosting.htm