e-pixs.com -- HTML Tutorial Placing Images in Web Pages

The IMG Tag
<IMG>	The tag to the left is called the image tag. It is a stand alone tag, doesn't require a closing tag. The only attribute that is required in the IMG tag is SRC=. SRC stands for source.
Here's a quick and dirty example (the tag is red, the attribute is blue and the URL¹ is green): <IMG SRC=http://www.e-pixs.com/pics/bye.gif> Thats all that is required to display an image on the internet. But, there are many useful attributes that can be used in the IMG tag. The next chart shows and explains them breifly. Go to the practice board and try it. Remember, you can copy and paste examples into the practice board to try them out. ¹ URL stands for Uniform Resource Locator. It is the digital equivalent to a postal address. The URL of any file lets the web page you are viewing know where to go to download and/or display the file(s).

The IMG Tag

<IMG>

The tag to the left is called the image tag. It is a stand alone tag, doesn't require a closing tag. The only attribute that is required in the IMG tag is SRC=. SRC stands for source.

Here's a quick and dirty example (the tag is red, the attribute is blue and the URL¹ is green):

<IMG SRC=http://www.e-pixs.com/pics/bye.gif>

Thats all that is required to display an image on the internet. But, there are many useful attributes that can be used in the IMG tag. The next chart shows and explains them breifly.
Go to the practice board and try it. Remember, you can copy and paste examples into the practice board to try them out.

¹ URL stands for Uniform Resource Locator. It is the digital equivalent to a postal address. The URL of any file lets the web page you are viewing know where to go to download and/or display the file(s).

The IMG Tag Attributes

Attribute Req. or Opt. Purpose
SRC= Required The SRC= attribute lets the web page know where to get the image file from. Either a URL if called from a remote server or from a sub-directory if called from the same server. More on this in a moment.
ALIGN= Optional The align attribute does what you might think. It helps to align the image on a web page. Values can be: LEFT, RIGHT, TOP, BOTTOM, MIDDLE and for Internet Explorer, ABSMIDDLE.
LEFT and RIGHT will place images in the left or right margin of a web page in relation to all other elements on the page. TOP, BOTTOM, MIDDLE and ABSMIDDLE align the image to any subsequent text that is on the web page. With practice you will learn to understand which value is best to use in any given web page.
WIDTH= Optional This attribute is best used to help speed up the displaying of an image file. When the browser knows the exact dimensions of an image it reserves that space then formats the rest of the web page elements around it. The value you place here is the pixel dimension of the image, for example: WIDTH=300. If you do not know the dimension you can leave this attribute blank or not include it at all. You can also control the display size of an image this way. Maybe the image is 600 pixels wide. You can put 400 in the width attribute and the browser will scale down, or scale up a smaller image to this size. Should be used sparingly for this purpose. Image editing softwear will resize an image much better than a browser will.
HEIGHT= Optional Same as the WIDTH attribute above.
ALT= Optional You use this attribute to display a text message or description about the image, or anything you want to really. The text must be framed with quotations. Any attribute variable, in any tag, that has spaces in it must be framed with quotes. More about this in the examples below.
HSPACE= Optional Leaves a space equal to the value, in pixels, to the left and right of an image.
VSPACE= Optional Leaves a space equal to the value, in pixels, at the top and bottom of an image.
BORDER= Optional Creates a black border around an image equal in value, in pixels, around all sides of an image. (All the blank examples below use a BORDER=1 value).
NAME= Optional Used when an image file needs a specific name to identify it from other IMG tags. Commonly used with the "OnMouseOver" "OnMouseOut" "OnClick" events.

The IMG Tag Attributes
Attribute	Req. or Opt.	Purpose
SRC=	Required	The SRC= attribute lets the web page know where to get the image file from. Either a URL if called from a remote server or from a sub-directory if called from the same server. More on this in a moment.
ALIGN=	Optional	The align attribute does what you might think. It helps to align the image on a web page. Values can be: LEFT, RIGHT, TOP, BOTTOM, MIDDLE and for Internet Explorer, ABSMIDDLE. LEFT and RIGHT will place images in the left or right margin of a web page in relation to all other elements on the page. TOP, BOTTOM, MIDDLE and ABSMIDDLE align the image to any subsequent text that is on the web page. With practice you will learn to understand which value is best to use in any given web page.
WIDTH=	Optional	This attribute is best used to help speed up the displaying of an image file. When the browser knows the exact dimensions of an image it reserves that space then formats the rest of the web page elements around it. The value you place here is the pixel dimension of the image, for example: WIDTH=300. If you do not know the dimension you can leave this attribute blank or not include it at all. You can also control the display size of an image this way. Maybe the image is 600 pixels wide. You can put 400 in the width attribute and the browser will scale down, or scale up a smaller image to this size. Should be used sparingly for this purpose. Image editing softwear will resize an image much better than a browser will.
HEIGHT=	Optional	Same as the WIDTH attribute above.
ALT=	Optional	You use this attribute to display a text message or description about the image, or anything you want to really. The text must be framed with quotations. Any attribute variable, in any tag, that has spaces in it must be framed with quotes. More about this in the examples below.
HSPACE=	Optional	Leaves a space equal to the value, in pixels, to the left and right of an image.
VSPACE=	Optional	Leaves a space equal to the value, in pixels, at the top and bottom of an image.
BORDER=	Optional	Creates a black border around an image equal in value, in pixels, around all sides of an image. (All the blank examples below use a BORDER=1 value).
NAME=	Optional	Used when an image file needs a specific name to identify it from other IMG tags. Commonly used with the "OnMouseOver" "OnMouseOut" "OnClick" events.

A few more points about using the IMG tag. The attributes can be in any order after the IMG part. Attributes are not case sensitive, they can be all upper or all lower case, or even mixed. The URL is case sensitive. It must be entered in the IMG tag exactly as it is entered in the directory where it is stored. You can put something like this and they will all display the same:

<IMG SRC=http://www.e-pixs.com/pics/bye.gif ALIGN=right width=55 height=68>
<IMG width=55 height=68 SRC=http://www.e-pixs.com/pics/bye.gif align=right>
Got to the practice board and try it.
As mentioned above, if the image you wish to display is not stored on the same server (computer) in the same or lower level directory as the current web site/page you are viewing, you must use the full URL of the image. Like the above example of the little guy waving good bye. But really, because that image is stored in a lower level (or sub directory) of this web site you could use the short, or sub directory URL which for the above image is: pics/bye.gif. So the IMG tag would look like this:
<IMG SRC=pics/bye.gif>. And to prove it here it is using that very URL-
In the boxes below are some examples using the ALIGN attribute. Instead of displaying an image though, I'm going to use a blank position where an image would be, and using the ALT attribute as explained above, I'm going to put some text in the box where the image would display. (Internet Explorer and AOL users will beable to see the ALT text in the boxes. Netscape users may not.) This way you can see how the ALIGN values affect image placement. Lets look.

Pretty cool huh? You can put text between two images using the ALIGN=LEFT and RIGHT.

The source code, the HTML, for the above image placement looks like this:
<IMG SRC=blank.gif border=1 width=200 height=100 alt="This is ALIGN=LEFT Puts the image as far to the left as possible on the web page. Since this image is inside of this pink table, it can only go as far as the table allows." align=left>
<IMG SRC=blank.gif border=1 width=200 height=100 alt="This is ALIGN=RIGHT Puts the image as far to right as possible on the web page. Since this image is inside of this pink table, it can only go as far as the table allows." align=right>
<font size=-1>Pretty cool huh? You can put text between two images using the ALIGN=LEFT and RIGHT.
(Above formatting and boldness is just to make it easier to read the code. The code could be typed out in one long continous line).
Got to the practice board and try it.

Here's the same images but now I have used the HSPACE= attribute with a value of 20, HSPACE=20. You can see that more space, 20 pixels, has been left as a margin on both sides of the images.

This is what you would call the subsequent text.It comes right before and after the IMG SRC tag in the source code of the HTML document. But you see how it drops the very next line of text all the way below the image? Best used when you really need the text aligned right to the top of the image but the text line is very short so you don't get this funky layout.

The source code, the HTML, for the above image placement looks like this:
<font size=-1>This is what you would call the subsequent text.
<img src=blank.gif border=1 width=120 height=120 align=top alt="here is an image using ALIGN=TOP. This only aligns an image to the subsequent text.">
It comes right before and after the IMG SRC tag in the source code of the HTML document. But you see how it drops the very next line of text all the way below the image? Best used when you really need the text aligned right to the top of the image but the text line is very short so you don't get this funky layout.
Note that in the first source code example above, the IMG tags come before any text. But in this example, the IMG tag is inserted right into the line of code where you want the image file to display. Change the align=top to middle, bottom or absmiddle (for Internet Explorer only) to try differnet alingments.
(Above formatting and boldness is just to make it easier to read the code. The code could be typed out in one long continous line).
Got to the practice board and try it.

This is what you would call the subsequent text.It comes right before and after the IMG SRC tag in the source code of the HTML document. But you see how it drops the very next line of text all the way below the image? Best used when you really need the text aligned to the middle of the image but the text line is very short so you don't get this funky layout.

This is what you would call the subsequent text.It comes right before and after the IMG SRC tag in the source code of the HTML document. But you see how it drops the very next line of text all the way below the image? Best used when you really need the text aligned to the bottom of the image but the text line is very short so you don't get this funky layout.

Practice board
Lesson One: Text and fonts
Lesson Three: Making Links and Mailto Links

Quick Start
What is HTML?
Text and Fonts
Using Images
Making Links and Mailto Links
Making Lists
Tables, the key to well designed HTML documents
Examples of Tables
Color Chart by Name
Hexadecimal Color Chart

Practice board

The Joy of HTML

Placing Images in web pages