|
|
|
The A (anchor) tag allows us to invoke a resource out on the Web, usually an HTML page, and bring it up in our web browser window, as we have discussed. But A (anchor) tags are not restricted to invoking only HTML resources. Here is a hyper-text reference created using the A (anchor) tag, which invokes a JPEG resource; this link invokes "poppyOzma2.JPEG" which is sitting on my web server:
Code:
<a href="http://www.michaelmasumoto.com/htmlOnline/poppyOzma2.JPEG">Ozma Poppy</a>
Now, even though we can invoke an image resource using the A (anchor) tag, we can't INSERT an image into an HTML page this way; we can only create a hot-link or hyper-reference TO an image. To actually insert an image/picture into the flow of an HTML page, we need to use the IMG (image) tag.
Wherever you place an IMG tag in the flow of HTML, a picture will be inserted. The IMG tag uses a URL to locate a particular image resource on the Internet, gives the web browser information concerning the exact dimensions of the image so that space can be reserved on the page for the picture, and inserts the image into the page at the exact location of the IMG tag in the flow of HTML.
Here is an image, inserted into this HTML page:
Here is the code for the above example:
<img src="http://www.michaelmasumoto.com/htmlOnline/poppyOzma2.JPEG" width="159" height="325" />
Tag: IMG
Attributes: SRC, WIDTH, HEIGHT
Example:
<img src="http://www.michaelmasumoto.com/htmlOnline/poppyOzma2.JPEG" width="159" height="325" />
Description: Use the IMG tag to insert an image into an HTML document.
The SRC (pronounced "source") attribute value must be set to the URL for the image that you want to insert; this URL may be either absolute or relative. This attribute tells the web browser which picture is to be inserted and where that picture is located on the Internet.
The WIDTH attribute value must be set to an integer which is the width of the image, in pixels.
The HEIGHT attribute value must be set to an integer which is the height of the image, in pixels.
Note: The WIDTH and HEIGHT attributes must ALWAYS be set for the IMG tag; a web browser requires these attributes in order to reserve the correct space on the page for the picture. If you leave these attributes out of your IMG tag, some browsers will prevent any content on your HTML page following that particular image from displaying UNTIL the ENTIRE image has been downloaded from the Internet. Since you don't want your users to stare at a blank screen while the pictures are downloading, you must always set WIDTH and HEIGHT for every IMG tag.
Note: The IMG tag doesn't close. Because every tag MUST close according to the XHTML standards, a space and closing slash (/) must be inserted just before the closing bracket of the tag, as has been demonstrated in the examples above.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.