Putting images on a web page is simple. It's probably even simpler than it was for you to get the certain image onto your computer! The <IMG>, or Image tag is used when we want an image on our web page. When we use <IMG>, we do'nt need to close it with a </IMG>. To tell the browser where to load this image from, we use the SRC, or source, attribute. It looks alot like this:
<IMG SRC="jussmall.gif">
And it loads on to the page, just like this:
Note that we can use relative linking just like with in the <A> tag, like SRC="../jussmall.gif" if the image was in the directory above the current one, or SRC="pictures/jussmall.gif" if the image was in the pictures directory.
Because some browsers do'nt load images, and some people turn them off, we need a way to show them what this image is. The solution? The ALT attribute! ALT is an optional (but highly recommended) attribute. When a browser does'nt load an image, or when they are turned off, the text in ALT will be shown instead. In our <IMG> tag it's used a little like this:
<IMG SRC="mypic.gif" ALT="Check this out - It's a picture of me!">
Need more control over your image's positioning? Try using the ALIGN attribute in it! The ALIGN attribute can be used to put an image in the left, right, middle, top, or bottom of a page. Is this more choices than you're used to? Let me explain. If we add ALIGN="top" to our <IMG> tag, the browser will align the top of our image to the top of the current line. ALIGN="bottom" aligns the image to the bottom of the current line, and ALIGN="middle" aligns our image to the middle of the current line. Aligning our image to the left or right aligns it to the left margin, or right margin of the page. Got it? Ok, here's a little pop quiz. What will the following code do?
<IMG SRC="myimg.jpg" ALT="My image!" ALIGN="left">
If you said it adds the image myimg.jpg to the current page with alternate text "My image" and left aligns it, you're wrong! Heh heh, just a joke, you're correct ;).
All right! The image looks great but...Hey! What's this border doing around my picture? Oh yeah! We forgot about the BORDER attribute!
The BORDER attribute takes a number as an argument. This number will be the width of the border around your image. Quick, how do we get rid of the border with the BORDER attribute? Easy, we just set <IMG SRC="myimg.gif" BORDER="0">!
Yuuup, we've got an image on the page. But wait: why does the browser wait to load the image before displaying the rest of the page? Well, the browser does'nt automatically know how big your image is. You can give it this information (and make your pages load faster!) with the WIDTH and HEIGHT attributes. We give to the WIDTH and HEIGHT attributes the width and height of our image in pixels. So it looks like this:
<IMG SRC="newimg.gif" ALT="A new image" HEIGHT=120 WIDTH=200>
Another benefit of specifying the WIDTH and HEIGHT in the <IMG> tag is that you can make sure that the proper space is left for your image, even if the viewer has images turned off.
Is the space around your image a little cramped? Try adding the HSPACE and VSPACE attributes to your <IMG> tag. These attributes add horizontal and vertical spacing around your image.
Want an image for the background of your page? Try adding the BACKGROUND attribute to the <BODY> tag. It's used a little like the SRC attribute to the <IMG> tag. Here's and example:
<BODY BACKGROUND="mybackground.gif">
This would take mybackground.gif, and tile it in the background of our page. Be warned though, use the wrong background image and your viewers may be straining to see your text!
Think you're an HTML wizard? Ok hotshot, how do we make images into clickable links? Easy...surround them with an anchor tag! For example:
<A HREF="lesson9.html">
<IMG SRC="nextlesson.gif">
</A>
Results in this (click on it!):
