OBJECTIVE:
Use graphics and 8 of its attributes. You must include the first attribute, but you should include at least the first 4 attributes. You could have any from #2 to #8. The sequence is irrelevant, just as long as you are consistent.

1. Src = A graphic, a photograph, and an image are all separate files. The src is the path and filename. For example, the src for the header to this page is "/images/dotcomhead.gif".

2. Height and Width = These are the rectangular dimensions of an image. Even when you see a round image, it really is a rectangle. If you place the mouse over an image and click with the right hand button on the mouse, you can then click on the "properties", you will see the dimensions. Try it with the red and white circlular image at the upper left hand corner of this page. You should see "100 x 86". The dimensions are in "pixels". A pixel is a tiny dot of color.

4. Alt = This is the alternative information that your page will display in case the picture fails to load or if the mouse hovers over the image. Hover over the header of this page. You should see "Header graphic for Lesson 3".

5. Hspace and Vspace = This allows for additional spacing in pixels around the image if you find that the text is so close that it looks tacky. Hspace is horizontal space on the right and the left side of the image. Vspace is vertical space above and below the image. For example, "hspace=5 vspace=5".

7. Border = Sometimes you want a border around the image. Usually you set this attribute to "0" for no border. The measurement is in pixels. For example, "Border=3".

8. Align = Typically, only one image and one line of the subsequent text are displayed on the same line by the browser. Sometimes you want the image to one side of the page and the text wordwrapping on the other side of the page, as I did with this gavel on the right.

   Example of all 8 attributes:
   <img src="images/gavel12.gif" width="100" height="80" hspace="3" vspace="3" border="0" align="right" alt="This is a gavel">

Additional facts:

• Valid graphics: The internet will display only images with extension of "gif" and "jpg". "GIF" is a simple image with few colors such as a logo. "JPG" is for complex colors such as a photograph. Microsoft tries to sell you on "bmp" and many more, but they all fail to be displayed by the internet!

• Background images: You will notice that this page has a background of a blue sidebar on the left. That is a background graphic. The code for background graphics must go on the BODY tag. For example, "background='images/bkstyles2.gif' ".

• Where to download free graphics: If you go to any search engine (e.g., Altavista, Lycos, Google, Yahoo, etc.) you can enter a keyword such as "graphic", "image", "background" or "clip art". You will get hundreds of links to places where you can download free graphics.

• How to download free graphics: Once you find a graphic you like, hover over it with the mouse, click with the right button of the mouse, click on something that sounds like "Save graphic as" or "Save picture as". Your computer will show you your directories. Select one you created and named "images", for example. Then click on "Save". The graphic is now on your computer for your use at will!

• Transparency and Animation: Look at the microphone at the end of this line. It appears not to be rectangular or square. It appears to be moving and animated. The designer of the graphic saved it as GIF89A, but let us discuss this at the meeting.