Images are always a plus point in your website. They highlight the effect of the contents. so it is very important that you use them properly.

<img /> tag is used to place an image on your web page.

the src attribute takes the address of the image to be displayed and the browser shows the image in its place.

Example:

• <img src=”sunset.gif” />

Image:

Image src

Src stands for source, the source of the image or more appropriately, the address of the image.

We can use local images as well as the global images. ie. we can use the images inside our domin with a relative address or we can use an image at some other location or some other website by providing the exact or the complete URL.

The first one is called relative addressing, and the second is called absolute addressing.

URL Types:

With relative addressing you will have to keep everything in your domain only which means a lot of space requirement

whereas in absolute adressing you don’t need to worry about the space in your domain. But absolute addressing poses a problem if the web master(s) of the other site happen to change the physical location of the picture file.

The decision depends on you, which factor to consider.

Alternative Attribute

Whenever you use images and graphics on your website it makes the loading of the page slow.sometimes the browser doesn’t support the content you have put there, in such cases the area remains blank and the user doesn’t know anything what goes there.

In such cases we use the alt attribute.

The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image, or if a user has image files disabled. Text only browsers also depend on the alt attribute since they cannot display pictures.

Example:

• <img src=”http://example.com/brokenlink/sunset.gif” alt=”Beautiful Sunset” />

Alternative Text:

The Alt Attribute

The alt attribute is used to define an “alternate text” for an image. The value of the alt attribute is an author-defined text:

The “alt” attribute tells the reader what he or she is missing on a page if the browser can’t load images. The browser will then display the alternate text instead of the image. It is a good practice to include the “alt” attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

Image Tags

Image Height and Width

You can define the height and width of the image, rather than letting the browser compute the size.

height and width attributes of an image element helps in providing the width and height you want to give tou your image.

Example:

• <img src=”sunset.gif” height=”50″ width=”100″>

By informing the browser of the image dimensions it knows to set aside a place for that image. Without defining an image’s dimensions your site may load poorly; text and other images will be moved around when the browser finally figures out how big the picture is supposed to be and then makes room for the picture.

---

[Translate]