This lesson will teach you how to put images on your page. Images can add to the quality of a page, but they also can subtract quality. Keep in mind that you don't want to flood your page with pictures, because most people don't want to spend 5 or 10 minutes waiting for a page to load.
Images are actually pretty easy. Just like anything else, they need
a tag, parameter, and a value:
The tag: <IMG> For example, the following code:
Would put in this image: You've learned the bare minimum you need to know to put images on your
page. However, there are also many other optional parameters you could add.
The parameter: SRC
The value: "any_pic.xxx"
Put together: <IMG SRC="any_pic.xxx"><IMG SRC="tutorial.gif">
Width & Height
By specifying the width & height, the page will load a little quicker. Plus,
you could show an image at a different size than it really is. For example,
if you have an image that's 200 pixels wide and 100 pixels high (200 x 100),
you could really deform it by telling the browser to load it as 300 x 30!
Use the same format as shown above, but just add these
parameters to it before the >
WIDTH="number"
HEIGHT="number"
Everything together: <IMG SRC="any_pic.xxx" WIDTH="number HEIGHT="number">
But make sure you replace number with the actual number.
The image I used above is 376 x 60 (width x height). To show it at it's actual
size I would type <IMG SRC="tutorial.gif" WIDTH="376" HEIGHT="60">
and the image would look like this:
But suppose I want to show it at about half the size; I would type
<IMG SRC="tutorial.gif" WIDTH="188" HEIGHT="30"> and the image
would look like this:
<A HREF="html.html"><IMG SRC="tutorial.gif"></A>
The previous code will give you this:
Move the mouse over the image. Notice how it changes into a hand? That shows that it is linked. If you clicked the image, it would take you back to the Table of Contents. Also notice how it has a border around it. The border is the LINK color (or the VLINK color if it's been visited) that you learned about in Lesson 1.
BORDER=0
Added to the IMG tag: <IMG SRC="any_image.xxx" BORDER=0>
You can also specify the width of the border, if you would like one, like this:
BORDER=number
where number is a number from 0 up.
So let's take the code we previously used that linked an image to the Table of Contents:
<A HREF="html.html"><IMG SRC="tutorial.gif"></A>
Only let's take the border out:
<A HREF="html.html"><IMG SRC="tutorial.gif" BORDER=0></A>
The above code will give you this:
Notice that there is no border, but when you move the mouse over it the pointer changes to a hand to signify that it is linked. If you clicked the image it would take you to the Table of Contents.
Now lets use the exact same code, except use a border with a width of 10:
<A HREF="html.html"><IMG SRC="tutorial.gif" BORDER=10></A>
The above code will give you this:
Keep in mind that you can combine all of the parameters you've learned in this lesson. Knowing that, let's link the image at half-size with a border of 5:
<A HREF="html.html"><IMG SRC="tutorial.gif" WIDTH="188" HEIGHT="30" BORDER=5></A>
The above code will give you this:
That's about it for images. See, it's not that hard!