===========================================================================
Today on The World           Vol. 4 #165              Friday, June 26, 1998
===========================================================================

Today I'd like to take a break from the HTML tutorial and answer some
of the questions from readers so far, and clarify a few points I skimmed
over earlier in the interest of not getting sidetracked at an early
stage.  So I'm going to include all the digressions I've been saving
up for the past month and get rid of them for once and for all.

Next week: frames.  Really.

Remember that you can find the other chapters on

http://world.std.com/help/web/tutorial

for now.

(kibo)

---------------------------------------------------------------------------


HTML TUTORIAL -- CHAPTER 13 -- FILLER, Q&A, AND OTHER DEBRIS



13.1  Logical vs. physical character styles


In word processing programs, "character styles" are bold, italic,
underlined, etc.  In Chapter 1 I showed how you can style type in
HTML:


    PHYSICAL CHARACTER STYLES

    <B>...</B>     Boldface
    <I>...</I>     Italic
    <U>...</U>     Underline
    <TT>...</TT>   Typewriter
    <S>...</S>     Strike-through (crossed out;  not widely supported)
    <BLINK>...</BLINK>   Make text flash on and off;  not widely supported)


(I haven't mentioned the last two because one isn't useful and the
other is annoying when it works.)

These can go inside <P>...</P> or <TD>...</TD> or other sorts of
text container which don't imply a specific style (<PRE>...</PRE>
and <H1>...</H1> imply certain styles, so you shouldn't try changing
styles within them.)

<B> and its relatives are called "physical styles" because they
specify the appearance of the letters:  bold, italic, etc.
You may also see, on Web pages, "logical styles", which specify
the function of the letters:  emphasis, example, citation, etc.


    LOGICAL CHARACTER STYLES

    <STRONG>...</STRONG>    Strong emphasis (usually same as <B>...</B>
    <EM>...</EM>   Emphasis (usually same as <I>...</I>
    <CODE>...</CODE>    Display sample of computer code (usually <TT>...</TT>)
    <SAMP>...</SAMP>    Display sample of computer output (usually also <TT>)
    <KBD>...</KBD>      Display sample of computer input (usually also <TT>)
    <VAR>...</VAR>      Display name of a variable (usually <I>...</I>)
    <DFN>...</DFN>      A definition (not commonly supported, usually <B>)
    <CITE>...</CITE>    A citation (usually same as <I>...</I>


You can use the logical styles if you want to.  The intent of the
first version of the HTML standard was that the person viewing the
site should be able to decide how things like citations, sample output,
and so on looked, but it was quickly found that site designers preferred
to specify <B>, <I>, and so on rather than <STRONG> and <EM>.  The
logical styles are not widely used, and few browsers (other than Mosaic)
let the people viewing your site redefine them anyway.  I just wanted
to explain them so that you'll understand them when you see them in use;
just think of <STRONG> as being <B> and <EM> as being <I> from an
earlier era.



13.2   Image maps


In Chapter 4 and Chapter 5, I explained how to add images to your page,
and how to make them clickable links, as in:


    <A HREF="url"><IMG SRC="url"></A>


In Chapter 12 (forms), I mentioned image-mapping.  Because image-mapping
is useful, I'll talk about it in more detail here, although I won't
be able to explain everything you need to know here.  (You'll see why.)

An image map is simply an image which has more than one link within it --
for instance, if you have a picture of the house, maybe you could click
on the door to go inside, or maybe you could click on the window to
spy on the house with a telescope.  Or you could have a map of the world
where you could click on your home country to choose the English, French,
Spanish, or German version of the page.  (This is why these items are
called "maps", because they often are used for maps.)  The clickable
areas that go to different places are called "hot spots".

Originally these maps were implemented with CGIs (programs that run on
the Web server) combined with an image inside a form (see Chapter 12),
or with the <IMG ISMAP> option. The user would click on the image and it
would send something like "http://www.yourname.com/image.cgi?123,45" to
the server, which would then figure out what link was at coordinates 123
by 45.  These were called "server-side image maps" and they were tricky
to use, and they couldn't let the people reading your page see what was a
link to where.  I will not discuss server-side maps here, and you
probably shouldn't worry about using them.

Nowadays we have "client-side image maps", where the HTML on your page
contains the list of clickable areas for the image, so that the browser
can show the people looking at your page what goes where.  They don't
require any CGIs or customized Web server software (or separate .map
files) although they do require Web browsers that support them (all
but the very earliest ones.)  From this point on, everything I say
pertains to client-side maps.

In general, defining hot spots (which can be spots of a certain
radius, or rectangles, or arbitrary polygons) is best done with a
special-purpose map-making program (many visual HTML-editing programs
have this function built in as well, as do some drawing programs like
Macromedia Fireworks) because otherwise you're going to have to work
very hard figuring out what pairs of coordinates correspond to the
different objects in your image.  So if you want to make image maps,
look for a program that will create some HTML for you.

The HTML involved in modern client-side image map looks something like this:


    <IMG SRC="url" USEMAP="#name">
    <MAP NAME="name">
        <AREA SHAPE="POLYGON" COORDS="x1,y1 x2,y2 x3,y3 x4,y4..." HREF="url">
        <AREA SHAPE="POLYGON" COORDS="x1,y1 x2,y2 x3,y3 x4,y4..." HREF="url">
        <AREA SHAPE="POLYGON" COORDS="x1,y1 x2,y2 x3,y3 x4,y4..." HREF="url">
        <AREA SHAPE="RECTANGLE" COORDS="x1,y1 x2,y2" HREF="url">
    </MAP>


If you use image maps, it is recommended that you provide a set of text
links below the map to go to the same places, for the convenience of
people who are using text-based browsers (such as lynx, or blind people
using browsers which read the page aloud).

You can find more about image maps at the following URLs.  (If you see
any references to "server-side image maps", "ISMAP", or ".map files",
you've found an old tutorial.  You want to use client-side image maps.)


Tutorials:

http://www.personal.psu.edu/users/k/x/kxs156/tut1.htm

http://www.ihip.com/cside.html

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Imagemaps/


Programs:

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Imagemaps/Software/

http://www.yahoo.com/Computers_and_Internet/Software/Reviews/Titles/Internet/Web_Authoring_Tools/Image_Map_Editors/


MapEdit, for Windows and Mac OS:

http://www.boutell.com/mapedit/


ImageMapper (Mac OS only):

http://www.dcs.gla.ac.uk/~snaddosg/Creations/
or
http://hyperarchive.lcs.mit.edu/cgi-bin/NewSearch?key=imagemapper



13.3  Flowing text around images


Someone requested clarification regarding what I said about wrapping
text around pictures in Chapter 4, so I'll say it again in more detail.

<IMG> takes an optional ALIGN parameter.  ALIGN="TOP", "MIDDLE", or
"BOTTOM" move the image up or down relative to the line of text
it's in (i.e. the image is embedded in the text at that point, and
ALIGN controls whether it sticks up from that line or hangs down
from it.)  But the image is still embedded in a single line of text --
there will be a big gap above or below that line of text, as in


    ALIGN="BOTTOM" (default) blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah
                        +-------+
                        | IMAGE |
    blah blah blah blah +-------+ blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah


    ALIGN="MIDDLE" blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah
                        +-------+
    blah blah blah blah | IMAGE | blah blah blah blah blah blah
                        +-------+ 
    blah blah blah blah blah blah blah blah blah blah blah blah


Because this looks crummy, version 3 of the HTML standard added
ALIGN="RIGHT" and ALIGN="LEFT".  They push the image to the
left or right margin (with its top at the same level of whatever
part of the text included the <IMG> tag) and the text flows around
it like in a magazine:


    ALIGN="LEFT" blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah
    +-------+ blah blah blah blah blah blah blah blah blah blah
    | IMAGE | blah blah blah blah blah blah blah blah blah blah
    +-------+ blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah


The only catch is, you don't know how big the browser's font will
be, or how much space there will be between lines of text, and
you probably don't know how long the lines will be, so this all
adds up to not knowing exactly where that chunk of text will end.
What if the paragraph ends before the image does?


    blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah
    +-------+ blah blah blah blah blah blah blah blah blah blah
    | IMAGE | blah blah blah blah blah blah blah blah blah blah
    |       | blah blah blah blah blah blah blah blah blah blah
    |       | blah blah blah blah.
    |       |
    |       |                  PART II
    +-------+ Yadda yadda yadda yadda yadda yadda yadda yadda
    yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda


Perhaps you like that look.  Or perhaps you'd rather tell the
browser to stop wrapping text after that first paragraph so that
your "PART II" heading comes out centered without an image
next to it.  To stop wrapping, use <BR CLEAR="ALL">.  <BR> makes
a line break (if used within a paragraph) or makes a blank line
(if used between paragraphs).  The CLEAR="ALL" option means
"Hey, skip down until there is nothing to the left or the right."


    blah blah blah blah blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah blah blah blah blah
    +-------+ blah blah blah blah blah blah blah blah blah blah
    | IMAGE | blah blah blah blah blah blah blah blah blah blah
    |       | blah blah blah blah blah blah blah blah blah blah
    |       | blah blah blah blah.
    |       |
    |       | 
    +-------+ 
                              PART II
    Yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda
    yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda


If your layout needs are more specific than putting images on
the left or right margin (or centering them within <P ALIGN="CENTER">)
then you should consider putting your whole page inside a big
<TABLE>.  <IMG ALIGN="LEFT"> is a lot easier than a <TABLE>,
of course.



13.4  Character sets redux


In Chapter 11, I mentioned that to put "funny" characters (the
ones that aren't usually printed on your keyboard, such as vowels
with accent marks, curly quote marks, and so on) you should
use entities rather than typing them.

If you have a text file that already has some special Mac characters
(option-whatever) or Windows characters (alt-0XXX) I recommend changing
them to entities (alt-0XXX becomes &#XXX; [remember the semicolon]) --
see the below for lists of the numbered entities.  (Chapter 11 listed
most of the named entities.)

If you really want to just type alt-characters or option-characters,
you need to tell the Web server to tell the Web browsers which sort
of computer (or what language) you're using with a <META> directive
in the <HEAD> section of your page:


    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=mac-roman">


The first one, ISO-8859-1, aka ISO Latin-1, is the Windows character set
(more or less -- Windows actually has a few extra characters.)
The second one specifies that your document uses the Mac OS character set.
Most Web servers in English-speaking areas default to the ISO-8859-1
character set, but not all of them.  The HTTP-EQUIV header overrides
whatever the server's default is.

Note that even if your document has Mac characters in it, and you use
the <META> directive to specify Mac characters, and you view it
with a web browser in may still come out "wrong"... in one of the popular
Mac browsers.  (One of mine displays everything that uses a non-ISO-8859-1
in the system font [Charcoal or Chicago], including pages that specify
the Mac character set.)  So I'd recommend that for portability you
use entities rather than your computer's native character set.  And
then you won't have to muck around with the HTTP-EQUIV stuff.

There are also fifteen characters in the Mac character set that cannot
be displayed in Windows, and correspondingly, fifteen characters in
the Windows character set that cannot be displayed on Macs.  There's
no way around this, even if you use entities:  Where Windows has a
"1/2" in its character set, Mac OS has a capital "pi", so specifying
&frac12; or &#189; will make "1/2" on Windows computers and "PI"
on Macs.  If you need to display equations or something, maybe you should
just use an <IMG> of the equation as a GIF.


W3C specification for numbered entities:

http://www.w3.org/MarkUp/html-spec/html-spec_13.html
(At least, that's where it's supposed to be -- the W3C's own Web
site appears to be down at the moment so I couldn't check it.)


Detailed list of references on character sets, plus charts:

http://www.bbsinc.com/iso8859.html


My favorite reference on entities:

http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/entities.html


Another site which shows examples of the named and numbered entities:

http://www.uni-passau.de/~ramsch/iso8859-1.html


Documentation of HTTP headers (as in "HTTP-EQUIV"):

http://ds.internic.net/rfc/rfc1766.txt

http://ds.internic.net/rfc/rfc1945.txt

(the first two were unreachable at the moment I wrote this, but
presumably the InterNIC can't have gone away just as the W3C
can't have... ever noticed the Internet standards organizations
have the flakiest Internet connections?  The World's Online Book
Initiative has mirrors of those RFCs:)

http://ftp.std.com/obi/DARPA/rfc/rfc1766.txt

http://ftp.std.com/obi/DARPA/rfc/rfc1945.txt


General information on HTTP-EQUIV, etc.:

http://vancouver-webpages.com/META/



P.S.  I didn't even mention one of the most horrifying things about
HTTP-EQUIV:  One browser I tried parses the phrase "META HTTP-EQUIV"
even when it's not a real tag, such as in a comment:

    <!-- META HTTP-EQUIV="..." -->

...will screw up that browser.  The same bug applies to trying to
comment out <!-- BASE HREF -->.  Fun, huh?  This will not be on the test.

(kibo)

==========================================================================
[] Send suggestions for tips & URLs to today@world.std.com.
   We're also collecting links for our Web pages at eyeguy@world.std.com.
[] To contact CUSTOMER SUPPORT, send mail to support@world.std.com or
   call 617-739-0202.  
[] To subscribe to the "Today" mailing list, send a note saying 'subscribe
   announcements' to majordomo@world.std.com.
   Subscriptions to this mailing list are open to World customers only.
[] I am drinking warm Fruitopia "real fruit beverage" (with 5% juice.)
[] Today on The World is (C) Copyright 1998 by Software Tool & Die.
   Its contents may freely be redistributed as long as credit is given.