Putting Pictures in a Web Page

A Simple Image

There is a very nice blue dot in the following place: http://ccat.sas.upenn.edu/gifs/bluedot.gif

It looks like this: . If you want to look at the file itself, here is a link to it.

The name of the file is "bluedot.gif". The ".gif" indicates that this file is in CompuServe GIF format, a very convenient graphics format.

In-Line Graphics

To include a graphic image in your page, you need to know only

the magic formula in HTML for displaying an image
the location (URL) of the file that contains the image you want.

The magic formula for displaying an image is <img src=...>.

We already know the address of the blue dot's file: http://ccat.sas.upenn.edu/gifs/bluedot.gif

So, to include the blue dot in a web page, all we have to do is write the following HTML:
<img src=http://ccat.sas.upenn.edu/gifs/bluedot.gif>.

The graphic resulting from this HTML will look like this: . It's just a small graphic, but large graphics work the same way.

Notes

Notice that you don't actually have to have the graphics file. You only need to know where it is.

There are a number of useful little gif images in the same directory as the blue dot. Here is a list of them. Feel free to use any of them.

Notice that text can precede and follow a graphic.

Notice that you can use a graphic image as a link to another file. For example, here is a blue dot that is a link to the blue dot file:
.

Large graphics take a long time to load. If you have a large image, it is often a thoughtful touch to put a small version of it in your page, with a link to the large version. Then if anyone wants to see the large version they can follow the link, but if they have a slow connection they are not forced to wait for the picture. For example,
San Francisco Peaks

So now you know how we get the button at the bottom of these pages to work.

Return to home page workshop

Last Modified: March 21, 1995

If you have suggestions for this web, please forward them to: