HTML Images : Java Glossary

Image Techniques

Ways of Handling Images
Method	How it Renders	Sample HTML
Displayed Image aka inline, embedded
Text Link to Image	Click the text link to see an African woman.
Icon Link to Image	Click the camera icon to see an African woman.
Thumbnail Link to Image	Click thumbnail for a larger image.

Image Displaying

<!-- display an image --> <img
class="strawberry"
src="../image/people/africanwoman.jpg"
alt="African woman"
title="African woman with large beaded necklace"
longdesc="describeafricanwoman.txt"
width="200"
height="236"
align="top"
border="0">
<!-- usually all on one or two lines -->

Img Tag parameters
Parameter	Notes
<img	starts an inline embedded image, that displays a picture
class="strawberry	apply the CSS strawberry stylse to this element.
src="../image/people/africanwoman.jpg"	where to find the jpg, png or gif, possibly an absolute url of the form http://mindprod.com/image/people/africanwoman.jpg
alt="African Woman"	Labels the image. This is not displayed. Sometimes the alt text becomes a tool tip hoverhelp line. Used by blind people to at least know what pictures contain. You may use &entities in the alt, but not <tags.
title="African woman with large beaded necklace"	Information for the search engine spiders. They index it as if it were in-line text. It does not display. Unlike alt, you can apply title to any html element.
longdesc="describeafricanwoman.txt"	Text file containing a detailed description of the image. Primarily used by the visually impaired.
width="200"	width of the image in pixels. You may magnify or shrink, but shrinking wastes bandwidth and magnifying generates poor quality images. If you leave it out it the image will render natural size, but will render more slowly.
height="236"	width of the image in pixels. You may magnify or shrink, but shrinking wastes bandwidth and magnifying generates poor quality images. If you leave it out it the image will render natural size, but will render more slowly.
align="top"	control how the image aligns with the surrounding text. Experiment. You may be surprised. choices are: Image Alignments Type Kosher Rendering How Supposed to Render default The quick brown fox emailed ! No special aligning. Inherits the aligning of its surroundings. Don’t key the word default, just leave out the alignment parameter. absbottom The quick brown fox emailed ! Aligns the bottom of the image with the bottom of the current line(including descenders). Not an officially sanctioned value, but it is widely supported. absmiddle The quick brown fox emailed ! Aligns the middle of the current line with the middle of the image. Opera aligns with middle of text. IE aligns with middle of any text or other images on the line. Not an officially sanctioned value, but it is widely supported. baseline The quick brown fox emailed ! Aligns the bottom of the image with the baseline of the current line. Not an officially sanctioned value, but it is widely supported. bottom The quick brown fox emailed ! Aligns the bottom of the image with the baseline of the current line. This is the same as baseline. center The quick brown fox emailed ! Centred left/right. middle centers up/down. Not an officially sanctioned value, but it is widely supported. left The quick brown fox emailed ! Image will float the image to the left margin (into the next available space there), and subsequent text will wrap around the right hand side of that image. middle The quick brown fox emailed ! Aligns the baseline of the current line with the middle of the image. right The quick brown fox emailed ! Will align the image aligns with the right margin, and the text wraps around the left. Note how the images jump out of their usual order of embedding in the text. top The quick brown fox emailed ! Aligns itself with the top of the tallest item in the line. There are two images, one, a green square 20 points on a side, and one, a png email address image produced by Masker which has a transparent border around it. It is normally aligned using a CSS mailto style to tweak the position.
border="0"	no border around the image. The number is the border width in pixels. Borders are usually done with the much more detailed CSS style sheets.