Images On Your Web Page

So now you know how to make simple web pages with paragraphs and headers, and you also know how to change the font colors, fonts size and apply some other basic formatting to your text. But your pages will still look kinda plain without. To spruce up your page a bit, we're going to add images to a web page.

First off, you need to have an image that you want to place on your page. When you have an image that you want to use, be sure to keep it in either the JPEG, GIF, or PNG file format.

To insert the picture you want, you use the image element, <img src="URL of where my image is stored" />. Be sure to specify the exact url of where your image (or some one else's image that you want to use) is located.

When you want to insert an image on the next line of your web page, you can use the line break tag before you insert the image.

Also keep in mind that images with a large file size will take longer to load than those with a smaller file size.


Aligning Images

To align images to the right side your page, add the align="right" attribute in your image element.

<img src="URL of where my image is stored" align="right" />

To align images to the left side of your page, you do the same thing, but you type in"left" instead of right.

Note that when you align images to the right, the text will be to the left of it and when you align images to the left, the text will be to the right of it.


Add Space Around Images

When you insert an image and allow it to flow with the text or if you use the align attribute, then you might want to add some space around the images so that it makes things more easier to see and read. To do this you would add both of these attribute into the image element;

hspace="horizontal pixels space" vspace="vertical pixels space"

The horizontal pixels space and the vertical pixels space are both numerical values. The vertical space will add space to the top and the bottom of your image. The horizontal space will add space to the left and the right of your image.

Next: Linking Pages Together