Main Page
HTML Style Promotion LinksWeb Rings
Credits
FeedbackCritique
Sign In
Guestbook
Get your
FREE web site!
<Adding Graphics>
There are two graphics file formats supported by HTML. They are:
They each have their pros and cons. For instance, GIF's support good compression for clip art type graphics but not so good for photographic images.
![[pixel]](pixel.gif){kind=tracking}
GIF's support transparency and interlacing but are limited to 256 colors.JPEG's support millions of colors, have good compression for photographic images (with some loss of detail) but, it doesn't support transparency or interlacing and has poor compression with clip art type graphics.To add a graphic to your web page you must use the <IMG> tag. Here is the basic format:<IMG SRC="filename.ext">The SRC= section identifies the file to be displayed.Be careful it is CASE SENSATIVE.When you view your page with a browser you should see the graphic.If not, check the spelling and case of your HTML.Make sure that they match the graphic file on your hard disk or server.You'll probably make this mistake. It is very common.I've done it more times than I care to remember.OK, Lets make a graphic do something. Look at the following:<A HREF="links.html"><IMG BORDER=3 SRC="./graphics/bLinks.gif" alt="Links"></A> 
This should give you a graphic that when clicked causes your browser to display the file links.html which in this case is my links page.Notice the border around the graphic.This identifies it as a hot link.You can get rid of the border by setting the border attribute to zero.To display text in place of a graphic while it loads we use the ALT= attribute in the format:<IMG SRC="image.jpeg" ALT="[Way Cool Graphic]">This displays [Way Cool Graphic] on the screen while the image loads.It is also used by browsers that don't support graphics.If your using Internet Explorer, put your cursor over the graphic and leave it for a few.See the little pop up box.That is the ALT text.Some More Miscellaneous Graphical Stuff
To just draw a horizontal line across the screen in order to divide two sections on the screen use the <HR> tag.Speeding Things up a Little
You can help out the browsers by telling them the size of the graphic in the <IMG> tag.To do this we use the WIDTH and HEIGHT attributes.When we do this the browser doesn't have to figure out how much space on the page to set aside for the graphic because you've allready told it.<IMG BORDER=1 HEIGHT=100 WIDTH=200 SRC="ANY.GIF" ALT="Cool Graphic ">Background Images
You can load a graphic as the background of your web page by using the BACKGROUND= attribute of the <BODY> tag.<BODY BACKGROUND="image.gif">Sets the GIF file you've specified as the background. Your browser will tile the whole screen with this graphic. Again, be very careful with this. I've seen many web pages out there that just gave me a headache because I couldn't read the text for the loud background.
Animated Graphics, Transparency, and Interlaced Graphics
Animated graphics are just what it says. Transparency is the ability of a GIF to have one color set aside, that when displayed in a browser that is invisible, letting the background color or graphic show through. Interlacing is a method of saving and loading a graphic so that they display faster. They show up as blocky graphics at first and then as the graphic loads they come into focus. As far as I know, only GIF's support these cool graphic features. In order to take advantage of these features of the GIF format you need a graphics program that can manipulate the internals of the GIF file. There are many commercial and shareware programs out there that let you do this. I use GIF Construction Set from Alchemy Mindworks.
Updated on: 1/17/98 21:15:34 CST