HTML 58.51A

ADDING GRAPHICS

Web Graphic Formats

• "GIF" (graphics interchange format)

• JPEG (Joint Photographic Expert Group)

GIF

• .gif

• Pronounced like the peanut butter (Jif).

• GIF files can only contain 256 colors or less.

• Used for line drawings, illustrations, type design, clip art, cartoons, and for logos!

• allows transparency and animation.

JPEGs

• .jpg

• Pronounced, jay-peg

• JPEGs are used for images with millions of colors, like photographs.

Converting Graphic Formats

• You can use PhotoShop [Mac/PC], Graphics Converter [Mac], Paint Shop Pro [PC], and L-View [PC], Fireworks and others to resize an image and convert from one graphic format to another.

• Professional non-web formats are usually in a PSD format.

The Image Tag

• <img src="logo.gif" />

• <img src=”picture.jpg”>

• Don’t forget to upload your graphic file. That is the most common mistake.

• Make sure you use all lower case for name and extensions.

Adjusting the Size

• <img src="logo.gif" width="83" height="27" />

• To keep a graphic at it’s default size, you don’t have to designate size attributes.

• Take a look at the links page to see what happens when you change the size.

• The file size will always remain the same.

Aligning Image/Text

• <img src="logo.gif" align=”top / middle / absmiddle / bottom “ />

• One thing to remember, these attributes indicate where the picture/image will be placed, in relation to the text.

• The attributes are aligning the picture, not the text.

Adding space around the Image

• Space around graphic -

• <img src ="logo.gif" vspace=”10" hspace=“10” />

• This can help you give a little space between an image an text.

• However, the use of tables is more effective.

ATL tags

• <img src=”logo.gif” alt="Company Logo" />• Atl tags are used to give short descriptions of an image.• Some people have their graphics turned off.• Used by Search engines.

• Most important, the legally blind often use text-to-speech synthesizers when browsing the Web. The synthesizer reads all the words on your page aloud, skipping the pictures.

Animated GIFS

• An animated gif takes advantage of the ability of gifs to store multiple images or frames within a single graphic file.

• This allows web designers to include animation and movement for a relatively low bandwidth.

• Just because you can easily add movement to the screen does not mean you should.

Thumbnails

• Linking Thumbnails to Larger Images -

• <a href=”mitchell-big.jpg"><img src=”mitchell-small.jpg" border=0></a>

• Or <a href=”mitchell.html"><img src="small-pic.jpg" border=0></a>

• Of course this means you are linking to another page with the bigger Image/file, but the advantage is you can format the graphic.

Image Maps

• The best way to create an Image Map is to use: Dreamweaver, GoLive, or ImageReady.

• There is also some freeware specifically for creating Image maps.

• Image maps are usually used in large descriptive images.

HomeWork

• 3-5 graphics 10 points• align text 10 points• alt tags (all) 10 points • Thumbnail to Larger image 10

points• One Animated Gif 10 points• Quiz Next week (All graphics)• Where should you be now (Final)