HTML Lesson 3

Lists, Colors and Special Characters

There are three types of lists supported by HTML, which are best understood by looking at some examples.

Ordered List

  1. Ordered Lists (OL) - commonly called numbered lists. This list is an example of an ordered list. The items in a list are tagged as list items (LI). This particular item is very long so you can see how a wrapped item is rendered (displayed).
  2. Unordered Lists (UL) - commonly called bulleted lists.
  3. Definition Lists (DL)

By default, ordered lists are numbered with arabic numbers. However, a TYPE attribute can be used to specify alternative numbering styles. The TYPE attributes allowed in an OL are displayed here in an UL (I'm sure that helps make things clearer:)

Unordered List

For both ordered and unordered lists, the coding structure looks like this (with the OL being replaced by UL for a bulleted list):

<OL TYPE="a">
    <LI>1st Item</LI>
    <LI>2nd Item</LI>
</OL>

For all three types of lists, a COMPACT attribute can also be specified as a hint to the user agent (browser) to render lists in a more compact style.

A TYPE attribute can also be specified for an unordered lists, the three types one can specify are: disc, square, and circle. However, browsers do not always render these differently, let's see what yours does with these 4 separate lists, each with a single list item:

Definition List

enclave \EN-klayv\ (noun)
: a distinct territorial, cultural, or social unit enclosed within or as if within foreign territory
euphuism \YOO-fyuh-wih-zum\ (noun)
1 : an elegant Elizabethan literary style marked by excessive use of balance, antithesis, and alliteration and by frequent use of similes drawn from mythology and nature *2 : artificial elegance of language
expatriate \eks-PAY-tree-ayt or eks-PAY-tree-ut\ (noun)
: one who lives in a foreign country; specifically : one who has renounced his native country

Definition lists have a coding structure which looks like:

  <DL>
    <DT> term name </DT>
    <DD> term definition </DD>
    ...
  </DL>

DT elements can only act as containers for text level elements, while DD elements can hold block level elements as well, excluding headings and address elements. Common text level elements include: EM, I, B and FONT (character emphasis), A (hypertext links), IMG and APPLET (embedded objects) and BR (line breaks).

Nested Lists

It is valid to nest lists, but be careful about what Tidy does to them. Here's an example of a nested list. Use View Source to see it's coding. Note the potential problem which occurs if you run Tidy on this page: same example after running Tidy. This second version doesn't display correctly in all browsers, what about yours? This is why it is important to have at least two or three major browsers (recommendations)installed on you machine if you are going to develop HTML code. Review your pages in all of them. (NoteTab makes it very easy to review a page you are editing in both a primary and a secondary browser.)

Colors

The BODY tag can be used to specify a background color for a page, the default color for text appearing in the page, and the colors for links you've visited, links you haven't visited and the active link. These colors are specified as the amount of red, green and blue mixed together to make the color. To further confuse things the amounts are values between 0 and 255, expressed in hex meaning they go from 0 to FF. The easiest way to see what this all means is to play with a color picker:

The PageTutor one is the best, but probably won't work if you've turned off pop-up windows. The BODY tag can also specify a background image to appear on a page. The image is tiled, meaning it is repeated over and over, both left to right and top to bottom. For example, consider this dance image which, when used as a background with a BODY command like:

  <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#336699" VLINK="#990000"
        ALINK="#990000" BACKGROUND="pix/background1.gif">

looks like this: Dance-Addiction. Notice on that page the link colors have been set to match the color of the buttons and the graphic used as the page title. (When picking background colors, you should limit yourself to the 216 non-dithering ones which appear the same on both PC's and Mac's. Juliet wanted a very light yellow color for her background, but didn't like the only one available. She ended up using the image as a background because it gave her the kind of light color she was looking for to complement the design of her page.)

Special Characters

Special characters must be used to represent characters which the page rendering program would otherwise confuse with coding specifications. There are lots of special characters, but the most important ones are:

     &nbsp;     non-breaking space
     &lt;       <   --  less-than symbol
     &gt;       >   --  greater-than symbol
     &amp;      &   --  ampersand
     &quot;     "   --  quotation mark

Special characters can either be specified as above, with a "&" and a ";" surrounding the accepted abbreviation (in lower case) for the character. Special characters can also be specified as &#...; where the three dots are replaced by the numeric value of the character in a table of valid characters (for example, &#39; should always be used to represent a single quote.) NOTE: Special characters can be the source of many problems. Some renders do not recognize all the character abbreviations, and some of the numeric values only work on systems running Windows. The only solution seems to be to review your pages in the environments most of your readers will be using. (For example, one of my daughters uses neither a Windows PC nor a Mac to surf the Web, instead she uses a Unix browser and found many "typos" in the Dance-Addiction site above which were really special characters her browser didn't recognize. In that case, the solution was to change the special Windows characters to the corresponding "&abbrev;".)

Extra spaces and/or blank lines in an HTML document are usually ignored. The non-breaking space (&nbsp;) is used to insert extra space, but the use of lots of non-breaking spaces is usually not good coding practice; there are usually better ways to accomplish your goal (for example, tables.) Here is a fairly complete list of special characters with both the abbreviation and numeric values for most. NOTE: If you are running a non-Windows OS, please report any differences you see between this list and the one after running Tidy.


Copyright 2001 by Wren McMains

Cherryfield.net Resources

Go back to Lesson 2

Go on to Lesson 4

Back to the HTML Basics Index