Page 48 - DCAP202_Fundamentals of Web Programming

Unit 4: HTML List

4.3 Graphics to HTML Document Notes

One of the best ways to create an impact with your web page is to add some graphics. Graphics
can add color, depth and sparkle to a web page and can serve to catch the eye and retain viewer
interest.
A graphic picture can be worth a thousand words—and even more than that if it is animated.
Graphics and icons can turn a dull, drab web page into a vibrant, exciting one. An image which
is displayed on a web browser is referred to as an “inline image.”

Did u know? To place a graphic image somewhere on a page, an empty “image” tag is used.

4.3.1 IMG Attributes

<IMG> indicates that an image—such as a photograph, icon, animation, cartoon, or other
graphic—is to be displayed at that location.
The <IMG> tag should contain within it further parameters as part of the command:
 SRC= “URL/graphic.gif or .jpg”: contains the URL (Uniform Resource Locator or web
address) and name of the graphic image file, such as graphic.gif or graphic.jpg. Most
commonly, the photograph, icon, or other graphic is a “gif” (Graphics Interchange Format
image) or a “jpg” (Joint Photographic Experts Group image), both of which are recognized
by most browsers. Some browsers also will recognize a “bmp” (Bitmap image) and a “tif”
or “tiff” (Tag Image File Format image).
Usually, the location source of the graphic file is in an adjacent directory such as “graphics,”
or it possibly might be in the same directory. Assuming the image is a .jpg image, if the
graphic is in an adjacent “graphics” directory, the tag would read: <IMG SRC= “graphics/
graphic.jpg”>. If the image is located within the same directory as the document, the tag
would read simply: <IMG SRC=”graphic.jpg”>. If the location of the image is somewhere
else on the web, the tag might read something like this: <IMG SRC= “http://
www.tedmontgomery.com/tutorial/graphics/graphic.gif”>.
 A L I G N = ” L E F T ” | ” R I G H T ” | ” T O P ” | ” T E X T T O P ” | ” M I D D L E ” |
”ABSMIDDLE”|”BASELINE”|”BOTTOM”|”ABSBOTTOM”: places the graphic image
at a specified position, in relation either to the page margins or to the text. (Some browsers
will not recognize all of these parameters.)
“LEFT” aligns the image with the left margin of the page and allows text to wrap around
the right side of the image. “RIGHT” aligns the image with the right margin of the page
and allows the text to wrap around the left side of the image.
Note: The only way to center a graphic horizontally on a page is to use <CENTER> & </
CENTER> tags around the <IMG SRC> tag. However, centering a graphic in this manner
will prevent text from being wrapped around either side of it. Also, any ALIGN=”RIGHT”
or ALIGN=”LEFT parameter within the <IMG> tag will override the effect of the centering
tags. “TOP” aligns the top of the image with the top of the tallest item in the line.
“TEXTTOP” aligns the top of the image with the top of the tallest text in the line; usually,
but not always, the same as the “TOP” parameter. “MIDDLE” aligns the middle of the
image with the baseline of the current line. “ABSMIDDLE” aligns the middle of the image
with the middle of the current line. “BASELINE” aligns the bottom of the image with the
baseline of the current line. “BOTTOM” is the same as the “BASELINE” parameter.
“ABSBOTTOM” aligns the bottom of the image with the bottom of the current line; usually,
but not always, the same as the “BASELINE” or “BOTTOM” parameter.

LOVELY PROFESSIONAL UNIVERSITY 41