Image Display

Displaying Images

To display an image on your page you must first UPLOAD the image file to your file directory. Display of the file on your page results from the insertion of an HTML tag in your document file. To keep problems from occurring it is usually easiest to name all your image files using "lower case" characters in their filenames because the server is "case sensitive." When you enter the appropriate "tag" to display the image file it must be entered in the document file using the EXACT spelling and case of the file in the directory.
Images for use in webpages should normally be in the .gif or .jpg format. Though other formats may be supported by GeoCities they usually cause problems in displaying either because they are too "large" or many browsers cannot view them without using a "plugin."
The "basic" HTML tag used to display either a .gif or .jpg is:

<img src="filename.gif"> Example:

You can substitute either .gif or .jpg in the above tag to make the image display. However, there are attributes which can be added to the tag to cause other forms of display.

<img src="filename.jpg" border=5 width=160 height=100 alt="picture"> Example:

The attribute "border=5" causes the image to have a "5 pixel" border. The border can be displayed and can be increased in size by making the "border=1, 2, 3, etc" and each number equals an additional pixel width to the border.
The "width= and the height= " attributes will help to load the image faster if they represent the true dimensions of the image. They can also be used to reduce the size of an image though the results are not what can be accomplished using a graphics program to actually "resize" the image.
The "alt= " attribute should be added to an image tag so browsers which have the images "turned-off," or if the browser cannot display images, the user will still know what should be located in the image position.
There are other attributes which can be added to an image tag which will facilitate "image alignment," etc.
The use of "hspace=#" will cause text alignment along side your image to be "#" pixels away from the image. Place the "img" tag on a line within your document and begin your text on the same line and the text will align at the top of the image and "wrap" along the side and across the bottom of the image.
Example: The image will align to the LEFT with the text to the RIGHT of the image.

The use of "align=left or align=right" will cause your image to align to the "left or right" side of your page. You should become familiar with Advanced HTML to learn about those others.

Making Thumbnail Images

To make a thumbnail image for linking to a full-sized image it is necessary you use a "graphics" program such as Paint Shop Pro, PhotoShop, PhotoDeluxe, LView or another of many.

The actual creation of the thumbnail involves:

Making a copy of the original
Selecting the copy and using the program to "resize" it
The program menu item to use would be Image or similar
Maintain the width-to-height ratio of the image
Adjust width or height to make the image the size wanted
Save the image in the "new" size

Place the thumbnail images on the page you choose either separately or using a table to align them and link using the thumbnail to the original sized image on another page. The page used to display the original can be made with separate background and title if wanted as well as alignment for desired location.