Images
Article ID: KB101481
Images are defined with the empty IMG element and its SRC
attribute. Here's an example of the most basic IMG tag that you'll see:
<IMG SRC="yourimage.gif">
Below are some of the attributes of the IMG tag.
| IMG - attributes |
src
="[url]" |
The "src" attribute should
point to the location of the image file. |
alt
="Text description of picture" |
The "alt" attribute allows
you to put a short description of the picture in text. This is highly
recommended, since it helps search engines to accurately look at your
site and helps your site to meet accessibility criteria. |
longdesc
="[url]" |
The "longdesc" attribute
allows you to link to a page that has a longer description of the
picture in text. For example, if your picture uses an image map to link
to other pages, you may want to link to a simple page that contains text
links. If your picture is a graph or diagram, you may want to link to a
page that describes the graph or diagram. |
name
="oneWord" |
The "name" attribute is
usually used for scripting purposes. For example, if you are using
JavaScript to refer to the image, you will want to give it a name (no
spaces). |
height
="[pixels]" |
The "height" attribute allows
you to define the height, in pixels, of the display size of the image.
This is highly recommended, since it helps the browser to "reserve
space" for the picture. |
width
="[pixels]" |
The "width" attribute allows
you to define the width, in pixels, of the display size of the image.
This is highly recommended, since it helps the browser to "reserve
space" for the picture. |
usemap
="[target]" |
The "usemap" attribute is
used when you are defining an image map. This attribute will be
discussed more later. |
border*
="[pixels]" |
The "border" attribute is
used to define the border of an image. You can set this to "0" if you
don't want a border.
*This attribute is deprecated because you can define
this using style sheets. |
align*
="left"
="right"
="top"
="bottom"
="middle" |
The "align" attribute is used
to define the alignment of an image with respect to the text.
Setting "align" to "left" or "right" means that the
image will go to the left or right of the page, with the rest of the
surrounding elements wrapping around it.
Setting "align" to "top," "bottom," or "middle" only
sets the vertical alignment of the image with respect to the text line
that it's in. |
Image URL
The "src" attribute points to the location of the image. If the image is in
the same folder, then you only have to put the filename of the image - for
example, "logo.gif". But if the image is in a subfolder called "images," you'll
have to put the pathname -- for example, "images/logo.gif".
Putting it all together...
Here's a sample page using this code below:
<p>Here is an image with width, height, border, and alt description
defined:</p>
<p>
<img border="0" src="../../images/logo.gif" alt="PixelMill - your home for web
templates, powerpoint templates, and more!" width="167" height="63"></p>
<p>In Internet Explorer, hold your mouse over the image to see the alt
description.</p>
<p>
<img border="0" src="../../images/logo_100.gif" width="100" height="38"
align="left" alt="PixelMill Logo aligned left.">Here
is an image that is aligned "left." See how the text flows around the
image.</p>
<p>
<img border="0" src="../../images/logo_100.gif" alt="PixelMill Logo aligned
right." width="100" height="38" align="right">Here
is an image that is aligned "right." The text also flows around this
image.</p>
<p>Here is an image that is aligned "middle."
<img border="0" src="../../images/logo_100.gif" alt="PixelMill Logo aligned
middle." width="100" height="38" align="middle">It
stays in the middle of the line. Text does not really "flow" around
this
picture, but simply drops down to another line.</p>
<p>Here is an image with a border of 2:
<img border="2" src="../../images/logo_100.gif" alt="PixelMill Logo with border
of 2." width="100" height="38"></p>
See live example!
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1065/kb101481.htm
permalink to this article:
http://www.pixelmill.com/support/kb101481.htm
Back to top