HTML Images : Java Glossary

home page go to the Java Glossary Home go to the Computer Buyer’s Glossary up jump to foot of page Google search web for more information on this topic Pinterest pin button
* 0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z (all)
©1996-2017 2008-08-03 Roedy Green of Canadian Mind Products

HTML Images

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:
Ways of Handling Images
Method How it Renders Sample HTML (Hypertext Markup Language)
Displayed
Image
aka inline, embedded		 African woman
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. click to see photograph
Thumbnail Link
to Image		 Click thumbnail for a larger image.
click to see photo

Image Displaying

Here
Img Tag parameters
Parameter Notes
<img starts an inline embedded image, that displays a picture
class="strawberry apply the CSS (Cascading Style Sheets) 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 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:
Image Alignments
Type Kosher Rendering How Supposed to Render
default demo of default alignment The quick brown fox
emailed  demo of default alignment !		 No special aligning. Inherits the aligning of its surroundings. Don’t key the word default, just leave out the alignment parameter.
bottom demo of absbottom alignment The quick brown fox
emailed  demo of bottom alignment !		 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 demo of middle alignment The quick brown fox
emailed  demo of middle alignment !		 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 demo of baseline alignment The quick brown fox
emailed  demo of baseline alignment !		 Aligns the bottom of the image with the baseline of the current line. Not an officially sanctioned value, but it is widely supported.
bottom demo of bottom alignment The quick brown fox
emailed  demo of bottom alignment !		 Aligns the bottom of the image with the baseline of the current line. This is the same as baseline.
center demo of center alignment The quick brown fox
emailed  demo of center alignment !		 Centred left/right. middle centers up/down. Not an officially sanctioned value, but it is widely supported.
left demo of left alignment The quick brown fox
emailed  demo of left alignment !		 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 demo of middle alignment The quick brown fox
emailed  demo of middle alignment !		 Aligns the baseline of the current line with the middle of the image.
right demo of right alignment The quick brown fox
emailed  demo of right alignment !		 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 demo of top alignment The quick brown fox
emailed  demo of top alignment !		 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.
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.

This page is posted
on the web at:

 http://mindprod.com/jgloss/htmlimages.html

Optional Replicator mirror
of mindprod.com
on local hard disk J:

 J:\mindprod\jgloss\htmlimages.html
Canadian Mind Products
Please the feedback from other visitors, or your own feedback about the site.
Contact Roedy. Please feel free to link to this page without explicit permission.

IP:[65.110.21.43]
Your face IP:[18.188.106.64]
You are visitor number