Images
Written by Jen

Images are always a good thing to have on your page. Whether they be screenshots, graphics, or just random images, they liven up your age and make dull text more interesting.

Basic Image Code
If you want to display a normal picture, you would use the following code:

<img src="http://www.yourhost.com/image.gif">
You would need to have the URL ready before you display an image otherwise you will get an indented box with a red cross in it rather than the image you want. Your image can end in .jpg, .png, .gif, .bmp or whatever else your host allows you to upload. There are some endings that are not valid in this code like .cur, .ani and .ico but they are still saved as images.

Formatting your Image
You can't use text tags on images like bold, italics or underlined, but you can determine the position of your image. You can center it:

<center><img src="http://www.yourhost.com/image.gif"></center>
Or if you want text to go around it, you can add align attributes to the image tag like so:
<img src="http://www.yourhost.com/image.gif" align="left">
You can make it align the left or right of the page, it's up to you. If you don't have the align tag inside the code and put text straight after the image code without using breaks then it will not wrap around the text. To the right you can see an example of image alignment/text wrapping.

Image Links
If you wanted to make image links, say for your site button or for a banner, you would need to use an image tag enclosed by a link tag like so:

<a href="http://www.yoururl.com"> <img src="http://www.yourhost.com/image.gif"></a>
This would give you an image that looked like this (just imagine the image URL existed):

Oh but that hideous border! To get rid of that, you can add the border attribute of images:

<a href="http://www.yoururl.com"> <img src="http://www.yourhost.com/image.gif" border="0"></a>
This means that the image will not have a border anymore, and this looks way more attractive for things such as site buttons. Normally, if you added a border attribute to an image when it's not a link, it will give you a black border. You can make the border thicker if you wish, and the number can be as high as you want:
<img src="http://www.yourhost.com/image.gif" border="2" bordercolor="red">
And this would look something like this:

Multiple Images
If you wanted to display more than one image on a line but don't want them directly next to each other, you would usually just press the space bar in between the image tags. But that will only give you one letter spacing (no matter how many times you press it), and you might want it to be further apart (usually occurs when you have larger images). You would then use the following space attributes:

<img src="http://www.yourhost.com/image.gif" hspace="2" vspace="2">
The hspace stands for horizontal space, the spaces between the images on one line. The vspace stands for vertical space, and this affects the spaces between lines. Naturally, the bigger the number, the bigger the space. This is usually very effective when used with align attributes.




Image taken from Neopets.com