XHTML

Images

Images are important Purpose: to enhance your web site. Add only when they complement or

add additional impact to your message.

Images: Increase your download time. If only “neat” or “flashy” may annoy

your viewers, and take away from the content quality of you Web site.

Graphic File Formats GIF - Graphics InterChange Format JPG - Joint Photographic Expert

Group These are bitmapped. They are

created by changing the colors of individual pixels.

GIF file format

“lossless” compression (doesn’t lose quality)

maximum of 256 colors May have one color transparent. Supports transparency Can be animated Good for images with large areas of

solid colors, such as simple illustrations, logos, cartoons, etc.

JPG 16.7 million colors (called 24-bit). Better for photos, watercolor

images, pencil drawings Lossy compression

Adding Images

Image Source tag:<img src=“mypic.jpg” />

mypic.jpg is the name of a file in the same folder as the html source document being displayed.

Organizing Web Page Files A common means of

organization is to create a subdirectory for graphics files, named “images”.

To insert an image from the images folder:

source

images

<img src=“images\mypic.jpg” />

Labeling an Image alt=“text here” attribute alt stands for alternate text because

the message will appear in place of the image or in a little box whenever the mouse pointer passes over an image

Labeling an Image Example: <img src=“mypic.jpg”

alt=“Picture of me and Molly” />

Image Sizes

width=“#“and height=“#” attributes Where the # following height and width

specifies the number of pixels. Example: <img src=“mypic.jpg”

width=“50” height=“100” />

Assignment Images Exercise 1