Images
The <img> tag is used to display a static or animated image in your WWW document. The basic format is shown below. Note: You should enclose the image name (graphicname.gif) in quote marks as shown. Note also the closing tag (/) at the end.
Images can also be defined as the backgrounds for your WWW documents.
Click here for an example.
See the "Body" section of this guide to learn more about how to define images as the background for your WWW documents.
| Images: How They Work | |
|---|---|
|
The basic image tag is shown here. <img src="imagename.gif" width="X" height="Y" alt="* * *" /> "img src" (IMG SouRCe) signals the browser to display an image. "Imagename" is actual name of the image file. This name is entirely your choice but it is easier if the image name is descriptive of its content or use in your WWW document. Both the image name and the image extension (see below) should be enclosed in quote marks as shown here, and below. The "extension" at the end of the image name (".gif," or ".jpg") denotes the type of image file you are using. Images created other than photographically are generally given the .gif extension. Images created using photographs are generally given the .jpg extension. Both the image extension and the image name (see above) should be enclosed in quote marks as shown here, and below. The "width" attribute tells the browser the width of your image and facilitates its display. See below for more information. The "height" attribute tells the browser the height of your image. See below for more information. The "alt" attribute allows you to provide a textual description of or title for the image. See below for more information. The closing "/" closes, or ends, the image tag. This closing tag should always be used with each image. Width and Height The width and height attributes can be used inside the <img> tag to define the width and height of an image. Defining the width and height of each image helps a browser display your WWW document faster. The basic format is: <img width="x" height="y"> where the value of "x" is a number ("200" for example) equaling the desired width of the image in pixels and the value of "y" is a number ("300" for example) equaling the desired height of the image in pixels. Note: Width is always defined first, height second, and you should enclose both the width and height attributes (x) and (y) in quote marks as shown here, and below. | |
|
<img width="46" height="35" src="typewriter.gif" />
Appearance in your WWW document:
| |
|
Alt The alt attribute can be used inside the <img> tag to display an ALTernate textual descripton of the image whenever the image itself cannot be displayed by a browser. This gives your audience an idea of what they would see. The basic format is: <img alt="typewriter" />. Note: You should enclose the alt attribute (typewriter) in quote marks as shown here, and below. | |
|
<img src="typewriter.gif" alt="typewriter" />
Appearance in your WWW document:
| |
| Customizing Your Images | |
|
There are several attributes that can be used inside the <img> tag to customize your images. The attributes shown below can be used to align text and images relative to each other; to define space around the sides, top, and bottom of an image; to define a border around an image; to define the width and height of an image; and to provide an alternative textual description of an image.
Aligning Images Relative to Text By default an image is placed along the left margin of your WWW document with any text displayed to the right of that image. The align attribute can be used inside the <img> tag to align text and images relative to each other in ways different from this default. This alignment can be defined relative to the top, middlle, or bottom of the text. <img align="top"> This use of the align attribute aligns the top of an image with the top of nearby text. Note: You should enclose the align attribute (top) in quote marks as shown here, and below. | |
|
Sample text <img align="top" src="typewriter.gif" />
Appearance in your WWW document:
<img align="middle"> This use of the align attribute aligns the middle of an image with the center of nearby text. Note: You should enclose the align attribute (middle) in quote marks as shown here, and below. | |
|
Sample text <img align="middle" src="typewriter.gif" />
Appearance in your WWW document:
| |
|
<img align="bottom"> This use of the align attribute aligns the center of an image with the bottom of nearby text. Note: You should enclose the align attribute (bottom) in quote marks as shown here, and below. | |
|
Sample text <img align="bottom" src="typewriter.gif" />
Appearance in your WWW document:
| |
|
Hspace The hspace (horizontal space) attribute can be used inside the <img> tag to define space you wish to leave to the right and left of an image. The basic format is: <img hspace="x"> where the value of "x" is the desired number of pixels to be placed on either side of the image. Note: You should enclose the HSPACE attribute (x) in quote marks as shown here, and below. | |
|
Sample text<img hspace="20" src="typewriter.gif" />
Appearance in your WWW document:
| |
|
Vspace The vspace (vertical space) attribute can be used inside the <img> tag to define space you wish to leave above and below an image. The basic format is: <img vspace="x"> where the value of "x" is the desired number of pixels to be placed above and below the image. Note: You should enclose the VSPACE attribute (x) in quote marks as shown here, and below. | |
|
Sample text<img vspace="20" src="typewriter.gif" />
Appearance in your WWW document:
| |
|
Border The border attribute can be used inside the <img> tag to display a border around an image. The basic format is: <img border="x"> where the value of "x" is the desired width of the border in pixels. If you do not want a border around your image, set "x"=0. Note: You should enclose the BORDER attribute (x) in quote marks as shown here, and below. | |
|
<img border="3" src="typewriter.gif" />
Appearance in your WWW document:
| |
| All Together | |
| You can combine any, or all, of the image attributes to achieve just the effect you desire for the images in your WWW document. See the example below. | |
|
Sample text
<img width="46" height="35" border="3" hspace="20" src="../graphics/typewriter.gif" alt="typewriter" />
Appearance in your WWW document:
| |
| Troubleshooting | |
Make sure that . . .
|
