Lesson 6

LESSON 6: Images

Image types.
Element IMG.
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.

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.

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.