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 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 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 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 - This can help you give a little space between an image an text. However, the use of tables is more effective.

ATL tags 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 - Or 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)