You want images (AKA graphics) on your Web page, don't you?. Many graphics look cool, and can serve a definite purpose on your Web page. Besides, there are some things that you just can't show with plain text.

There are two image file types that you can use on a Web page: .gif and .jpg images. Well, you can also use .png images, but these are rarely ever seen. These three types are the only image types that are readable by all Web browsers.

You must get images before you put them on your web page. (duh!) There are three ways to do this: You can save images off of the Internet, you can create your own images, or you can use the full URL of an image on another server.


Getting Images


How to save images off of the Internet

Find an image you like on the Internet? Want to use it on your Web page? It's easy. Right click on the image and select either "Download Image to Disk", "Save Image As" or something else similar, depending on your Web browser. (For Macs, hold down the control key and click on the image.) Then pick a place to save the image to.

Many search engines have an "Image search" feature that allows you to search for images using keywords. I know www.yahoo.com and www.google.comhave this feature. Go to one of these sites and click on the "Image" tab to use this feature. This is useful if you are looking for images on a certain subject.

Found this one in a Google Image Search.

Note: Some images are covered by copyrights.

DISCLAIMER:


I'm not responsible if you get in trouble for using a copyrighted image.

How to make your own images

You may want to use some of your own images. There are a couple of ways to do this. First, if you have a digital camera, you can use image files from it. Digital camera pictures are in .jpg format. (The .jpg format works best for photographs.) Put these images somewhere on your hard drive. You can use an image editing program to shrink the image's size, crop it, etc. to reduce the file size.

You can also draw your own images using a draw program. This ability can be quite useful sometimes. To do this, open up your draw program and draw your image. Then save the image. However, draw programs do not produce .gif or .jpg files naturally. Microsoft Paint produces .bmp files and AppleWorks produces .cwk files, for example. So, when saving your image, you must select "Save As" and, under File Type, select "GIF" or "JPEG".
El Barto graffiti
Example: This is an image that I drew myself using AppleWorks.


Once the images are on your hard drive....

Upload them to the server where you will be putting your webpage. For more about publishing (including getting server space), click here.(Make sure each image you want to use is in the same directory as the page you want to use it on.)


Using the full URL of an image on another server

This would be useful if you wanted to use an image from another website, but didn't want to use space on your server for it. Right-click on the image and select "Open image in new window", "Open Image" or something similar depending on your Web browser. A new window will open up, with just the image in it. Take note of the URL in the location bar of the new window. This is the URL of the image. Use this URL in the image tag when typing the code for your Web page.


THE IMAGE TAG


<img src="image name" alt="small amount of text describing image" width=number height=number>

Don't forget to use a <br> tag if you want the image on a separate line.

For "image name", use the image's filename.

For "small amount of text describing image", type a short description of your image. (This part is optional.)

For the height and width numbers, use numbers for how many pixels tall and wide that you want your image to be. If you don't use these parts, your image will be displayed in its default size, which may be what you want anyway.

Click here to go to the next part: how to do tables.
This page © Alan Gilfoy, 2004-2009.