Graphics
The <IMG> Tag
Use the <IMG> tag to include inline images in a Web page. An inline
image appears in the page itself and does not open in a separate window
or require a helper application to display. For example
<IMG SRC="car.jpg" ALT="flamed Geo Metro car"
width="317" height="216" />
displays the image called car.jpg and alternative text "flamed
Geo Metro car". This image appears below.
The ALT attribute specifies a text alternative for the image
so when users have images turned off or are using a browser that does not
display images, they see the alternative text. The attributes for the <IMG>
tag appear below.
Attribute |
Meaning |
SRC="url" |
The source URL for the image |
ALT="text" |
Alternative text to display if the image is not loaded. Some browsers display the ALT text when the mouse is over the image. This is very important to include for all your images for accessibility reasons also. |
HEIGHT="n"
WIDTH="m" |
The height, in pixels, that the image should display. If the actual image height does not equal n, the browser will scale the image to fit the specified dimensions. Although the HEIGHT and WIDTH attributes are not required, the page will layout more quickly if they are specified. |
BORDER="n" |
Set the border pixel width around images contained within hyperlinks. If the image is a link, a blue border displays around the images unless BORDER="0" is specified |
USEMAP="url" |
Specify location of the map information for an image map
example used in img tag of flamed geo:
usemap="#Map"
example of code:
<map name="Map" id="Map">
<area shape="rect" coords="72,24,196,69" href="http://http://www.rodandcustommagazine.com" />
</map>
|
ALIGN="left,right, top, middle, or bottom" |
Specify how the image aligns with text on the same line. |
| ID="imageImportant"
example using ID for images:
#imageImportant {
float: left;
margin: 10px;
padding: 20px;
}
|
A specific name for this img tag. Useful for specifying a one time treatment of an image defined in css, or for accessibility purposes. |
CLASS="imgNormal"
example of a class for images:
.imgNormal {
margin: 10px;
padding: 5px;
} |
You could call a class you created for the way this image is displayed. |
example of defining the
IMG TAG in css:
img {
margin: 10px;
padding: 5px;
} |
If you use css, then you can specify a class for images, as you would with another tag, (ie. <H1> or <table> ) and it would affect the display of all the images in your document unless another CLASS or ID is called. If you define the treatment for the img tag in the css, you don't have to call a class or give it an ID, as long as you've linked to the css or have it in your html doc. more on css... |
|
