Let's look at some working examples. The first is an example of what I call the "bare bones" image tag and it looks like this.
 indicates that the code is wrapped to a second line and should really be all on one line.
Example 1. As you can see the only attributes that are specified are the width, height, and alt. Therefore the browser will use the defaults for all the other attributes. The first image of Clicker in this example is a simple image and not a link button (also called a hyperlink). So the browser has not placed a border around this image. The second image of Clicker is a link button. If you click on it, you will just be returned to this page. So don't bother. But it shows how the browser automatically puts a border around any image that functions as a link button. To override the automatic border, you have to add the attribute/value pair of border="0". That is what I have done for the third image of Clicker in this example. In the following examples I have placed a one pixel wide border (border="1") around each image so that you can better see the effects of the other attributes. Example 2. You can control the vertical space between the image and the surrounding text with the vspace attribute. In this second example, I have used the following code to add 20 pixels of space above and below the image.
indicates that the code is wrapped to a second line and should really be all on one line.
Example 3. Now for the third example, you are probably one step ahead of me and have figured out how to add a space on the right and left of the image. You would use the hspace attribute to control the horizontal space.
indicates that the code is wrapped to a second line and should really be all on one line.
Example 4. This example demonstrates how to control the vertical alignment of the first line of text in relation to the image. Depending on the image and the neighboring text, you may want to place this line at the top, middle or bottom of the image. You will use the align attribute to do this. As you can see this only controls the first line of text.
indicates that the code is wrapped to a second line and should really be all on one line.
Example 5. The last example demonstrates how to align the image either to the right or left margin. Again you would use the align attribute to do this.
indicates that the code is wrapped to a second line and should really be all on one line.
Example 5 As you can see you can have a lot of control of how the image is displayed on your webpages. ← Back | | ||||||||||||||||||
Save to Del.icio.us
