Math Forum | Urban Systemic Initiative

Pictures on Web Pages

Return to the Schedule
Yesterday we created a picture in ClarisWorks and put a copy of it on our web page. This page reviews the steps that we took, and includes a copy of Sarah Seastone's message about other options you might want to consider in the future, and a note from Suzanne Alejandre.
1. In ClarisWorks select your picture and copy it to the clipboard. You now have a copy of the picture in PICT format, which is a Macintosh graphics format. Next we need to change it to a format that any type of computer can read so that we can put it on our Web page.
2. Open the program clip2gif - it should be in your Math Forum folder. This is a free program that we downloaded Wednesday morning from the Forum's server. It converts PICT files into GIF files without your having to do very much work.
3. Select "Open Clipboard" from the File menu. This lets you take a look at your picture and see if you've really copied what you think you copied!
4. Select "Save Clipboard As..." from the File menu and save your new file in your Math Forum folder - give it a name that ends with .gif, so something like "annie.tess.gif" would be a good one. You have just saved a copy of your picture as a GIF. Any kind of computer can read it, and many pictures you see on Web pages are in GIF format. You must give your graphic a name that ends with .gif so that you and the computer will know what kind of file it is and what to do with it.
  Of the two commonly used formats for images, a GIF (Graphic Interchange Format) is best for diagrams and drawings; JPEG (Joint Photographic Experts Group, the original name of the committee that wrote the standard) is best for photographs.
5. In your Math Forum folder, double-click on the source file for your home page (i.e. annie.fetter.html). We have our picture; now we need to tell our home page to display it. We'll do this on our "local" copy and check it before we put the picture, with our updated home page, on the server.
6. Somewhere on your home page put a line that reads <img src="filename.gif">, where "filename.gif" is the name of your picture. You're telling the web browser, "show a picture, and the source of that picture is filename.gif".
7. Save your file; then go into Netscape and using "Open File" from the File menu, open your home page. Make sure you are opening the local copy of your home page, not the one on the forum server, since you haven't changed that one yet.
8. If you see what you want, you'll want to put a copy of both the new home page and the picture on the server. Open Fetch, hit cancel when that window pops up and choose "Open Bookmark" from the File menu. I'm guessing that we have saved a bookmark on everyone's computer to the right place on our server - so that you don't have to type all that information again.
9. Put in your password, and then hit the "Put File..." button. Find your home page and open it. Make sure the bottom box says "Text"; say okay, and watch the dog run. You're putting a new copy of your home page on the server, and since it's just a text file, you'll upload it as text. (The computer can use different "languages" to put files on the server, and you want to make sure it's speaking the right one for the right kind of files.)
10. Hit the "Put File..." button again, find your picture, and open it. Make sure it is going to upload as "raw data" - choose that from the popup menu in the bottom box. A picture is a different kind of file from a text file.
11. Go into Netscape and go to your home page on the server (you probably have a bookmark to it). If your picture does not show up, hit the Reload button. You've put a new copy of your page together with a copy of the picture on the server, and you need to take a look at it.
Sarah Seastone sent the following message about doing graphics using clip2gif and some of the "advanced" features you might want to use in that program:

[Privacy Policy] [Terms of Use]

Home || The Math Library || Quick Reference || Search || Help 

© 1994- The Math Forum at NCTM. All rights reserved.