E-Content of

INTERNET TECHNOLOGY AND WEB DESIGN

Chapter : 9.8 HTML Images

Topic : 9.8.1 HTML Images

HTML Images
• Images play an important part in a web site. They make our web pages appear
more eye catching and descriptive.
• A judicious use of images with text can make your web page quite appealing.
• In the following sections we will learn how to insert images to our web pages and
how to work with them properly to make the web page impressive.
• Always use images in jpeg or gif format since most of the browsers support these
two formats.
• The <img> tag is empty, which means that it contains attributes only and it has
no closing tag.
• To display an image on a page, you need to use the src attribute. Src stands for
"source".
• The value of the src attribute is the URL of the image you want to display on your
page.
• The IMG SRC tag is used for inserting images to a web page. The syntax of
defining an image.
• Syntax:

• Not only does the source attribute specify what image to use, but where the
image is located.
• The above image, graphics/chef.gif, means that the browser will look for the
image name chef.gif in a graphics folder in the same folder as the html document
itself.
• Images are the second aspect of a pleasant web experience.
• The problems with images are legion if they are not used wisely.

Page | 70
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
• First, experienced or impatient web surfers often switch image loading off by
default, on their browsers.
• If your site relies on an image to get important information across, these people
may never see it.
• Second, loading images is a slow process and if you use too many, or your
images are too large, the download times can easily become intolerable.
• Browsers display a limited range of image types. You can only guarantee that
GIF and JPG will be displayed everywhere, although more and more browsers
are now able to display the PNG format, which was intended as a free
replacement for the GIF format when that was copyrighted.
• If you want high-quality, good compression and loss of colors use JPG, for
instance when displaying photographs.
• Generally, though GIFs are more common as they tend to be smaller files, lots of
software can manipulate them and can be animated.
Image attributes
• A picture or an image in the web page can be inserted using the <img> tag.
• The <img> tag has several attributes to inform the source, height of the picture,
width of the picture alignment etc.
 src
 Height
 Width
 Align
 alt
• src and alt
 The src attribute specifies the source of the picture. It gives the file name of
the picture file.
 The two parameters src and alt, define where to find the image and text to
display if the user agent cannot display the image (or is set not to display
images at all).

Page | 71
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
 These two parameters comprise the minimal set of parameters for any image
tag.
 Here is an example of the image tag that will insert a computer image,
computer.jpg, into a document with the alternate text "A picture of a
computer".
• Height and Width
 The height and the width may be expressed in terms of either pixels of
percentage or units. The default is the pixels.
 Syntax
o Specifies that the width of the image should be NUMBER pixels.
o If no dimensions are specified for the image, the browser will insert the
image exactly as is, at the same size as you would view it in a picture
editor on your computer.
o The picture will load slightly faster if you specify the height and width so
that the browser does not have to determine it.
o User may also find it quicker and easier to specify a specific width and
height for the image in the HTML, rather than editting and resizing the
image on the computer.
• Align
 The align attribute can be used to align the picture.
Insert Image
• User can insert any image in the web page by using <img> tag.
• The <img> tag is an empty tag, which means that it can contain only list of
attributes and it has no closing tag.

• Syntax

• To try following example, let's keep our HTML file test.htm and image file
test.png in the same directory.

Page | 72
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN
• Example program

• Output

FIG 9.32: Output of insert image

• User can use PNG, JPEG or GIF image file based on the comfort but make sure
user specify correct image file name in src attribute. Image name is always case
sensitive.
• The alt attribute is a mandatory attribute which specifies an alternate text for an
image, if the image cannot be displayed
Set Image Location
• Usually we keep all the images in a separate directory.
• So let's keep HTML file test.htm in our home directory and create a subdirectory
images inside the home directory where we will keep our image test.png.

• Example program
• So let's keep HTML file test.htm in our home directory and create a subdirectory
images inside the home directory where we will keep our image test.png.
• Assuming our image location is "image/test.png", try the following example

Page | 73
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

• Output

FIG 9.33: Output of set image location

Set Image Width/Height

• User can set image width and height based on the requirement using width and
height attributes.
• User can specify width and height of the image in terms of either pixels or
percentage of its actual size.
• Example program

• Output

Page | 74
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

FIG 9.34: Output of set image width/hieght

Set Image Border
• By default image will have a border around it, you can specify border thickness in
terms of pixels using border attribute.
• A thickness of 0 means, no border around the picture.
• Example program

• Output

FIG 9.35: Output of set image border

Set Image Alignment
• By default image will align at the left side of the page, but you can use align
attribute to set it in the center or right.
• Example program

Page | 75
 E-Content of
INTERNET TECHNOLOGY AND WEB DESIGN

• Output

FIG 9.36: Output of set image alignment

Page | 76