HTML Images : Java Glossary

Image Techniques

You can either display a *.png, *.gif or *.jpg
image reference, or link to it so that you don’t see it unless you click the
text link, or you can display an icon or thumbnail, that when you click shows you the
big picture:

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
inline 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:

how various image alignments render.

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.

bottom

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.

middle

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 (Internet Explorer)
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 CSSmailto 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.

Note that there is no such img attribute as
valign and align=center is not officially valid, though most browsers support it.
Note the American spelling. Neither is there officially an attribute called
align=texttop or align=textop. Unfortunately, different
browsers render these alignments differently. I have found middle works best for in-lined images such as email address images.

The designers of HTML made a major blunder. They used the align tag to handle both horizontal and vertical alignment, but
you can’t control both simultaneously e.g. you cannot say
align= middle,right.