Web Graphics

Introduction to Graphics

Adding graphics to your Web page is a simple task. To illustrate the point, here is the code that added the above image, Comp3.gif, to this page:

<IMG SRC="Images/Comp3.gif">

A few important facts/hints about adding graphics to your Web page:

The best format type for graphics to use on the web is .gif, although you'll also find some .jpg's here and there.

It's a good idea to keep all of your graphics in a subdirectory of their own in your public_html directory. Create a directory named Images now in public_html (mkdir Images).

Make sure the directory and all of the files are readable by everyone.

Where can you find graphics?

The best place to find graphics is on the Web. Use one of the search engines using "graphics" or "pictures" as a key word. You might also have success by using a keyword associated with the theme of the graphic that you're searching for. http:\\www.lycos\ com allows you to do graphic searches by choosing "graphics" from the pull down menu. You'll find lots of pages that offer a large selection of bullets, little balls, lines, and icons. Nice images are a bit harder to find.

An alternative source of graphics is your local software vendor. There are a lot of graphic libraries available on CD's. The nice thing about this is that you can be assured of not getting sued for copyright infringement!

Once you've searched and browsed and found a graphic that you like on someone's Web page simply right-click on the picture and select "Save Image As.." from the context menu. This will allow you to save a copy of the image to a directory of your choice. Try right-clicking on one of the images on this page and saving it in your public_html directory in the Images subdirectory.

Warning: Stay away from copyrighted material such as popular cartoon characters and other graphics that have a copyright associated with them.

Using a Picture for Your Web Page Background

You can tile a graphic image for the background of your Web page by changing the <BODY> tag of your page as follows:

<BODY BACKGROUND="Images/bg.gif">

Where bg.gif is the image file you wish to use.

Your Web browser will take that image file and place multiple copies of it in your background until the entire window is filled. This is called "tiling". This page uses a tectured pattern as a background image. Check out other textures at http://www.sfsu.edu/~jtolson/textures/textures.htm or http://www.netscape.com/assist/net_sites/bg/backgrounds.html.

Formatting Graphics

Formatting specifications for graphics are probably easiest to explain by example. Check out the effects of the following HTML commands:

Example 1

<IMG SRC="Images/FSUSeal.gif">

 By default, text which is on the same line as the image will be aligned with the bottom of the image.

 

Example 2

<IMG SRC="Images/FSUSeal.gif" ALIGN=CENTER>

  By using the ALIGN command you can align the text with the center of the image.

Example 3

<IMG SRC="Images/FSUSeal.gif" ALIGN=TOP>

By using the ALIGN command you can align the text with the top of the image.

Example 4

<IMG SRC="Images/FSUSeal.gif" ALIGN=LEFT WIDTH=100 HEIGHT=100>

By specifying which side of the page you would like the image ALIGNed on, and the HEIGHT and WIDTH of the image you can insert more than one line of text next to it. Text such as this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this, and this , and this, and this, and this, and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this , and this.

Example 5

<IMG SRC="Images/FSUSeal.gif" ALIGN=LEFT WIDTH=200 HEIGHT=100>

You can get some interesting effects by using different WIDTH and HEIGHT settings!

Example 6

<IMG SRC="Images/FSUSeal.gif" ALT="The FSU Seal" ALIGN=LEFT WIDTH=100 HEIGHT=100>

[Image: FSU Seal] It's a good idea to specify some ALTernate text to be displayed for users whose browsers do not support graphics or have chosen to turn off graphics. View this page (http://www.cs.fsu.edu/~baldauf/Internet/graphics) with the lynx browser by typing "lynx" at the Unix prompt. You'll find all images represented by the text [INLINE] except for this image which is represented by the text [Image: FSU Seal]. It's important to make your Web pages univeral -viewable to all browsers.

 

Transparent Gifs

Most graphics editing software will enable you to save a GIF file as a transparent GIF file. This technique allows you to select one of the colors of the image and make it transparent. The advantage of this is that you can make the background color of your picture transparent so that the background pattern or color of your Web page shows through.

Here's before and after shots of an image which encorporates transparency (white is named to be transparent):

There are some Web sites which offer the service of changing standard GIF images into transparent GIF images. One such site is http://www.mit.edu:8001/transweb.html.

Animated Gifs

Some programs allow you to take several GIF images and combine them into a single animated GIF image. You specify how quickly the GIF images should be rotated to create the illusion of movement and how many cycles you would like to occur. Some web sites offer to create animated gifs for you. One such site is http://www.vrl.com/Imaging/ . Do a search on "animated gifs" and you'll find tons! For free downloadable software for creating animated gifs and editing images go to http://www.tucows.com

Try adding some images to your Web pages.