Adding Images

Now we have something to work with. The world of HTML offers a wide variety of things you can to make your web site work for you. You can even add pictures, images, graphics, and icons to your site to bring it to life. To do this, you need to use the <IMG SRC="..."> code. We'll pretend one of your hobbies is flag collecting. The image tag will take the picture you want to put on your page and make it so that it is visible on your page. This is the format that you'll need for all of the pictures you include if you decide to add more. You may wonder, "What command or HTML tag am I going to use if I like to text wrap an image?" The answer is simple, copy the code below, then add your information as needed. For example:

<img src="http://www.yoursite.com/yourimage.gif" align=left vspace=5 hspace=10 alt="Alternative image text">

- Add the link to your image. Some sites will let you drop the address of your site and use "yourimage.gif" as your img src, just remember that your image comes from the same directory as the page you're putting it on. If not, you need to have it look like this, "subdirectory/yourimage.gif".

- Align the image to the left or right of your page.

- Add the correct amount of vertical and horizontal space (vspace and hspace). The amount is up to you. Space is defined in pixels, so 5 and 10 may or may not be enough for you.

- Add alternative text. This is not necessary and may be deleted, but if you want to add an explanation to your image, this is where you'd add it.

Depending on the size of the image and the amount of text you are putting around it, this code will work for every picture that you want to put on your page. If you need some ideas of what kind of graphics, icons, or even animated characters you want to show or are trying to find the perfect picture to put on your site that tells the world who you are, try looking in our graphics page or our page of valueable links. There are several links that will help you get a good start. In the next lesson, we'll learn how to make images into links.

Question: Cool! I like the idea that I can use images as space fillers. But how do I make them take me to another page?

Answer: Glad you asked. Whether it's one image or many, you can make them take you to other pages by turning them into links.