IMAGES

An image can be displayed on a webpage if the file for the image is accessible. The image file could be in the same directory as the html file calling it (simplist) or in a directory above or below the directory the image is in.

The html code to put an image on a webpage is generally...

...where 'img' is the image tag, 'align=' is an atribute where you can have "right" or "left", 'src=' indicates the source of the image file, 'width=' and 'height=' give the width and heighth in pixels and 'border=' gives the thickness of the border in pixels.

You can leave out the align part and it will be left justified unless you center it using centering tags like so...

The "align=" attribute can be used to right or left justify the image and have text wrap around it. 'align="left"' will put the image to the left of the screen and any text will be fitted along the right side of the image. Vice versa for 'align="right"'. To center the image the image use center tags like above, and leave the align attribute out.

What comes after 'source=' must be in quotes and it must indicate what directory the image file is in. In this case...

...the image file must be in the same directory as the html file since no other directory is specified.

But in the following example the html is looking in a directory one directory above the directory that the html file is in.

In the following example we are looking in a directory that is a sub-directory of the current directory (where the html file is)...

...and the name of that sub-directory is images.

You can also put a URL in the 'src=' spot. For instance...

...will pull the picture from the URL off of the internet to your page. This is not so good though because you are directing traffic to someone else's server and they may object. Also, if they're server is down or they remove that image from their images directory your image won't come in.

The width and height attributes are not necessary but are used to reserve a space for the image on the webpage until it actually downloads. Without the width and height defined the text of the webpage will come in first because it is a smaller file and then the image will eventually come in and push the text into a new position to make room for itself. With the width and height defined that space will be set aside and the text will come in around it and not be pushed to a new position. This assures that the text will come in where you wanted it to even if the picture never comes in.

The border can be left out for no border at all or can be set to border="0" for no border at all around the image. If you have a border of so many pixels wide the color of the border is going to be the color of the text as set in the body tag no matter what the font color is set to in that area of the body. So in the following code...

...setting the font color to red will not affect the color of the border around the image at all.

The following code creates the image below...

Table of Contents

IMAGES