LESSON 6: Images

  1. Image types.
  2. Element IMG.
  3. Examples.

1. Image types.

Two types of image files are commonly used:

---> .GIF - short for Graphics Interchange Format and pronounced jiff or giff (hard g);
---> .JPEG - short for Joint Photographic Experts Group and pronounced jay-peg.

GIF supports color and various resolutions. It also includes data compression, making it especially effective for scanned photos.

JPEG is a lossy compression technique (data compression technique in which unnecessary information is eliminated) for color images. Although it can reduce files sizes to about 5% of their normal size, some detail is lost in the compression.
Go to Top


2. Element IMG

\..........Description

The IMG element inserts an image.

\..........Syntax

<IMG
    ALIGN="left"|"right"|"top"|"middle"|"bottom"
    ALT="text"
    BORDER="pixels"
    HEIGHT="height"
    WIDTH="width"
    HSPACE="pixels"
    VSPACE="pixels"
    SRC="URI">


IMG has no end tag.

\..........Attributes

Attribute Description
ALIGN= "left"
"right"
"top"
"middle"
"bottom"
Specifies the position of the image with respect to the surrounding content.

left - the image is placed at the left margin and content flows around it;

right - the image is placed at the right margin and content flows around it;

top - the image is placed within a row of text and breaks it. The row "goes through" the top end of the image;

middle - the image is placed within a row of text and breaks it. The row "goes through" the middle of the image;

bottom - the image is placed within a row of text and breaks it. The row "goes through" the bottom end of the image;

ALT="text" Specifies the alternate text for those not loading images.
BORDER="pixels" Specifies the width of the image's border.
HEIGHT="height" Specifies the height of the image as:

pixels - (e.g. HEIGHT="20");
-OR-
percentage of window height - (e.g. HEIGHT="30%").

If omitted the image is shown in its original height.
WIDTH="width" Specifies the width of the image as:

pixels - (e.g. WIDTH="20");
-OR-
percentage of window width - (e.g. WIDTH="30%").

If omitted the image is shown in its original width.
HSPACE="pixels" Specifies the horizontal gutters around the image.
VSPACE="pixels" Specifies the vertical gutters around the image.
SRC="URI" Specifies the URI of the image.

Note: Click here for more information about URI's.

\..........Examples to see

Examples 1 and 2 demonstrate IMG attributes.
Go to Top


3. Examples

Choose an example and move below the text box to see the HTML code.

Example 1: Inserting an image.
Example 2: Aligning an image.
Preview
Go to Top