===========================================================================
Today on The World              Vol. 4 #153           Friday, June 12, 1998
===========================================================================

So, have you recovered from my Web interoperability rant in the previous
installment?  Back to the HTML tutorial...  now we get into the more exotic
stuff. We'll start with lists, which are not that difficult to learn.
(Next week, after a brief detour into the world of "entities", we'll
tackle a subject that baffles many HTML authors: tables.  The part about
tables will build on what I discuss today regarding lists.)

(kibo)

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



HTML TUTORIAL -- CHAPTER 7 -- LISTS



7.1  Basic lists


A "list", in HTML, is what its name implies -- a list of things, displayed
as a normal human-readable list that looks like this:


    1.  Apples
    2.  Bananas
    3.  Coconuts


You could make that out of <P>'s, but it's hard to keep everything
lined up, and of course you'd have to renumber all the items every time
you add one in the middle.  Fortunately, HTML has all sorts of tags that
make lists for you.

HTML lists count as a kind of text container, like <P>...</P>,
<H1>...</H1>, or <PRE>...</PRE>.  There are several kinds of lists (most
of which you'll never use) but they all share a common feature:
The list itself is a pair of tags (such as <UL>...</UL> or <OL>...</OL>)
containing individual list items (<LI>...</LI>).  No matter what type
of list it is, the items inside are always <LI>...</LI>.

(Note that some people do not put </LI> after each item.  While this
was permitted in early versions of the HTML standard -- when </P> was
also optional -- I suggest that you follow modern HTML style and use </LI>.)

Try adding this to any of your practice HTML pages:


    <H3>Example of "UL"</H3>
    <UL>
    <LI>Apples</LI>
    <LI>Bananas</LI>
    <LI>Coconuts</LI>
    </UL>

What does that look like in your browser?  It probably has bullets (large
dots) in front of every list item, and it's probably indented.  (Note that
these lists are displayed slightly differently in different browsers.)
Now for comparison let's add a second kind of list:


    <H3>Example of "OL"</H3>
    <OL>
    <LI>Apples</LI>
    <LI>Bananas</LI>
    <LI>Coconuts</LI>
    </OL>


View that in your browser, and note the difference.  What do you think
<UL> and <OL> stand for?

<UL> is "Unordered List", and <OL> is "Ordered List".  Note that they
both contain <LI>...</LI> pairs.  Now let's try to see what happens when
we try a more elaborate example:


    <H3>Longer Example of "OL"</H3>
    <OL>
    <LI><B>Apples</B> are a popular Earth fruit which can be red, green,
    or yellow.  Most of them run Mac OS but a few run Linux.</LI>
    <LI><B>Bananas</B> are most often used to injure clowns, after
    throwing away the fruit inside.  The names of Sid and Marty Krofft's
    "Banana Splits" were Drooper, Fleagle, Plato, and Snork.</LI>
    <LI><B>Coconuts</B> look like bowling balls, and they taste pretty
    similar to a freshly-waxed ball.  In the Marx Brothers' "Cocoanuts",
    an early "talkie", note that when Groucho reads the newspaper it's
    soaking wet, because the microphone had to be very close.</LI>
    </OL>

How is that better than just typing "1.", "2.", "3." yourself?  Notice
how the Web browser nicely indented everything to make the numbers hang
out in the left margin.  Try making your window narrower and watch the
text wrap without disturbing the column of numbers.

One of the unique features of HTML lists is that they are one of the
few kinds of tags that can be nested inside themselves.  (Quick, name
three others.  Too late.  <BLOCKQUOTE>, <BIG>, and <SMALL>.)

    <H3>Nested Example of "UL"</H3>
    <UL>
    <LI>Apples
        <UL>
        <LI>Red</LI>
        <LI>Yellow</LI>
        <LI>Green
            <UL>
            <LI>Granny Smith</LI>
            <LI>Unripe</LI>
            <LI>Moldy</LI>
            </UL>
        </LI>
        </UL>
    </LI>
    <LI>Bananas</LI>
    <LI>Coconuts</LI>
    </UL>

Wow, that's complicated-looking.  I tried to indent things to make it
clear what was happening.  Basically, each <UL>...</UL> contains only
<LI>...</LI>'s.  A couple of the <LI>...</LI>'s contain another
complete list.  So the third item under "Apples" is "Green" plus
a list.  (Find the </LI> that goes with "Green", several lines down.)
Your Web browser may use three different symbols to indicate
the three different levels of nesting here, such as large and small
bullets or boxes.  (Incidentally, if I hadn't indented the HTML above,
the Web browser would have still displayed things the same way -- the
fact that the code is indented the same way the browser displays the
lists is just me trying to make the code readable.  It could actually
have all been on one long line.)

Try changing all the <UL>s to <OL>s (don't forget to change the </UL>s
as well!) and see what happens.

Now, try this:


    <H3>Fancy Example of "OL"</H3>
    <OL TYPE="1">
    <LI>Apples
        <OL TYPE="A">
        <LI>Red</LI>
        <LI>Yellow</LI>
        <LI>Green
            <OL TYPE="i">
            <LI>Granny Smith</LI>
            <LI>Unripe</LI>
            <LI>Moldy</LI>
            </OL>
        </LI>
        </OL>
    </LI>
    <LI>Bananas</LI>
    <LI>Coconuts</LI>
    </OL>


Nesting <OL> inside itself doesn't use different number schemes for
the nested lists by default (unlike <UL>, which usually shows up
with different kinds of bullets) but <OL> does take an option to
let you specify whether you want numbers, Roman numerals, or letters
(capitals or lowercase.)  Do you see how the above <OL>s specified this?
(Older browsers may not support TYPE, as it was introduced by Netscape.)

You can also change the shape of the <UL>'s bullets in browsers that
support Netscape's tags (that is, newer versions of Netscape Navigator
and Microsoft Internet Explorer) with <UL TYPE="square">, etc.
You can also ask the browser to pack the lines of text more closely
together with <OL COMPACT> or <UL COMPACT> but many do not do anything
in this regard.

Similar to <LI>...</LI> (list items) is <LH>...</LH> (list heading).
It displays much like <LI> except without a leading bullet or
number.  (Some browsers may make it bolder than <LI>, most don't.)
Try adding this before the first <LI> of one of the other examples:


    <LH>This is a list.</LH>


It may not look thrilling, but remember that you can mark it up
with text-styling tags like <B> or <BIG>:


    <LH><BIG><B>This is a list.</B></BIG></LH>


Why isn't that just a <H1>?  Because those don't go inside lists
for the same reason they don't go inside <P>, and <P> doesn't
go inside <UL>.  Headers and lists and <P>'s are mutually exclusive
kinds of text containers.  (I keep mentioning this point because
it becomes even more important in a few chapters when we get to
tables.  Also, not nesting things inside things that they shouldn't
go in decreases the chances that your page will come out "weird"
in exotic browsers.)



7.2  Definition lists


There's one more kind of HTML list, and it's very useful, but it's
different from the others:  <DL>...</DL> is a "definition list".
Instead of containing <LI>...</LI> lines, it contains
<DT>...</DT><DD>...</DD> lines, which stand for the "definition term"
and "definition definition".  (Hey, I didn't make up this syntax.)
In other words, every line of a <DL> has two parts, and the first
is assumed to be relatively short.  Here's an example to try:


    <DL>
    <LH><B>Definition list example</B></LH>
    <DT>Apples</DT>
        <DD>are a popular Earth fruit which can be red, green,
        or yellow.  Most of them run Mac OS but a few run Linux.</DD>
    <DT>Bananas</DT>
        <DD>are most often used to injure clowns, after
        throwing away the fruit inside.  The names of Sid and Marty Krofft's
        "Banana Splits" were Drooper, Fleagle, Plato, and Snork.</DD>
    <DT>Coconuts</DT>
        <DD>look like bowling balls, and they taste pretty
        similar to a freshly-waxed ball.  In the Marx Brothers' "Cocoanuts",
        an early "talkie", note that when Groucho reads the newspaper it's
        soaking wet, because the microphone had to be very close.</DD>
    </DL>


Remember that you can put stuff like <B>, <I>, or <BIG> in part or all
of the <DT> or <DD> lines to make things stand out.  Try changing all
three items in the example <DL> to have a big <DT> and an italic <DD>, as in:


    <DT><BIG>Apples</BIG></DT>
        <DD><I>are a popular Earth fruit which can be red, green,
        or yellow.  Most of them run Mac OS but a few run Linux.</I></DD>


<DT>...</DT> and <DD>...</DD> must go together -- you can't leave out
one of them.  You can put empty ones in to do special things:


    <DL>
    <DT>Apples</DT>
        <DD></DD>
    <DT>Pears</DT>
        <DD>These fruits are known as Nature's Toothbrush and
        Nature's Other Toothbrush.</DD>
    <DT></DT>
        <DD>This is a second paragraph about apples and pears.</DD>
    </DL>


Like <UL> and <OL>, <DL> can have an optional attribute for more compact
spacing (<DL COMPACT>) in which case the <DT> is assumed to be very
short (a single word) so that the <DD> can follow on the same line.
And like <UL COMPACT> and <OL COMPACT>, <DL COMPACT> isn't supported
by most browsers (attributes like this are simply ignored by browsers
that don't understand them -- in fact, any sort of unknown or misspelled
tag is generally ignored.  A tag with an unknown option is considered
to be the tag without the option.)



7.3  Notes on lists


I didn't mention <MENU> or <DIR> (directory) list styles as most browsers
don't know about them, and the W3C has said that you should just use <UL>
instead.  (<MENU> was supposed to be an unbulleted <UL>, and <DIR> an
unbulleted <UL> in narrow columns.  Options of <UL> can be used to make
these same styles;  see the reference chart below.)  By the way, don't
confuse the <DIR> tag with the DIR option (as in <P DIR="rtl">) used for
making text run from right to left for Hebrew and Arabic.  (You'll likely
never need either <DIR> or DIR in any case.)

The list tags like <UL> and <OL>, and the <LI> tag for list items, are
supposed to take ALIGN="CENTER" or ALIGN="RIGHT" options like <P> or
<H1> but the browsers I've tried don't seem to do anything except left-
aligned lists.  Supposedly ALIGN="CENTER" is supposed to center items
within the list.




    LIST TAGS

    <UL>...</UL>      Unordered list, usually with bullets.
                      Contains only <LH>...</LH> and <LI>...</LI> lines.
        <UL PLAIN>          Without bullets.
        <UL COMPACT>        More compact spacing.
        <UL TYPE="disk">    Solid bullets (level 1).
        <UL TYPE="circle">  Hollow bullets (level 2).
        <UL TYPE="square">  Hollow squares (level 3).

    <OL>...</OL>      Ordered list, usually with numbers.
                      Contains only <LH>...</LH> and <LI>...</LI> lines.
        <OL COMPACT>        More compact spacing.
        <OL TYPE="1">       Numbers.
        <OL TYPE="A">       Capital letters.  THIS OPTION IS CASE-SENSITIVE!
        <OL TYPE="a">       Lowercase letters.
        <OL TYPE="I">       Roman numerals (capitals).
        <OL TYPE="i">       Roman numerals (lowercase).

    <MENU>...</MENU>  Menu list (plain) -- not widely used.
                          Use <UL PLAIN> instead.

    <DIR>...</DIR>    Directory list (multiple columns) -- not widely used.
                          Use <UL PLAIN WRAP="HORIZ"> instead.

    <LI>...</LI>      List item.  Use only inside <OL>...</OL> or <UL>...</UL>.

    <LH>...</LH>      List heading.  Use only in <OL>...</OL> or <UL>...</UL>.

    <DL>...</DL>      Definition list.
                      Contains only <DT>...</DT><DD>...</DD> lines (must have
                      both <DT> and <DD> on every line) or <LH>...</LH> lines.
                      Do not use <LI>...</LI>.
        <DL COMPACT>      More compact spacing, if <DT>...</DT> is very short.

    <DT>...</DT>      Definition list term.
                      First half of each line in <DL>...</DL>.

    <DD>...</DD>      Definition list definition.
                      Second half of each line in <DL>...</DL>.


(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.
[] Does anyone notice when I forget to change this line every day?
[] Today on The World is (C) Copyright 1998 by Software Tool & Die.
   Its contents may freely be redistributed as long as credit is given.