How To Add HTML Images To Your Web Pages!

Placing An HTML Image On Your Page

The HTML command to place an image is constant. You will use the same format every time. Now might be a good time to talk about where to store everything on your web server because you're starting to call for additional items to fill up your home page. Until now, all you did was put text on the page. Now you're going to place an image.

At this point in your HTML career, it's a good idea for you to place whatever images you are going to use in a subdirectory called "images". That means place the image in a directory (to be called "images") under the directory where your web pages are located (which would be the "root" directory for your site).

     <IMG SRC="image.gif" ALT="some text" WIDTH=32 HEIGHT=32>                       

Here's What's Happening: the Image Element Parameters

1. IMG : stands for "image." It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag.
2. SRC :  stands for "source." This again is an attribute, a command inside a command. It's telling the browser where to go to find the image. Again, it's best for you to place the images you want to use in a subdirectory called "images". This way you can call for the image by name with just the subdir name in front of it, like this: /images/imagename.gif. You could also direct the source to some other place online, such as an image you have stored on Photobucket, for instance, by using the full URL of the image, such as http://www.photobucket.com/youraccount/imagename.jpg. Right now, let's just get it to work.
   image.gifis the name of the image. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).
3. ALT : stands for "alternate text". This tells the browser that if it can't find the image, then just display this text. It also tells anyone who can't view your image what the image is about. For example a disabled user using a screen reader, or dare I mention it, Search Engines. When you mouse over the image, the alternate text pops up "some text"is where you put the text describing your image.
4. WIDTH : stands for just that, the width of the image in pixels. It can range from 1 pixel to, well, just about any number, but generally will be less than the width of the web browser.
5. HEIGHT :  stands for, as you might guess, the height of the image in pixels. Again, the height can be just about anything, but generally will be less than the height of the web browser.