(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".
Here's TIGGER! <IMG SRC="tigger.gif"> Isn't he cute?
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.
(A12.1) Quickly skim pages 146 and 149151 in the Weasel Book, to get a sense of what the
<IMG> tag is all about.
Then, read pages 157158 (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: