Embedding Images in HTML Files
Fundamentals
Embedding an image in an HTML file is easy: use the IMG tag.
Suppose you have an image file called FLOWER.GIF that you want to display
on your page. If the image file is located in the same directory as your
HTML file, all you'd need to do is put this in your HTML file:
<IMG SRC="FLOWER.GIF">
The SRC attribute is used to specify the file ID (and optionally
the path) of your image file.
The IMG tag has several other attributes. One that you
should get into the habit of using is ALT. The ALT
attribute specifies text that will be displayed in the user's browser if the
browser isn't loading graphics files (either because it can't or because the
user has turned off image loading). For example, if you have
<IMG SRC="FLOWER.GIF" ALT="a nice flower">
then the user will see the words a nice flower if the image
isn't displayed.
Two very useful attributes of the IMG tag are
HEIGHT and WIDTH. Specifying the height and
width of your image will help display your page faster, since the browser
will not have to calculate the size of the image. Here's an example:
<IMG SRC="FLOWER.GIF" HEIGHT=100 WIDTH=110>
This tells the browser that your image is 100 pixels in height and 110
pixels in width. The browser then sets aside space for the
image, loads all the text on the page, and then goes back to load the image itself.
Not only is this faster than letting the browser do the work, but it gives people viewing
your page the option of reading the page's text even before the images load.
Note: Almost any HTML editor that allows you to
drag-and-drop an image into your HTML file will automatically
put in the correct HEIGHT and WIDTH
specifications for you.
Note: Do not make the mistake of using HEIGHT and WIDTH
to resize your images in hopes of decreasing loading time. Instead, resize the images in PSP
using Image | Resize. Using the HTML attributes to resize your images will increase
loading time, since the user's browser must not only load the full-size image but must also
calculate how to display the image in the new dimensions.
Positioning Images
There are a couple ways to affect the positioning of an image relative to
other elements on the page. The easiest, but sometimes least effective, way is to
use the ALIGN attribute of the IMG tag.
By default, text near an image is aligned with the bottom edge of the image.
You can use ALIGN to shift the alignment to either the top edge of the image
or the center:
<IMG SRC="flower.gif" ALIGN="top"> |
<IMG SRC="flower.gif" ALIGN="center"> |
|
<IMG SRC="flower.gif" ALIGN="bottom"> |
This method is fine if you have only enough text to fit with the image on
a single line, but if the text wraps to another line the results can be far
from pleasing:
|
<IMG SRC="flower.gif" ALIGN="top"> with more text...
Not very pretty is it? |
|
<IMG SRC="flower.gif" ALIGN="center"> with more text...
Not very pretty is it? |
|
<IMG SRC="flower.gif" ALIGN="bottom"> with more text...
Sorta acceptable... |
You can also use ALIGN to make sure that an image is placed to the
right or left of your text and that the text wraps around the image,
although the "floating" images sometimes seem to have a mind of their own.
If you want to give it a try, use ALIGN="left" or
ALIGN="right" with the IMG tag and see what you get.
Here's an example:
|
Here we have FLOWER.GIF displayed twice:
once toward the left of the
text and once toward the right. See how the text wraps around the two
images? I have to admit that I seldom use this technique myself,
but there certainly are places where it makes sense to try this.
|
Two other attributes of the IMG tag that help you position images
are HSPACE and VSPACE.
The HSPACE attribute lets you define
"padding" space to the left and right of your image, so that it doesn't
butt up against text or other images. VSPACE lets you do
the same thing for the top and bottom of your image. In the example above, I
used HSPACE=5 to help separate the text from the images.
This method of aligning images with text can be used to make
drop caps.
The second way to position images -- the technique I use all the time -- is to
use tables. You won't be able
to wrap text around a floating image using tables, but tables do provide you with
a pretty good means of positioning your images.
With tables you can define rows and columns for your text and images,
and you can even embed tables within tables.
I won't go into detail about how to use tables, but if you want
to learn more, head out to an HTML reference site. You can start with
Tables
in Netscape 1.1, which really says all you need to know about tables.
|
