Before you start inserting images within your documents, you need to make sure it is available on the Internet, meaning that you can point the path to a valid address. Another good thing to know is the dimensions of the image. If you are not sure of the dimensions of the image you want to add, open the image with Visualizer Photo FX and look in the lower left corner of your screen. Here you will be able to see the width and height of the image. Let's try and setup an image within the document.
When using the img tag we are informing the browser that we want to add an image. The src attribute is the source that informs the browser where the image is located. As you can see I measured and added the width and height, so the correct dimensions (ratio) will be used when the image is displayed within the browser. As we have learned from the previous aritcles we need to close the tag when we are done, to inform the browser that we are done with the image.
The above example showed you the standard procedure to go about adding an image, but there are still attributes we can continue to add to our img tag. We can continue to add a border size, and we can add a hint when we mouse over the image. Worth mentioning about borders is that if we do not inform the browser about the border size, a 1 pixel border will automatically be added when we wrap a link around the image. We will learn more about adding links to an image later on in this article. First let us have a look at the border and hint attributes.
The alt attribute will let you add hints to your images. Hints can be very helpful when using icons that needs further explanation. It is not always we want to add a hint to our image(s), however, we should always make sure to add the alt attribute to keep our pages XHTML compliant. Leave the alt attribute blank in case you do not want to add a hint to an image. In the example below I have left out the hint but still made sure to keep alt attribute within my img tag. I have also changed the border size to a width of 1 pixel.
You should be aware of the color you have selected for your links will also decide the border color when you wrap a link around an image. By changing the border width to zero you can set the border to not be visible. In the next section we will learn how to wrap a link around an image and around a text.
<img src="http://www.freeimagebrowser.com/images/visualizer_logo.gif" width="57" height="49" />
When using the img tag we are informing the browser that we want to add an image. The src attribute is the source that informs the browser where the image is located. As you can see I measured and added the width and height, so the correct dimensions (ratio) will be used when the image is displayed within the browser. As we have learned from the previous aritcles we need to close the tag when we are done, to inform the browser that we are done with the image.
The above example showed you the standard procedure to go about adding an image, but there are still attributes we can continue to add to our img tag. We can continue to add a border size, and we can add a hint when we mouse over the image. Worth mentioning about borders is that if we do not inform the browser about the border size, a 1 pixel border will automatically be added when we wrap a link around the image. We will learn more about adding links to an image later on in this article. First let us have a look at the border and hint attributes.
<img src="http://www.freeimagebrowser.com/images/visualizer_logo.gif" width="57" height="49"alt="Visualizer Image Group" border="0" />
The alt attribute will let you add hints to your images. Hints can be very helpful when using icons that needs further explanation. It is not always we want to add a hint to our image(s), however, we should always make sure to add the alt attribute to keep our pages XHTML compliant. Leave the alt attribute blank in case you do not want to add a hint to an image. In the example below I have left out the hint but still made sure to keep alt attribute within my img tag. I have also changed the border size to a width of 1 pixel.
<img src="http://www.freeimagebrowser.com/images/visualizer_logo.gif" width="57" height="49"alt="" border="1" />
You should be aware of the color you have selected for your links will also decide the border color when you wrap a link around an image. By changing the border width to zero you can set the border to not be visible. In the next section we will learn how to wrap a link around an image and around a text.
