Just don't ignore people using text-based browsers!
Lynx will display the ALT string instead of that generic [IMAGE]. Some graphical browsers, such as Netscape, will also display the ALT strings when image loading is turned off.<IMG SRC="image URL" ALT="alternate text"...>
To make a text-based browser completely ignore the image,
use ALT="".
This is good for strictly decorative images that should be invisible
in Lynx or another browser that can't display them.
Example:
<IMG SRC="thingy.gif" WIDTH=100 HEIGHT=80 ALT="">
Otherwise, use ALT to specify an appropriate string.
For ordinary images, give a concise description.
Someone (perhaps using a text-based browser) may wish to download the image.
Example:
<IMG SRC="pics/squid1.gif" WIDTH=50 HEIGHT=50
ALT="[Blue-green squid at night]">
If the image is a bullet, use something like ALT="*";
if it's a separator line, something like
ALT="----------------------------";
if it's a "button" link, something like ALT="[Next]";
and so forth.
But this requires the user to select two links, one to get the menu, another to choose the specific item. It's simpler to avoid imagemaps altogether.
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
gives the most compact table possible, with no space between the items.
<IMAGE SRC="..." BORDER=0>
eliminates the usual colored border around an image that's also a link.
![[ Squids ]](stest1.gif){kind=small} | ![[ Walruses ]](stest2.gif){kind=small} | ![[ Frogs ]](stest3.gif){kind=small} |
[ Squids ] [ Walruses ] [ Frogs ]Anyone, using any browser, can follow individual links presented this way.
UseFor example:HEIGHTandWIDTHattributes in yourIMGspecification.
<IMG SRC="pics/squid2.gif" WIDTH=63 HEIGHT=50
ALT="[Blue-green squid]">
With this width and height information, a good graphical browser can lay out the entire page and display the text before retrieving the graphics, which can take quite some time over a modem. (Without width and height information given, it has to load each image to determine its size, and may not display anything further until then.)
You should give the actual size of your image in pixels.
(If you give a different size,
some browsers will stretch or shrink the image to fit, others won't.)
You can find the image's size in most graphics manipulation programs
and some browsers.
(Netscape will display something like "GIF image - 63x50 pixels"
in the title area if you open the image itself.)
If you're using tables to control vertical and horizontal layout
in general (rather than precisely lining up columns of numbers
and things),
it is possible to design pages that look their best in a
table-capable browser, yet also make sense and look good in a
"table-challenged" browser.
<BR> and <P>
in the right places, so that
the page would still be usable if the table tags weren't there.
Think how you'd read the table aloud to someone. Then arrange your information in that same order.
If you would read it left to right, row by row, a regular table with separate rows is fine.
But if you would read down each column,
use a single table row,
using line breaks or nested tables to create
the vertical structure within each <TD>
Table Data element.
In other words, arrange it as if you couldn't use
tables; then put the fancy table formatting on top of that.
Line breaks (<BR>) at the ends of table elements
won't affect the table layout, but can make it more readable on a
"table-challenged" browser.
The Curtis Organ Timeline uses a two-column table to separate the dates from their corresponding events. In a "table-challenged" browser, it simply looks like a series of paragraphs.
Bruce's Recipe Book is supposed to look like two facing pages from a recipe book. (The ingredient listings are themselves tables within the main table's "pages".) If the browser doesn't support tables, it will look like two recipes, one after the other.
This letter and response is supposed to have a column of small pictures to the right of the first letter ("Dear Mr. Bruce"). In a "table-challenged" browser, the small pictures form a single row below the first letter. Again, this uses nested tables:
<PRE> ... </PRE>
to present text in a fixed-
Using nonstandard features is not dangerous if what you do is ignored in browsers that don't handle it. Just don't depend on the features being there for everyone.
For example, Netscape recognizes the<WBR>"Word BReak" tag, which indicates that it is allowed to break the line at that point if necessary. This is good for extremely-long- hyphenated- compound words. If a browser doesn't recognize <WBR>, the result is no worse than if<WBR>weren't there.
<EM> ... </EM>
and <STRONG> ... </STRONG>
directives)
differently from normal text.
These
logical styles,
which describe the logical function of the text,
are more universally supported than "physical styles" such as
boldface (<B>)
or italics (<I>),
which may not do anything on a browser that cannot display
boldface or italics.
Most browsers will also do something reasonable with other logical styles
such as
citations (<CITE>),
sample code (<CODE>), and
keyboard input (<KBD>).
Text color by itself may not be reliable
for marking certain pieces of text,
especially now that some people may be reading your pages
on a monochrome palmtop computer.
A web page using frames can also specify material
(between <NOFRAMES> and
</NOFRAMES> tags)
to be displayed in a "frames-challenged" browser.
USE THIS FEATURE to display a frameless version of your page,
perhaps a copy of your main frame or your table-of-contents frame.
Let people using frames-capable browsers be impressed by your layout and design. People using other browsers shouldn't know what they're missing, and can instead be impressed by the content you provide.
If your design can use frames, it is considerate to
give people a choice of using frames or not.
(The code
"
TARGET="_top">
breaks out of any frames and displays the new page
in the entire browser window.)
Also see what it looks like in text vs. graphical browsers,
and table-
Remember -- well-designed web pages impress your readers with
carefully chosen content and ease of use, no matter which browser
people use to read them.