The address for this web page is:   http://fishcaro.crosswinds.net/day_8_lists.htm
On to the next lesson!
Back to the COURSE SYLLABUS

8. LISTS

Today's lessons has TWO index cards (four sides).

INDEX CARDS #8:

INTRODUCTION TO LISTS (8a)

What types of lists are available in HTML? There are three types of lists:

  • UNORDERED (bulleted) LISTS
  • ORDERED (numbered) LISTS
  • DEFINITION LISTS

What is an UNORDERED (bulleted) LIST? An unordered list is used for a collection of related items, where the order that the items are listed is unimportant. The required structure is illustrated below: "UL" stands for "Unordered List" and "LI" stands for "List Item" (or "LIst"). Typically, list items are displayed indented, with a bullet preceding each item. (See the example in the previous question.)

<UL> 
   <LI> Each individual item gets its own "LI" tag.</LI>
   <LI> Don't omit the closing tag!</LI>
</UL>  

CHANGING THE BULLET SHAPE (8b)

Can I change the bullet shape? If you don't specify the bullet shape, then it's determined by the browser. The "disc" is the usual default: that is, if you don't specify a different shape, then you'll get the disc. You can also get a "square" or a "circle":

  • the disc
  • the square
  • the circle
Use the TYPE attribute within the <UL> tag to change the shape for ALL the list items:
<UL TYPE=square>
Or, use the TYPE attribute within a <LI> tag to change the shape for a particular list item:
<LI TYPE=circle>
The value for the attribute (disc, square, circle) MUST be all lowercase.

 

ORDERED LISTS (8c)

What is an ORDERED (numbered) LIST? An ordered list is used when the order that the items are listed is important. The structure is the same as for unordered lists, except that you use "OL" (for "Ordered List") instead of "UL."
Can I change the "numbering" scheme? Use the TYPE attribute to change the "numbering" scheme: <OL TYPE=?>   (I've used an ordered list below.)
  1. TYPE=1  (numbers) is the default
  2. TYPE=A  gives uppercase letters
  3. TYPE=a  gives lowercase letters
  4. TYPE=I  gives uppercase roman letters
  5. TYPE=i  gives lowercase roman letters
Can I change the starting "number" in the list?
<OL START=23>
   <LI> Sure! Use the START attribute inside the "OL" tag.</LI>
   <LI> Here, the first item would be 23.</LI>
</OL>

DEFINITION LISTS (8d)

What is a DEFINITION LIST? A definition list consists of term/definition pairs, as in a glossary. The structure is shown below. Here, "DL" is for "Definition List"; "DT" is for "Definition Term"; "DD" is (maybe?) for "Definition Definition."
<DL>
   <DT> Term #1</DT>
   <DD> Definition for Term #1</DD>
   <DT> Term #2</DT>
   <DD> Definition for Term #2</DD>
</DL>
The output would look like this:
Term #1
Definition for Term #1
Term #2
Definition for Term #2
Use   <DL COMPACT>   to make it more compact.

Printable version of Index Card 8a

Printable version of Index Card 8b

Printable version of Index Card 8c

Printable version of Index Card 8d

WORKSHEET #8:

ASSIGNMENT #8:

On to the next lesson!
Back to the COURSE SYLLABUS
© 2000 Carol J.V. Fisher    All Rights Reserved