Creating Your Own Web Page

Kimberly C. Walls, Nov. 2, 1996

Last revised July 27, 1998

5. Adding graphics

Graphic file types

If you plan to display graphics over the WWW, you should use GIF or JPEG graphics. GIF file names should end with .gif. JPEG file names should end with .jpg. If you are not going to publish your graphics on the WWW but are only going to display them from your Macintosh, then you may use PICT files (ending in .pict). 

Where to get graphics

It is very easy to find graphics by cruising the WWW. When you find a graphic that you like, you may save the image to your computer. If you are using a Macintosh, simply hold the mouse button down on the graphic and select Save Link As (source). If you are using a Windows 95 machine, click on the graphic with the right mouse button. It is best to save the graphic file in the same folder as the calling HTML file. There are lots of shareware and freeware programs that can convert PICT or BMP files to GIF or JPEG. 

Adding inline graphics

(Using Netscape Communicator) Click on the page where the graphic should appear. Under the Insert menu, choose Image. Then click on Choose File and navigate to the graphics file. Use the other options in in the diaog box to set alignments, etc.

(Using Netscape Navigator and a text editor) Click on the page where the graphic should appear. Type <IMG SRC=" followed by the name of your graphics file. End the HTML tag with "> If you wish to align the picture then insert ALIGN= and the type of alignment before the closing > Example: <IMG SRC="myphoto.gif" ALIGN=LEFT>  

Adding graphics as buttons

(Using Netscape Communicator) Click on the graphic you want to serve as a button. Under the Insert menu, choose Link. Click on Choose Link to select the file to which the button will link, or type in a URL. Then click OK.

(Using Netscape Navigator and a text editor)Before a graphic HTML tag, add the following HTML <A HREF=" followed by the URL of the link ending with "> . After the graphic HTML tag, add </A> to end the link. Example: <A HREF="http://music.utsa.edu/~login/linkedfile.html"><IMG SRC="button.gif" ALIGN=LEFT></A>

Adding background graphics

(Using Netscape Communicator) Under the Format menu, choose Page Properties. Click on the Colors and Background tab, then under Page Backgound, click in the checkbox beside Image. Use the Choose Image button to navigate to the graphic file and click Open. Click OK to close the dialog box.

(Using Netscape Navigator and a text editor)To add a background graphic, replace the <BODY> tag with <BODY BACKGROUND = "background.gif"> with the graphic file's name in place of "background.gif" Of course, if you don't want a background graphic then replace <BODY BACKGROUND = "background.gif"> with <BODY> so the browser will know where the body of the page starts.