Graphic Images

Return to Main Page of Ted’s HTML Tutorial

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.”

To place a graphic image somewhere on a page, an empty “image” tag is used:

<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 browers 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">.

ALIGN="LEFT"|"RIGHT"|"TOP"|"TEXTTOP"|"MIDDLE"|
"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.
WIDTH="W": defines the width “W” of the image in pixels.
HEIGHT="H": defines the height “H” of the image in pixels. Note: 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). 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.

Following are six examples of graphic image alignment (and other) parameters in the HTML source code and how the image in each case would appear on a browser (some may look very similar to others). In each case, the browser is told to retrieve a file “chilippr.gif” from within a subdirectory called “graphics”:

This graphic alignment ("LEFT"):

<IMG SRC="graphics/chilippr.gif" ALIGN="LEFT" WIDTH="22" HEIGHT="16" VSPACE="5" HSPACE="5" ALT="chilipepper">The red chilipepper is a popular food product in New Mexico.  What creates the heat in this pepper is the chemical capsaicin (C18H27NO3).  When eaten, natural endorphins in the body are released which not only reduce the pain from the heat but create a feeling of general well-being. would appear this way:

The red chilipepper is a popular food product in New Mexico. What creates the heat in this pepper is the chemical capsaicin (C₁₈H₂₇NO₃). When eaten, natural endorphins in the body are released which not only reduce the pain from the heat but create a feeling of general well-being.

This graphic alignment ("RIGHT"): <IMG SRC="graphics/chilippr.gif" ALIGN="RIGHT" WIDTH="22" HEIGHT="16" VSPACE="5" HSPACE="5" ALT="chilipepper">The red chilipepper is a popular food product in New Mexico.  What creates the heat in this pepper is the chemical capsaicin (C18H27NO3).  When eaten, natural endorphins in the body are released which not only reduce the pain from the heat but create a feeling of general well-being. would appear this way:

This graphic alignment ("TEXTTOP"):

The red chilipepper<IMG SRC="graphics/chilippr.gif" ALIGN="TEXTTOP" WIDTH="22" HEIGHT="16" HSPACE="5" ALT="chilipepper">is a popular food product in New Mexico.  What creates the heat in this pepper is the chemical capsaicin (C18H27NO3).  When eaten, natural endorphins in the body are released which not only reduce the pain from the heat but create a feeling of general well-being. would appear this way: The red chilipepper

is a popular food product in New Mexico. What creates the heat in this pepper is the chemical capsaicin (C₁₈H₂₇NO₃). When eaten, natural endorphins in the body are released which not only reduce the pain from the heat but create a feeling of general well-being.

This graphic alignment ("ABSMIDDLE"):

The red chilipepper<IMG SRC="graphics/chilippr.gif" ALIGN="ABSMIDDLE" WIDTH="22" HEIGHT="16" HSPACE="5" ALT="chilipepper">is a popular food product in New Mexico.  What creates the heat in this pepper is the chemical capsaicin (C18H27NO3).  When eaten, natural endorphins in the body are released which not only reduce the pain from the heat but create a feeling of general well-being. would appear this way: The red chilipepper

This graphic alignment ("BASELINE"):

The red chilipepper<IMG SRC="graphics/chilippr.gif" ALIGN="BASELINE" WIDTH="22" HEIGHT="16" HSPACE="5" ALT="chilipepper">is a popular food product in New Mexico.  What creates the heat in this pepper is the chemical capsaicin (C18H27NO3).  When eaten, natural endorphins in the body are released which not only reduce the pain from the heat but create a feeling of general well-being. would appear this way: The red chilipepper

This graphic alignment ("ABSBOTTOM"):

The red chilipepper<IMG SRC="graphics/chilippr.gif" ALIGN="ABSBOTTOM" WIDTH="22" HEIGHT="16" HSPACE="5" ALT="chilipepper">is a popular food product in New Mexico.  What creates the heat in this pepper is the chemical capsaicin (C18H27NO3).  When eaten, natural endorphins in the body are released which not only reduce the pain from the heat but create a feeling of general well-being. would appear this way: The red chilipepper

To view and to obtain a variety of stationary and animated graphic images, go to Ted’s Collection of Graphic Images.

Proceed to Hyperlinks

Return to Main Page of Ted’s HTML Tutorial