HTML Basics: Adding Images to Your Page

How to place images on your page


So, have you been wondering how to add an image to your page? Well, let’s take a look at the image tag:

<IMG SRC="image.gif">

The IMG stands for image. The SRC stands for source. The source of the image is going to be the net address of the image. Most often, you will be able to just type the filename of the image here, like this:

<IMG SRC="image.gif">

The filename does not have to end with .gif . You could also use a .jpg file as well. These are the two most common image file extensions used on the internet. If you have images in other file formats, you will probably want to convert them to .gif or .jpg . This can be done with most image editing programs. A commonly used program is Adobe Photoshop or ImageReady.

Now, if your images are in a directory other than the one your html document is in, you will want to link to it using the full address of the image. So, if your image is located at http://mydomain.com/pictures/image.jpg , you would use this url as the image source:

<IMG SRC="http://mydomain.com/pictures/image.jpg">

If you aren’t sure, go ahead and use the full address just to be sure it will work correctly. Now let’s work with a real example. One image I have on this site is called “logo.png”. The address for the image is: http://www.blindog.com/blog/wp-content/uploads/2010/11/logo.png.
If my image and html file were in the same directory, I would type:

<IMG SRC="logo.png">

Otherwise, I would use the full internet address, like this:

<IMG SRC="http://www.blindog.com/blog/wp-content/uploads/2010/11/logo.png">

Either option would display the image on the page, aligned to the left, like this:



If you want to know where an image is located on any web page, just right click on the image in question and choose “properties”. in the “address URL” field is the answer. If you copy and paste this URL into your document the image will show up when posted. Remember the image will not show up in your document because it’s really not there (just a link), and if your linking to another web site that is not yours, if the image is removed your link will no longer work. So, this can be a problem. For email blasts you MUST use the full path to an image (http:/www.mydomain.com/image.jpg) otherwise the email client has no way of finding and displaying your image. Make sure that any images you are referencing are located on a server you know, and are sure the images will not be deleted or moved.

If you want to center the image on the page, you would place the CENTER tag around the image tag, like this:

<CENTER>
<IMG SRC="http://www.mydomain.com/images/logo.png">
</CENTER>

This will place the image in the center of the screen:



Keep in mind, the filename or address of the image IS case sensitive, so “image.jpg” and “IMAGE.JPG” are considered two different images to the web browser. Be sure to use the correct case in your image tags, or the image may not show up, and that’s no fun.

Now, this doesn’t give us everything we could possibly want, but it will allow you to add an image to your page on its own line.

>> NEXT: HTML Basics: Linking to Other Pages