GRAPHICS - GENERAL

Important Note For GeoCities Members - Do not use spaces in the name of a graphics' file, e.g. my photo.jpg! Always use lower case letters and numbers.

Graphics are really quite simply. There is only one HTML tag you have to use. It is <img>. So, if you have a graphic file, say golfhole.jpg that has as width of 400 and a height of 300 (pixels), and you wish to display it on your page you place the following code in your file:

<img src="golfhole1.jpg" width=400 height=300 alt="A Golf Hole>

and this is what you will see when the page is displayed:

It is strongly recommended that you always use width, height, and alt for all your graphics. The width and height will save a place for your graphic on your web page, thus keeping other objects, graphics and text, from moving around on the page as it loads.

Note: In order for the graphic to be displayed on you page there are three things that you must do:

  1. You must have a copy of the graphic in your file manage. In order to get the file to your file manager you must upload it from your hard drive by using either UPLOAD FILES in file manager or by using FTP.

  2. You must spell the graphic file name exactly as it appears in your file manager.

  3. You must use the same case as the graphic file name as it appears in your file manager. This means that if you specify the graphic as MyPic.gif in file manager and then put <img src="mypic.gif">, the graphic WILL NOT DISPLAY.

Here are the attributes other then the required SRC="url" that you can include in the tag:

ALIGN=TOP/MIDDLE/BOTTOM/LEFT/RIGHT
- aligns text around of the graphic (top/middle/bottom) or the graphic will be on the LEFT/RIGHT side of the screen.
BORDER=n
- n is the number of pixels for a border around the graphic.
HEIGHT=h
- h is the height in pixels of the graphic
WIDTH=w
- w is the width in pixels of the graphic
HSPACE=s
- s is the width in pixels of horizontal space between other graphics and text.
VSPACE=v
- v is the width in pixels of vertical space between other graphics and text.

As an example, let's change the graphic above by using:

My Favorite Hole <img src="golfhole1.jpg" width=100 align=top>

My Favorite Hole

Note the border around the image. To add a border use the border=N where N = 1, 2, 3, ....,etc. In the above I used N = 2. You can make the border any color by using a table with a background color and a cellpadding=N rather than using the image border=N, e.g.

<table bgcolor="#0000FF" cellpadding=10 ><tr><td>
<img src="golfhole1.jpg" width=100 align=top>
</td></tr></table>

You can change the size of the graphic but this is not a good way to reduce the size, i.e. use the original size and telling the browser to change the size. Why? Because if the original graphic is large, both in size and bytes, then it will slow down the loading of your page, especially if you have lots of such graphics on your page. If you do have lots of graphics, then I recommend that you use Thumbnails so you can show a much smaller version of the graphic that can be clicked to show the larger image.

Next, let's see how the HSPACE works. First, if we put three duplicate copies of the photo in a line using this code:

<img src="golfhole1.jpg" width=100><img src="golfhole1.jpg" width=100><img src="golfhole1.jpg" width=100>

Now if we add hspace=10 so the code looks like this:

<img src="golfhole1.jpg" width=100 hspace=10><img src="golfhole1.jpg" width=100 hspace=10><img src="golfhole1.jpg" width=100 hspace=10>

If you need some graphics for your page, you can go to these sites:

http://www.geocities.com/members/tools/clipart/index.html

http://www.reallybig.com

Or just go to Google.com and use their Images tab.