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:

(W12.1) Continue with the tutorial located at: http://www.cwru.edu/help/introHTML/toc.html (link is no longer valid) Please read Chapter 7 (IMAGES), up to the ALT section. You'll finish Chapter 7 in the next day's lesson.

ASSIGNMENT #12:

(A12.1) Quickly skim pages 146 and 149–151 in the Weasel Book, to get a sense of what the <IMG> tag is all about.
Then, read pages 157–158 (from "Image Basics" up to "Linking Graphics") in the Weasel Book.
(A12.2) There are LOADS of free graphics available on the Web. Here's one of many available sites to get you started: http://www.allfree-clipart.com/ Find some graphics (here or elsewhere) that you like, and insert them into your homepage.