CIT 230 Page

Site 5 Proof : Images

Inline Images

• Element name is img
• The src defines the "source" or location of that image file
• The alt attribute is an alternative text version of the image- you should describe the image that you see or help the user understand what the image is
  • people with poor vision
  • blind users
  • deaf users
  • mobility-impaired users
  • people with reading difficulties
• The height and width let the browser know the dimensions of the image
• Here is an example, the code for the picture below is: <img src="../Pictures/shaun football byui 2.jpg" alt="Shaun playing football for BYUI" width="180" height="338" />

GIF vs JPG vs PNG

JPEG- great for photographic images, but when used for compression the image quality is lost, also does not support transparency

GIF- great for illustrations and logos, and images with large areas of a single color, it does support transparent backgrounds

Adding Image Gallery

Example of image Gallery - in the image gallery shows bordering, captioning, and image posting

Cropping an Image

I used a program (Fireworks) to crop this image, but I know how to crop images in Picasa and other graphic converter features.

Original Picture of me

Croped Picture of me

Color change picture of me

Background Images

A repeated image background click here