The address for this web page is:   http://fishcaro.crosswinds.net/day_12_images.htm
On to the next lesson!
Back to the COURSE SYLLABUS

12. IMAGES


(Move your cursor over the index card area, and see the neat "dancing stars"! I've made the background of the index cards darker on this page, so the stars show up better.)

To finish getting you "up to speed" on building your web page, we need to talk about inserting images (graphics). The next few lessons will explore basic aspects of dealing with graphics on the web.

INDEX CARD #12:

INTRODUCTION TO IMAGES (12a)

How are images (graphics) used on the Web? There are four primary uses for graphics on the Web:
  • to add decoration (like an illustration) or to add information (like a company logo)
  • to link to another document, as an alternative to text links
  • as an imagemap: this is more advanced, and will be discussed in a future lesson. Briefly, an imagemap is a single graphic, but as the mouse moves over different parts of the graphic, different things happen.
  • as spacing devices: many designers use "invisible" graphics to control the alignment of text or the behavior of tables
What types of graphics files can be used on the Web? A graphic should be in either GIF (Graphics Interchange Format) or JPEG (Joint Photographic Experts Group) format to be displayed by the vast majority of browsers. Also, the files must be named with the correct suffixes to be properly recognized by the browser: .gif for GIF and .jpg or .jpeg for JPEG. (A third format, PNG, will be discussed later.)

INSERTING AN IMAGE (12b)

How do I insert an image in my document? Use the standalone IMAGE tag. Here's the most basic version:
<IMG SRC="URL of graphic">

Here, IMG stands for "IMAGE" and SRC stands for "SOURCE."

For example, suppose that a picture is stored in the file "tigger.gif". Then, typing:

Here's TIGGER! <IMG SRC="tigger.gif"> Isn't he cute?

will produce the following output:
Here's TIGGER! a bouncing Tigger Isn't he cute?

Printable version of Index Card 12a

Printable version of Index Card 12b

WORKSHEET #12:

ASSIGNMENT #12:

On to the next lesson!
Back to the COURSE SYLLABUS
© 2000 Carol J.V. Fisher    All Rights Reserved