WWW images are not placed directly on a page as they are in word processing or desktop publishing documents. Instead the path to the image is placed in the HTML document.
The <IMG> tag
The HTML tag for placing a graphic on a web page is:
<IMG SRC="image.gif">
For an image file one directory up from the current directory use,
<IMG SRC="../image.gif">
To place the flower line image on this page I typed:
<IMG SRC="flowbar.gif">
This image file is in the same directory as the HTML file that makes this web page.
Centering Images
To center the image place this tag around the <IMG> tag.
<DIV ALIGN=CENTER><IMG SRC="flowbar.gif"></DIV>
The ALT Attribute
To let your readers know what the image is going to be, use the ALT attribute in the <IMG> tag, Those who use the text only browser, Lynx, will not see your image but will see the description of the picture.
<IMG SRC="flowbar.gif"ALT="[a picture of a flower bar]">
Background Images
Web pages can have background images such as the white marble background on this page. BACKGROUND="whtmarb.jpg" is added to the body tag. <BODY BACKGROUND="whtmarb.jpg">
How do you get images?
You can create them yourself with a graphics program, scan a picture, take an image with a digital camera and save images from clip art web pages on the WWW. You can "take" the flower bar image on this page by clicking the right mouse button and choosing "save image as..." Save the image file in a directory that you choose.
Take a look at our HTML Resources page for links to many sites with clipart images.
Using WIDTH and HEIGHT
Netscape extensions for width and height in pixels in the <IMG> tag help your browser to load your page faster. It is a good idea to include these two in all image tags.
<IMG SRC="donnab.jpg" align=left width=99 height=119 ALT="Donna">
You can find out the width and height by viewing "image information" in a graphics program. Netscape also gives the width and height on the top bar when the image alone is loaded on a page. |
Images as Links
Bonnie's image can also be a link to another page or perhaps a larger image. Watch the mouse arrow turn to a hand over the image. Click the mouse to activate the link.
|
<A HREF="class2.jpg"><IMG SRC="bonnie.jpg" width=99 height=123 ALIGN=LEFT></A>
|
Image and Text Alignment
ALIGN=TOP
 <IMG SRC="amyc2.jpg" ALIGN=TOP>aligns the image with the topmost part of the line.
Notice that HTML 2.0 code only allows one line of text next to the picture.
This is definitely a restriction. Netscape gets around the "one-line wrap" by adding two
new values - ALIGN=LEFT and ALIGN=RIGHT. These are shown in the cells below with the rabbit image.
|
ALIGN=MIDDLE
 <IMG SRC="susand.jpg" ALIGN=MIDDLE>aligns the image with the middle of the line.
|
ALIGN=BOTTOM
 <IMG SRC="johnm.jpg" ALIGN=BOTTOM> aligns the image with the bottom of the line.
|
ALIGN=LEFT
"It doesn't happen all at once," said the Skin Horse. "You
become. It takes a long time. That's why it doesn't often
happen to people who break easily, or have sharp edges, or
who have to be carefully kept. Generally by the time you are
Real, most of your hair has been loved off, and your eyes
drop out and you get loose in the joints and very shabby.
But these things don't matter at all, because once you are
Real you can't be ugly, except to people who don't
understand." The Velveteen Rabbit Adding ALIGN=LEFT to the image tag puts the image on the left. |
ALIGN=RIGHT
|
"It doesn't happen all at once," said the Skin Horse. "You
become. It takes a long time. That's why it doesn't often
happen to people who break easily, or have sharp edges, or
who have to be carefully kept. Generally by the time you are
Real, most of your hair has been loved off, and your eyes
drop out and you get loose in the joints and very shabby.
But these things don't matter at all, because once you are
Real you can't be ugly, except to people who don't
understand." The Velveteen Rabbit Adding ALIGN=RIGHT to the image tag puts the image on the right. |
VSPACE and HSPACE
Adding VSPACE=30 and HSPACE=30 to the image tag puts white space around the image. VSPACE is vertical space and HSPACE is horizontal space in pixels.
Hi from Karen and Ashley. We are glad that you have taken such a strong stand for the elephants' well being, but
you have to remember that there is another side to this story. To answer your first question (Do the elephants
deserve beatings?) no, of course not, but there are good reasons behind them. Elephants are massive creatures.
One simply cannot politely tell an elephant to move over and expect it to mind. Have you ever ridden an elephant?
They have incredibly thick hides, and do not feel things as other animals would. For example, if one were to train a
horse, one would use a whip. An elephant could not care less whether or not you whipped it. On the other hand,
beatings that would successfully train an elephant would probably kill a horse.
|
