Including Images


Now that I've introduced you to the w3c, why don't we see what they have to say about images? As you can see, the syntax for putting an image on the page is like this:
<img src="ADDRESS">
Just like the hyperlink, the <img> tag requires an ADDRESS (or source) for where the image is. So, in principle, you can have any image from any webpage in the world appear on your web page, simply by giving the right address. However, this is a serious breach of etiquette, because to be able to load your page, the user's web browser also has to go out across the web, connect to some other machine, and download the image. It's much faster, and more polite, to keep the images that you are going to use local.

That being said, here's an exaple of an image, our very own department logo:

You can see that is the most basic way to bring up an image. There are a bunch of other attributes that can be given to the <img> tag, but the only ones that you really need are the alt and align attributes.

Let's talk about the alt attribute first. This attribute can be set equal to a text string, and will be displayed if the browser can't load the image for some reason. I'll force it to do this in the following example by giving it a filename that doesn't exist:

This would have been an image

Its always a good practice to put some info in the alt attribute for every image that you put up. That way people who surf the web without autoloading of images over their modems can tell what kind of an image it is and if its worth the wait. Additionally, for deaf users, their specialized browsers can give them the text in the alt tag but couldn't really give them an image.

Next we'll talk about the align attribute. The align attribute is used to align your image with respect to your text. Here are the possibilities:

LPL Logo align=top


LPL Logo align=bottom


LPL Logo align=middle


LPL Logo align=left


LPL Logo align=right


You don't always need to use the align attribute, but it can be helpful sometimes. Images can be placed anywhere, and in the LPL web pages, we often use Tables to organize images and text.