HTML Images
So you want to spice up your document with some pictures, eh? OK..
The main way to put an image into your document is to use the
<img> tag. It'll look a little something like
this:
<img src="some_picture.gif">
You should stick with either GIF or JPG images since most browsers support those.
There are a lot of options with the image tag. If you just stick it by itself
in your document, the text may not look quite right. It may wrap around it in a way
that you do not want. To control that, here are some name=value options.
- align= Controls the alignment of the text around the image.
- "top" Text is aligned at the top of the image
- "middle" Text is aligned at the middle of the image
- "bottom" Text is aligned at the bottom of the image
- "left" The image appears on the left side of the page with the text wrapping to the right.
- "right" The image appears on the right side of the page with the text wrapping to the left.
- alt= Specifies some alternate text. For non-graphical browsers, this is displayed instead of the image.
- border=n There is normally some breathing space around an image (normally about 5 pixels). You can change
this with the border option. n specifies the number of pixels that should be around the image. If
the image is a hyperlink, then the border will be the color of the hyperlink.
- height=n This will specify the height of the image. If the image does not fit in the given size, then
it should be resized to fit. n specifies the number of pixels.
- width=n This will specify the width of the image. If the image does not fit in the given size, then
it should be resized to fit. n specifies the number of pixels.
- hspace=n This will specify the amount of space to put on the left and right side of
the image. Unlike border, it does not change color if it is a link. n is the number of pixels to put on each side.
- vsapce=n This will specify the amount of space to put on the top and bottom of
the image. Unlike border, it does not change color if it is a link. n specifies the number of pixels to put on each side.
You can also turn the image into a hyper link. This will make it so that
when you click on the image, it will take you to another document. To do this,
just wrap the anchor tag around the image tag. It will look something like this:
<a href="some_document.html">
<img src="monkey.jpg">
</a>
OK.. Here's some examples of what the align attribute will do. Since
the example image is pretty big, try resizing the window to see how
the text wraps around..
Top
Here is some text before the image tag.
Here is some text after the image tag.
Middle
Here is some text before the image tag.
Here is some text after the image tag.
Bottom
Here is some text before the image tag.
Here is some text after the image tag.
Left
Here is some text before the image tag.
Here is some text after the image tag.
Right
Here is some text before the image tag.
Here is some text after the image tag.
You may notice that the text on the align="left"
and align="right" examples the text flows on one
side of the image (resize your window to see this). If you
use the break tag (<br>) it will NOT go to the
end of the image. It will just do a break along the side of the
image. In order to break all the way to the bottom of the image,
use the <br clear> command to do a full
break.
Return to the Front Page