Oct 20, 2011
admin
Comments Off on Working with Images in HTML Documents

Working with Images in HTML Documents

Images in html are defined with the tag <img>. The position of <img> tag in html page declares the position of an image on the page to the browser. It is the position where image will appear when browser loads the web page.

<img> tag has different attributes which specify the source, name, placement, height and width of image and alternate text for the image.

Different attributes defining images in html page with their examples are listed below:

src attribute stands for source of image. Source of image is must for displaying an image. Basically src attribute defines the web address of the image that html designer wants to display. While writing src attribute of image, always keep in mind that address of the image is case sensitive.

Example below shows the syntax for using source attribute of the image1 in html programming. In this example, image1and html file reside in the same directory. So the html designer can just write the image name i.e. image1

<img src=”image1.gif”>

Otherwise html designer has to write image address followed by image name i.e.

<img src=” http://www.imagesource.com/images/image1.gif“>

It is best to place the images; an html designer wants to put in its html page, within main file directory as   a subdirectory called “subdirimages”. This will make  the designer’s  job of calling the image bit easier by  just writing the name of subdirimages prior to image name, i.e.: /subdirimages/imagename.gif.

<img src=”: /subdirimages /image1.gif”>

image.gif image attribute defines the name of the image. GIF followed by dot presents the format of the image. GIF is an acronym for Graphics Interchange Format. These days different type of image formats i.e. jpeg, .jpg, .gif, .bmp and .png are supported by web browsers.

center: By default images are aligned left as the text in an HTML page. To place image at the center of the page, center attribute is used around the img attribute as mentioned below:

<center>
<img src=”http://www.HTMLurladdress/imagesorce/imagename.jpg” />

</center>

 

Width attribute is used for defining width of the image. By default its value is specified in pixels. Its value can range from 1 pixel to a value less than width of the browser.

Height attribute is used for defining height of the image. By default its value is specified in pixels. Its value can range from 1 pixel to a value less than height of the browser.

Width and height attributes of the image are very important ones. They are usually ignored by many designers. If html designer has specified width and height of image, then while page loading, the space for image is reserved. Otherwise the browser does not know the size of the image which may increase loading time of page.

The example below defines the width of 32 pixels and height of 32 pixels for image, name image1, residing in the same directory where html file is.

<img src=”image1.gif” WIDTH=32 HEIGHT=32>

alt attribute stands for “alternate text”. If browser for slow network connection or image unavailability cannot find the image, browser will just display this text. This alternate text is also visible when page viewer puts mouse over the image.

The example below defines image alternate information as landscape for image, name image1, residing in the same directory where html file is.

<img src=”image1.gif” ALT=” landscape” >

Pages:1234567...26»