Add ALTERNATIVE texts to our Images in HTML

We can add an alternative text to an image using the ALT setting shown in the example below:

<img src="http://www.yahoo.com/rainbow.gif" alt = "This is a text that goes with the image">

We should always add alternative texts to our images, so the users can get an idea of what the image is about before it is loaded. This becomes particularly important if the image is a link. Few things are as annoying as knowing that we want to leave the current page - and at the same time being forced to wait for an image to load before being able to do so. It is extremely temping to use the browser's straightforward options to leave the entire site instead.

Border around the images in HTML

We can add a border to the image using the border setting shown in the example below:

Note:
Netscape browsers will only show the border if the image is a link.

<img src="http://www.yahoo.com/rainbow.gif" border = "5">

Adding a border to our image might help the visitor recognize that the image is a link. However, the net is filled with images that work as links and have no borders indicating it - so the average visitor is used to letting the mouse run over images to see if they are links.

Still - If we have an image that is often mistaken we might consider adding a border to it - although we should probably consider changing the image entirely - since if it does not indicate by itself that it is a link then it isn't serving it's purpose.

Resizing Images in HTML

Resizing

We can change the size of an image using the width and height attributes. In general, it is not advisable to reduce image size using these settings, since the image will transferred over the Internet in its original size no matter what reduction is set for it. This will slow the loading of our web page. This means, that if we have an image that is bigger in size than we want it to be on our page, we should reduce the size in a graphics program, rather than reducing the size on the web page using the width and height attributes.

On the contrary, sometimes, it cab be wise to enlarge images using this technique.

Below are two setting of images using width and height attributes:

<img src="http://www.yahoo.com/rainbow.gif" width="60" height="60">

<img src="http://www.yahoo.com/rainbow.gif" width="120" height="120">

If we leave out the settings for width and height, the browser will automatically use the real size of the image. However, we should always enter the settings for width and height, even when using the real size!

The reason is that if the settings are left out, the browser can not build the page until the image is loaded entirely. This means, that the visitor cannot read text around the image while the image itself is loading - which in turn will give the visitor an impression of a slow loading page. This becomes especially true if the image is inside a table. In that case, the whole table will not be shown until the image is loaded entirely.

Inserting Images in HTML

The tag used to insert an image is called .

Here is the HTML code used to insert the image on the web page:

<img src = "http://www.anybodycanmaster-computer-network.blogspot.com/rainbow.gif">

By using above tag we will see the image called "rainbow.gif" in our web page.

If the image is stored in the same folder as the HTML page, we can leave out the domain reference http://www.anybodycanmaster-computer-network.blogspot.com/

and simply insert the image with this code:

<img src="rainbow.gif">