| Web Design and Development |
These are photographs, icons, pictures, cartoons, animations that you can insert into your web page that are used as backgrounds, bullets, page dividers, signposts and illustrations.
Reasons for using Images
a. to demonstrate the author's creativity
b. to add color and humor to page
c. to break text into digestible "chunks" making the page easier
to read.
d. to provide content not available via text
e. to separate content so that the reader knows when a new subject starts.
Image Consideratons
a. Copyright (asking of permission before using a particular image from
the web)
b. Resolution (The higher the resolution the better the quality)
c. Large image (It takes so much time to download a large image)
d. Size of the image (solid image and tiled image)
e. Format
Image Formats
|
GIF (Graphic Interchange Format) well known graphic format that supports 256 colors, and are best for displaying banners, clip art or buttons. JPEG (Joint Photographic Experts Group) file format that contains million colors. It is a superior format for photographic or continuous-tone images, because JPEG files can contain millions of colors. PNG (Portable Network Group) file format is a patent-free replacement for GIFs that includes support for indexed-color, gray scale, and true-color images, and alpha channel support for transparency. |
<img> tag
- It is the tag used to place an image on a web page. It has no closing
tag.
Typical Rendering:
|
<img src="image.gif" align="right"> |
Attributes Specification:
Attribute |
Value |
Description |
| src | "URL" | sets the location of the file to be inserted on a web page |
| alt | "text" | specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled |
| height | [px] | sets the height of the image (top-bottom) |
| width | [px] | sets the width of the image (left-right) |
| align | "left"/"right" | places the image horizontally within the body or table section of a web page |
| valign | "top"/"bottom" | places the image horizontally within the body or table section of a web page |
| vspace | [px] | adds space along the top and bottom of an image. |
| hspace | [px] | adds space along the left and right of an image. |
Thumbnails
These are small size (Kilobytes) pictures that link to the larger, high quality picture. To make a thumbnail save a low-quality version of a picture and make it have smaller dimensions. Now make this low-quality picture into an image link and have it point to the the high-quality picture.
Typical Rendering:
|
<a
href="image.gif"> |
Working with Images
Center an Image
| <center> <img src="pooh.jpg" width="100" height="200" > |
Add a border
| <center> <img src="pooh.jpg" width="100" height="200" border="2"> |
Provide Alternative Text
| <img src="pooh.jpg" width="130" height="200" border="2" alt="Pooh with Star"> |
Wrap Text Around an Image
The "Pooh Bear" was also very popular with
Christopher Robin, son of author A.A. Milne. It was his favourite animal
at the Zoo, and he often spent time inside the cage with it. The bear
was Christopher Robin's inspiration for calling his own teddy bear Winnie.....Winnie
the Pooh (this teddy bear started out with the name of Edward Bear).
The name Pooh originally belonged to a swan, as can be seen in the introduction
of Milne's 'When We Were Very Young'.
| <img src="pooh.jpg" width="70" height="100" border="2" alt="Pooh with Star" align="middle"> |
Wrap Text Between Two Images
The
"Pooh Bear" was also very popular with Christopher Robin, son
of
authorA.A.Milne. It was his favourite animal at the Zoo, and he often
spent time inside the cage with it.The bear wasChristopher Robin's inspiration
for calling his own teddy bear Winnie.....Winnie the Pooh (this teddy
bear started out with the name of Edward Bear). The name Pooh originally
belonged to a swan, as can be seen in the introduction of Milne's 'When
We Were Very Young'.
|
<img src="pooh.jpg" width="70" height="100" border="2" alt="Pooh with Star" align="left"> text....... <img src="pooh.jpg" width="70" height="100" border="2" alt="Pooh with Star" align="right"> |
Align an Image with Text
Winnie the
Pooh. Winnie the Pooh. Winnie the Pooh.
|
<img src="pooh.jpg" width="70" height="100" border="2" alt="Pooh with Star"> text |
Add Space Around an Image
"Winnie the Pooh"
| <img src="pooh.jpg" width="130" height="200" vspace="20" hspace="20"> |
Add a Background Image
| <table
width="74%" border="1" align="center"
height="76"> <tr> <td background="pooh.jpg" height="99"> </td> </tr> </table> |
Define Image Sizes
|
<img src="pooh.jpg" width="130"
height="200" vspace="20" hspace="20"> |