- Adding images to your page is as easy as adding links to it. In
fact, the HTML code for it is very similar.
| Unlike the anchor tag, however, your document is
not replaced by the referenced image. Instead, the web server
retrieves the image and actually sets it "within" the HTML document in
which the reference occurs and displays them both together. |
- Specifically, you will use the <IMG> tag to load images into
your HTML document.
- Like the anchor tag, you never really use the IMG tag without any
attributes. Instead, you will use one of several attributes.
- The attribute you will most often use, however, is the SRC attribute that specifics the location of an image that you would like incorporated into your HTML document.
- Thus, the following code would retrieve the image named
"ball_red_icon.gif", that is located at "www.eff.org" in the
"Icons/Balls" directory and would insert it into the HTML document.
<IMG SRC = "http://www.eff.org/Icons/Balls/ball_red_icon.gif">
- One final note about referencing images. It is very possible that
someone will be viewing your page in a non-graphical way. Perhaps they
are blind. Perhaps they have turned off image loading to speed up their
browsing (since images take a long time to load up). Or perhaps they
are using a non-graphical web browser like LYNX.
- Whatever the case, it is considered good form to always include a
value for the ALT attribute in the IMG tag. The ALT attribute
specifies some text that will be displayed if the image cannot be and
looks like the following:
<IMG SRC = "http://www.eff.org/Icons/Balls/ball_red_icon.gif"
ALT = "[*]">
- The IMG tag has several other attributes that we will discuss in
the next few pages, but that we will include in the following table
here:
| Attribute |
Description |
Example |
| ALIGN |
Aligns text around an image in a word wrap style. Can be TOP,
MIDDLE, BOTTOM, RIGHT or LEFT. |
<IMG SRC = "x.gif" ALIGN = "LEFT"> |
| ALT |
Specifies text that should be displayed if the user cannot see
images. |
<IMG SRC = "x.gif" ALT = "x"> |
| BORDER |
Specifies the pixel size of the border that surrounds the image |
<IMG SRC = "x.gif" BORDER = "10"> |
| HEIGHT |
Specifies the height of the image in pixels |
<IMG SRC = "x.gif" HEIGHT = "202"> |
| HSPACE |
Specifies the horizontal margin around the image in pixels |
<IMG SRC = "x.gif" HSPACE = "5"> |
| SRC |
Specifies the source of the image that should be displayed |
<IMG SRC = "x.gif"> |
| VSPACE |
Specifies the vertical margin around the image in pixels |
<IMG SRC = "x.gif" VSPACE = "5"> |
| WIDTH |
Specifies the width of the image in pixels |
<IMG SRC = "x.gif" WIDTH = "202"> |
Previous Page |
Next Page
|