IMG |
Images are placed in Web documents using the IMG tag. This tag is empty,
and therefore has no closing tag. The basic form of the image tag is IMG, but just
like A, IMG by itself is pointless-- it will do nothing. At the very least, you
need to let the browser know where to find the image that it's supposed to place in
the document.
This brings up an important point. Visually speaking, images are part of a Web document,
but in reality an HTML file and any graphics it refers to are actually all separate files.
In other words, one HTML file which has five graphics within it makes a total of six files
required to make the page look right. These files are all stored on a Web server, but don'
t have to all be in the same exact place. (Often, server administrators will set up separat
e directories for pictures.)
In order to make the IMG tag work, you need to use an SRC attribute. SRC stands for
"source," as in, "the source of this graphic." (One way to read a typical image tag is
"image source equals..." You'll see what I mean in a minute.) The value of SRC is the URL
of the graphic you want to have displayed on your Web page. Thus, a typical image tag will
take the form
IMG SRC="URL of graphic"
The URL of the graphic is just like the URLs used in the anchor tag (see previous chapter),
except in this case the location used is that of the graphic file. A graphic named "blat.
gif" located in the directory "pics" on the server "www.site.edu" would have the URL http:
//www.site.edu/pics/blat.gif. You can use either relative or full URLs to refer to the graph
ic file.
Okay, but how does the browser know where to put a graphic once it's been loaded? In relatio
n to the text, the browser puts a graphic wherever an image tag occurs in the document.
It will do this as though the graphic were just another piece of the text
(which, in a certain way, it is). For example, if you put an image tag between
two sentences, the browser would show the first sentence, then the graphic,
and then the second sentence right after the graphic. Thus...
Further inquiries should be directed to Jodi at x303.
IMG SRC="pix/redsquare.gif"
There will be a meeting next Tuesday night...
...will look like this:
Further inquiries should be sent to Jodi at x303. There will be a meeting next Tuesday
night...
Images can be placed almost anywhere within the body of the document. They can be between
paragraphs, within paragraphs, in list items or definition-list definitions, and even
within headings. Take a look at a few examples.
Placing images within links is also possible. To do so, merely place the IMG tag within
the anchor container. For example:
A HREF="http://www.site.net/"
IMG SRC="generic-image.gif"
/A
You can also mix in text to either side of the image, or both sides: it doesn't matter.
Let's say that you wanted to put a link to a copyright notice, and you wanted to draw
attention to the link with a small warning symbol. It might go something like this:
A HREF="tcopy.html"
IMG SRC="pix/warning.gif" Unauthorized duplication is prohibited!
/A
The above markup would then appear as:
Unauthorized duplication is prohibited!
As you can see, if you do include text within the anchor container, then it will be a
part of the anchor along with the image.
There are two other attributes to the IMG tag which should be discussed in this tutorial.
Both are less frequently used than SRC (because SRC is so essential) but each is important
in its own way. In my opinion, the more important of the two is...
|
ALT |
The ALT attribute is used to define "alternate text" for an image.
The value of ALT is author-defined text, enclosed in double-quotes, and ALT text
can be any amount of plain text, long or short. To pick one of an infinite number
of examples, a warning symbol could be marked up as follows:
IMG SRC="warning.gif" ALT="Warning!!!"
This ALT text will have no effect whatsoever in a graphical browser with image loading
turned on. So what's the point? ALT improves the display and usefulness of your document
for people who are stuck with text-only browsers such as Lynx, or who have turned image
loading off. Since these users cannot see graphics, the browser will substitute a marker
such as "[IMAGE]" for any image tag. This is, in effect, a placeholder, but a frustrating
one, since there isn't any way for the user to tell what the image is, or what it says, or
what its purpose is.
However, if ALT text has been defined, the browser will display that text instead of the
placeholder. This makes the display a lot nicer and more useful for users who can't see
the graphics, and doesn't affect users who can see graphics at all. A common trick to
make image placeholder disappear in text-only browsers is to set the ALT text to be a
single space:
IMG SRC="generic-image.gif" ALT=" "
Some people also use no space at all (ALT="") but this particular use of the ALT tag has
been known to confuse certain Web browsers, including some older, but still common,
versions of Netscape. For maximum safety, use the single-space ALT text.
Figure 1 shows two Lynx (text-based Web browser) screen-shots. The first (Figure 1a)
is of a document with a number of images that have not had any ALT text defined.
The second screen-shot (Figure 1b) is the same document, but this time the images
have been enhanced with ALT text. Notice how the use of ALT tags significantly reduces
the "clutter" in the document. If you're still somewhat confused, it may help to look
at the second screen's markup
In addition to character-based browsers, some graphical browsers will use the ALT text
if automatic image-loading has been turned off. Therefore, ALT is really more of a
consideration to the reader than it is a necessary component of the image tag, but
it is still important to the design of any intelligently constructed Web page
|
GETTING THE RIGHT FORMAT |
Before you go flying off to create the ultimate killer graphic, you need to
remember that the "universal" standard (at least for the near future) is the GIF file
format. GIF stands for Graphic Interchange Format, and all graphical browsers use that
format for in-lined images. While this may change to some degree in the future, for now,
my advice is to use GIF files in order to ensure maximum cross-browser compatibility.
Most advanced graphics programs will save to the GIF format. If they do not, they will
usually save to a format like PICT or PCX, which can then be converted using another
program. If you are not sure how to get your graphics into the GIF format, ask your
local computer graphics whiz.
As you have probably guessed, a discussion of graphics could fill up its own
tutorial-- there are issues like file sizing, when to use GIF and when to use JPEG,
transparent areas, future development, and image mapping, just for starters.
Unfortunately, I haven't enough room in this tutorial to tackle this subject. Besides,
most of it isn't about HTML, but more about style decisions, which is outside the scope
of my intent for this work. There are some good style guides available; see Appendix C for
some possibly useful links. I hate to leave you hanging like this, but as Dirty Harry once
said, "A man's got to know his limitations." Sorry.
|
