2e. Images

The basic parameter for a picture, technically referred to as an image, is <img>. But that by itself isn't enough to get a picture to show up.

The first thing you need to know is where the picture you want is. You can use images you find online, and give a whole URL (web address), but that's not nice if you're going to be accessing someone else's picture every time someone looks at your webiste. The neighborly thing for you to do is to download the picture (you can usually just right-click on it and say "save image") and upload it to your own webspace.

You specify where the image is with the src (short for "source") parameter, as follows:

<img src="mypicture.jpg">

If the picture is not in the same directory, but say one directory up and in your images directory, you tell your browser where it is like this:

<img src="../../images/broccoli.jpg">

But maybe you don't want your picture dead-center. You can stick in an align tag, just like for paragrahps. The cool thing about using alignment parameters for images is that if pictures are aligned to the left or right (i.e., not center), then text will wrap around them, which is useful and makes your page prettier and easier to read. Suppose I want my broccoli picture in the middle of the screen though. I say:

<img src="../../images/broccoli.jpg" align=center>

While we're being good neighbors, we might want to consider the fate of those who are either on really old computers and can't load pictures, or are just choosing to use text-based browsers (a lot of geeks like this). They can't see that there's a picture of broccoli there, so it's nice to tell them that. This is also part of what google's image search uses when it looks for pictures, and it's also what shows up in some browsers when you put your mouse on top of the image, or if you've specified the image source wrong, and it can't find the picture. For this you can use an alt tag (short for "alternative text").

<img src="../../images/broccoli.jpg" align=center alt="broccoli">

(On some browsers, the centering thing doesn't work so well, so you might need to coax it along by putting <center> tags around it.)