Including Images in Web Pages
Graphics files come in many different formats, indicated by the extension to the file name. For instance, the native Windows graphics format is BMP; most scanners scan images into the computer in TIFF format; almost every graphics program has its own native format. Most Web browsers can display images in GIF format and in JPEG format. The latest browser versions can also display the new PNG format which was specially created for the Web. We'll learn more about them all in the graphics tutorial.
You can include a graphic in a Web page in one of two ways.
- External images are simply files that are
linked to via an <A HREF...> link, like any
other file: for instance: <A
HREF="mypicture.gif">My picture</A>.
this produces a link: my
picture and clicking on it will bring the image
as a separate file (go ahead, try!). You usually use
external images when the picture is too big to
include comfortably on the page, or it would take too
long and you want to warn the user of this, or you
have too many pictures (for instance, a picture
gallery). They were dealt with in the tutorial on links.
- Inline images are images that appear in the Web page together with the text: for instance, all those little icons and buttons, and little pictures just for decoration.
This tutorial is all about inline images.
Transfer speed:
Even though the images are all seen together along with the text, each is a separate file. It takes time to find them, transfer them and calculate where in the page they should appear; therefore including images slows down the initial display of the page. Also, a browser typically can only transfer 4 files at a time; if you have 20 little icons, buttons, etc. in a page, it will take a while to transfer the page even if each image is only 1K.
So the general rule is: don't have more graphics than you need, and keep the file size as small as possible. The total size for all components of a page together should ideally be under 30K, but this is often hard to achieve. A lot of graphics work is concerned with how to cut the file size and still keep the image looking good.
The Image Tag
To include an image in a web document, you need to use an
image tag, <IMG SRC="address">,
where "address" is the address and name of a given
image file. It can be a relative or absolute address,
following the rules for
relative and absolute addresses given in the tutorial on
links. For instance:
<IMG SRC="images/books.gif">
produces:
FrontPage and most other HTML editors
have a button to insert inline images, and usually they
automatically calculate the size of the image and add the
attributes "height" and "width", giving
the size in pixels, like this:
<IMG SRC="images/books.gif" width=150 height=113>
If your HTML editor doesn't do that, you should read off
the width and height of your graphic in your graphics editor
and insert them by hand. If the size of the image is
specified in advance, the browser can leave room for it and
start writing the text of the page, filling in the image as
it arrives. The result is that the user gets the impression
that the page is downloading much faster. If the browser
doesn't know how much room to leave for each image until the
image has been transferred, it can't start writing the text
until all the images have arrived. So the user is left
staring at a blank screen for too long.
Now let's try to put some text beside the image. If I write:
<IMG SRC="images/books.gif">This is a nice big picture of a book so I can fit several lines of text in beside it, on the right hand side, and that's exactly what I am trying to do now.
What I actually get is:
This
is a nice big picture of a book so I can fit several lines of
text in beside it, on the right hand side, and that's exactly
what I am trying to do now.
To tell the browser to put the text on the right of the picture, I actually have to say "put the picture to the left of the text". I do it with an "align" attribute in the IMG tag:
<IMG SRC="images/books.gif" align="left">This is a nice big picture of a book so I can fit several lines of text in beside it, on the right hand side, and that's exactly what I am trying to do now.
That gives me:
This
is a nice big picture of a book so I can fit several lines of
text in beside it, on the right hand side, and that's exactly
what I am trying to do now.
Similarly I can use align="right". In fact there are many values for "align": (bottom, middle, top, absmiddle, absbottom, texttop as well as right and left). FrontPage and other HTML editors give you a drop-down menu of them when you insert a picture. Most of them are intended to give you finer control of where the text starts relative to the height of the image. Unfortunately they only work if you're aligning a picture with a single line of text. The moment the text wraps to another line, it carries on underneath the picture. The only command that will wrap multiple lines at the side of your picture is the attribute align="left" (or align="right") and then the text starts from the top of the picture. To get it to start lower down, just insert line breaks: <BR><BR> -- as many as you need -- before it.
If you're wrapping text around an image and you don't want the following paragraph to wrap even though there is room for it beside the image, insert at the end of the text you want to wrap, the command <BR clear="all">. This forces a line break, and specifies that nothing else (eg the picture) should be placed either to the left or the right of the following text. (It also prevents unwanted text wrapping around tables that don't occupy the full width of the line).
If you want the text to wrap on both the left and the right (i.e. you want 3 columns, with the picture in the middle column) you'll have to do it with tables: the "align" attribute of the <IMG> command isn't developed enough to cover it.
Finally, you will probably want a
little empty space between the text and the picture. You can
get it with the hspace=number
attribute, where "number" is the amount of space
you want between text and picture, in pixels. 5 to 10 pixels
usually looks OK.In the last picture displayed above, I used
a value of hspace=5:
<IMG src="images/books.gif" hspace=5 align="left">.
Similarly, vspace=number allows you to regulate the vertical spacing of the image relative to the text beside it.
Displaying text instead of images
Some World Wide Web browsers, such as Lynx, cannot display images. And some people turn off the image display in order to speed up page transfer over a slow connection. The browser puts in an icon or the text [IMAGE] to indicate that there is an image there, but the user needs to know what the image is and what its function is.
You tell the user that by adding to the IMG tag the
attribute ALT ("alternate text" i.e. text to be
displayed instead of the image when the image can't be
displayed). Like this:
<IMG SRC="images/books.gif"
ALT="Pile of books">
A graphical web browser will display the image as usual; a text-only browser, or one that is set not to display images, will display the words "Pile of books" instead.
Using Images as Hypertext Links
To make an image "clickable", ie to use it as a hypertext link, you simply include the <IMG> tag in your <A HREF> link, instead of text. For instance:
<A HREF="http://israweb.co.il/judyk/etext.html"><IMG src="images/books.gif" alt="link to E-texts"></A>
produces:
Usually you get a border around the image, in the color you're using to indicate links (the default is blue, as here). If you don't want the border, include the attribute border=0 in your <IMG> tag, along with all the others. The image will probably look much nicer, but remember that people won't know it's a hyperlink unless they put the mouse on it and see the cursor change shape. Of course if the image is a button or icon or navigation bar, it's pretty obvious that it's a link, even without the border.
As you can guess, you can also get a border of any size you want, for instance:
I've given this picture a 20-pixel border: the
command was: <IMG border="20" src="images/books.gif">
Mind you, I'm not sure why..
|
 |
 |
 |
 |
