Chapter 6, Lesson 4

If you already know how to specify an in-line image, you can skip this lesson.

We're (finally) going to learn to add an image to our web page. Yeeeow-zah! This is exciting!, the moment we've all been waiting for, the moment when we move from "nerdy" to "cool"...

We assume that an image is available to the browser in the form of an image file (either GIF or JPEG formatted), and has been placed in the same directory/web space as the HTML file. We introduce a new HTML tag, the <IMG> tag. The standalone 'IMG' tag has one mandatory attribute that establishes the reference for the browser to use in locating the image file. The attribute is 'SRC=' and the reference is expected to follow the '=' sign immediately, placed in quotation marks as we've seen done with the 'HREF=' attribute of an anchor tag. Here's how it looks:

<IMG SRC="image-filename">

As in previous similar applications, the attribute 'SRC' must be separated from the tag-name 'IMG' by at least one "space", and it is best to avoid spaces around the '=' sign, and after the opening quotation mark. In the 'SRC' reference, you can use either a '.gif' or '.jpg' image filename, or you can use a full URL (like http://www......../filename.gif). As we discussed in an earlier lesson, it's probably best to use GIF image files, because not all browsers support JPEG images "inline". Notice, the 'IMG' tag has no closing tag, hence we call it "standalone"

"Inline" means that the browser places the image on the screen wherever it encounters it in the read-and-parse process, i.e., inline with the rest of the text. Let's look at some applied HTML source code:

Here's a picture of Saturn I like:  <IMG SRC="saturn1.gif">
but it may look better if I placed it after a line break, like so<BR>
<IMG SRC="saturn1.gif"><B> (a picture of Saturn)</B><P>
And here's a JPEG image (does your browser support it?)<P>
<IMG SRC="saturn1.jpg">

Here's a picture of Saturn I like: but it may look better if I placed it after a line break, like so
(a picture of Saturn)

And here's a JPEG image (does your browser support it?)

Notice how the image is placed inline with the text, right where it occurs in the HTML code. The first two images in the demo were GIF images, and the third was a JPEG image. If you didn't see the JPEG image, it's because your browser doesn't support inline JPEGs.

Adding images to your web page is akin to making a quantum leap in the presentation quality of your web page, as long as you use them judiciously, and keep them fairly small (so they don't take forever for somebody to download)

---

Overseer: Monty Northrup ... ... leave e-mail ...

---