HTML Web Images

These images have had their width and height attribute values added to speed rendering of the page.

1. Image Types
2. Elements and Text Attributes
3. Visual Attributes
4. Alignments and Backgrounds

1: Image Types

GIF (Graphics Interchange Format)

JPEG (Joint Photographic Experts Group)

1. Image Types
2. Elements and Text Attributes
3. Visual Attributes
4. Alignments and Backgrounds

2: Elements and Text Attributes

Alternative Text

Spacer with Empty Alt

Ornament with Empty Alt

Long Descriptions

Title Text

1. Image Types
2. Elements and Text Attributes
3. Visual Attributes
4. Alignments and Backgrounds

3: Visual Attributes

Pixel Sizes

Scaling Up

Scaling Down

Stretching

Hi! this is a narrow, 10-pixel table held open by a wide, thin, shim image.

Border

No Border on Link

(Notice that these three images are all on one line.)

Spaces

Aligned left with 10 pixel space on each edge

Percentage Scaling (Sidebar)

1. Image Types
2. Elements and Text Attributes
3. Visual Attributes
4. Alignments and Backgrounds

4: Alignments and Backgrounds

Left

This text will be on the right side of the image, and will flow under the image when the next line makes it possible.

The break tag : <br clear="all"> is used to get everything flowing vertically again.

Right

This text will be on the left side of the image, and will flow under the image when the next line makes it possible.

The break tag : <br clear="all"> is used to get everything flowing vertically again.

Center (division)

Table with Image and Caption

Caption text here

Table Background (Sidebar)

Nested Tables

Page Background Image

A page with a background image

1. Image Types
2. Elements and Text Attributes
3. Visual Attributes
4. Alignments and Backgrounds