[ Fintragh's Homepage ][ Links & Feedback ][ Hostess Bio ][ Interdisciplinary Units ][ Tidbits ]
[ Art Smart ][ Art History ][ Properties of Design ][ Lessons & Activities ][ Educational Links ]

[ HOME:Images ][ Creating Thumbnails ][ Adding Thumbnails to a Web Page ][ Sample Thumbnails ]

Adding Thumbnails
For Your Web Page

Now that you have learned how to create a thumbnail image using PSP (or another graphics program) it is time to put them to use on your web page. Remember that a thumbnail image is a smaller version of another image. In order for either of these images to appear they must be located in the same folder as your webpage or linked to a folder that is located on another site. For our purposes we will be keeping all our files in one folder.

The URL is the address or location of your file. Note that the address box at the top of your screen displays the URL for this web page. To view the URL for your image that is uploaded to the internet you would first bring up the image using the file manager where your image files are located. You can then highlight the address, copy it, and then paste it into your code.

For this class your images will be stored in your personal folder for this class. Since we will not be placing these pages online you will need to use the URL that links the image to that folder. You can find the URL for your image by going to your file folder, back click on it and open properties. You will need to add the name of your image to the URL shown. It is important to keep your folder and file names informative but simple.

Thumbnails are mainly used as image links that you click on to go to the full sized version of the image or a webpage. You will see how both of these are accomplished below.

For those of you who did not use PSP (or another graphics program) to create your thumbnails you can use an online program such as MyImager to create a thumbnail image.

It is important to set your cell widths wide enough to accomodate the size of your thumbnail.

Don't forget that the 'alt' part of your code is what lets you add a roll-over title to your image.

Substitute your text here. Remember not to center align the text cell unless that is how you want the text to look.

If your text seems to stretch out one of the boxes you may need to go to a smaller font size or change the height of each row.

Below is the code for this thumbnail example. You may copy and paste the code into your web page. However you must change the image, link, and text information to reflect your own work.

Using a thumbnail (or any image) is done in much the same way. But instead of using the URL of the full sized image you would use the URL of the webpage you wish to go to.