Page 49 - DCAP202_Fundamentals of Web Programming

Fundamentals of Web Programming

Notes  WIDTH=”W”: defines the width “W” of the image in pixels.
 HEIGHT=”H”: defines the height “H” of the image in pixels.

Notes The WIDTH and HEIGHT parameters, when included in the <IMG SRC> tag, cause
each graphic image to be loaded more quickly into a browser. For a page with many
graphics, this significantly can reduce the time it takes for the page to be displayed fully.
The width and height of a graphic image can be determined by using graphic software,
such as Paint Shop Pro or Adobe Photoshop. A proportionally smaller space can be made
into which an image can fit (e.g., a 40 × 60 image into a 20 × 30 space) and still maintain a
distinct appearance. However, if an image is made to fit into a proportionally larger space
(e.g., a 40 × 60 image into a 50 × 75 space), it will appear rough and grainy.

 BORDER=”B”: creates a border around the image, with a uniform width of “B” in pixels.
(In case the image is incorporated as a hyperlink, the unvisited, active, and visited colors
of the border will be the same as that of the other text hyperlinks on the page.) The default
setting is BORDER= “2" (that is, a border 2 pixels wide).

!

Caution BORDER=”0" causes no border to be present around the hyperlink image.
 HSPACE=”H”: creates a space, with width “H” in pixels, between the image and any text
immediately to the right and/or left of it. (HSPACE means “horizontal space.”)

 VSPACE=”V”: creates a space, with height “V” in pixels, between the image and any text
immediately above and/or below it. (VSPACE means “vertical space.”)

 ALT=”alternate description”: supplies a description of the image, which will be displayed
instead of the image on non-graphical browsers. On typical graphical browsers, this
description will appear before the image has loaded and also when the arrow is placed
anywhere on the image.

 TITLE=”title”: same function as the ALT tag, which is not recognized by some browsers.
 ISMAP: indicates a server-side image map.
 USEMAP: indicates a client-side image map.

Task Illustrate the use of <IMG> tag with example.
Self Assessment

Fill in the blanks:
10. An image which is displayed on a web browser is referred to as an “...........................”
11. ...........................tag indicates that an image—such as a photograph, icon, animation, cartoon,
or other graphic—is to be displayed at that location.
12. The only way to center a graphic horizontally on a page is to use <CENTER> & </CENTER>
tags around the ........................... tag.
13. “...........................” aligns the bottom of the image with the bottom of the current line.

42 LOVELY PROFESSIONAL UNIVERSITY