| The <Image> Tag |
| The Explanation |
The HTML Code |
 Looking at the HTML code in the right column we will dissect each attribute. In the following sections we will explain some of the many ways Images can be used to spice up a web page and add important visual information for your visitor. |
<img src="Computer.gif" width="64" Height="64" border="0" alt="Computer Image" title="Computer Geek" align="left"> |
IMG SRC="Computer.gif"
The IMG is the opening tag for identifying an inline image. The SRC="....." identifies the MIME Type for this element, in this case a GIF image.
In this example the SRC is pointing to a relative URL location that is in the same folder (directory) as your working document. The SRC could also point to an absolute location by including SRC="http:
//www.mysite.com/images/Computer.gif". |
<img src="Computer.gif"> , or
<img SRC="http:
//www.mysite.com/images/Computer.gif"> |
|
Width="64" Height="64"
The Width and Height attributes are not required to display an image, but without using them the browser must wait until the image file has downloaded and then calculate the image dimensions before displaying the image or any other page content. By going the extra step in including these attributes your visitor will see your entire web page much faster. |
<img src="Computer.gif" width="64" Height="64"> |
|
The Width and Height values are the physical dimensions of the image in pixels. You must know these values, and have your image sized correctly for your web page before including these attributes. Using the Width and Height attributes to re-size a larger image defeats the purpose of using these attributes. If the image is too large to begin with, and you use the size attributes to resize the image on your web page, the browser will resize the image, but your visitor will have to wait for the browser to calculate and perform this function. |
|
Border="0"
The Border attribute sets a line around the image, a square box, that can look like a basic frame, however when images are used as a hyper link the box changes color in relation to the link status.
The Border value is in pixels. See the example in the right column. |
<img src="Computer.gif" width="64" Height="64" border="0">
<img src="Computer.gif" width="64" Height="64" border="5"> |
|
Alt="Computer Image" Title="Computer Geek"
The Alt and Title attributes are used as independent attributes to supply additional information when a browser renders a web page. The ALT attribute is included to provide a text note about the image when the browser is set to not allow images, or when a text only browser is used. The TITLE attribute is used to provide a "Tool Tip" with additional information about the image when the mouse rests in the image. Both attributes can be used to include "Keywords" for search engines to index. |
<img src="Computer.gif" width="64" Height="64" border="0" alt="Computer Image" title="Computer Geek"> |
|
The Align Attribute
The Align"...." attribute has the following values; TOP, MIDDLE, BOTTOM for vertical alignment; and LEFT, RIGHT for horizontal alignment. This alignment is in reference to any text included within the HTML container (window or table). When using the Align attribute with text, the text will wrap around the image much like a newspaper column with a picture. |
<img src="Computer.gif" width="64" Height="64" border="0" alt="Computer Image" title="Computer Geek" align="left"> |
Examples Using The Align Attribute
These examples employ all of the Align values, you can use these values on your working document, and you can exchange the absolute positioning of the image to text content. In other words you can have your image tag first then your text, or you can have your text first followed by the image tag. Using these alternate methods you can achieve different effects in your web page. |
Image First With Align="Left"
These examples employ all of the Align values, you can use these values on your working document, and you can exchange the absolute positioning of the image to text content. In other words you can have your image tag first then your text, or you can have your text first followed by the image tag. Using these alternate methods you can achieve different effects in your web page. |
Image First With Align="Right"
These examples employ all of the Align values, you can use these values on your working document, and you can exchange the absolute positioning of the image to text content. In other words you can have your image tag first then your text, or you can have your text first followed by the image tag. Using these alternate methods you can achieve different effects in your web page. |
Image First With Align="Top"
These examples employ all of the Align values, you can use these values on your working document, and you can exchange the absolute positioning of the image to text content. In other words you can have your image tag first then your text, or you can have your text first followed by the image tag. Using these alternate methods you can achieve different effects in your web page. |
Image First With Align="Middle"
These examples employ all of the Align values, you can use these values on your working document, and you can exchange the absolute positioning of the image to text content. In other words you can have your image tag first then your text, or you can have your text first followed by the image tag. Using these alternate methods you can achieve different effects in your web page. |
Image First With Align="Bottom"
These examples employ all of the Align values, you can use these values on your working document, and you can exchange the absolute positioning of the image to text content. In other words you can have your image tag first then your text, or you can have your text first followed by the image tag. Using these alternate methods you can achieve different effects in your web page. |
Text First With Align="Right"
These examples employ all of the Align values, you can use these values on your working document, and you can exchange the absolute positioning of the image to text content. In other words you can have your image tag first then your text, or you can have your text first followed by the image tag. Using these alternate methods you can achieve different effects in your web page. |
Text First With Align="Left"
These examples employ all of the Align values, you can use these values on your working document, and you can exchange the absolute positioning of the image to text content. In other words you can have your image tag first then your text, or you can have your text first followed by the image tag. Using these alternate methods you can achieve different effects in your web page. |
Text First With Align="middle"
These examples employ all of the Align values, you can use these values on your working document, and you can exchange the absolute positioning of the image to text content. In other words you can have your image tag first then your text, or you can have your text first followed by the image tag. Using these alternate methods you can achieve different effects in your web page. |
Text First With Align="Top"
These examples employ all of the Align values, you can use these values on your working document, and you can exchange the absolute positioning of the image to text content. In other words you can have your image tag first then your text, or you can have your text first followed by the image tag. Using these alternate methods you can achieve different effects in your web page. |
The Sample code. |
|
