How to...Make HTML Lists

"How To" documents are step-by-step explanations for performing certain common tasks. For broader and more detailed Help documentation, as well as "Quick Guides," visit the Help Main Menu.

The Task: Use the Presentation module or Table Maker module to create an HTML "unordered list" (also known as a "bulleted list") or "ordered list"

1. Log into your CATE account. Go to the Presentation module or Table Maker module.

A. Presentations: Go to the Presentation module. Go to a presentation and within that presentation go to a page. On that page go to a block. (Or create a new presentation, page, and/or block.)

B. Tables: Go to the Table Maker module. Go to a cell. (Or create a new table, row, column, and/or cell.)

2. At the menu for the block or cell, click the "Edit Text" button.

3. Scroll down until you see radio buttons with the following labels: No list, Unordered list, Ordered list (IA1ai), Ordered list (1Aia1).

4. Choose the type of list you prefer (see below for details) by clicking the corresponding radio button. Then enter your text in the text block as usual and click "Confirm Editing Text." The system will automatically convert the text into an HTML list according to the option you selected.

5. Note that the text you entered is never altered; the system simply applies the HTML tags on the fly when displaying the page or table. That means you can always change the type of list (or switch to no list at all) without disrupting anything.

Types of Lists

No list: This is the default option and applies no HTML list tags whatsoever

Unordered list: In HTML terms, this is the UL tag, also known as a bulleted list, and looks like this:

• Item
• Item
  • Item
  • Item
  • Item
• Item

Ordered list (IA1ai): In HTML terms, this is the OL tag, in this case with the following LI types: I (uppercase Roman numeral), A (uppercase letter), 1 (Arabic numeral), a (lowercase letter), and i (lowercase Roman numeral). Here's what this looks like:

1. Item
   1. Item
      1. Item
         1. Item
            1. Item

Ordered list (1Aia1): In HTML terms, this is also the OL tag, in this case with the following LI types: 1 (Arabic numeral), A (uppercase letter), i (lowercase Roman numeral), a (lowercase letter), and 1 (Arabic numeral). Here's what this looks like:

1. Item
   1. Item
      1. Item
         1. Item
            1. Item

Nested Lists

In general, when you've selected one of the list options, the system simply applies the appropriate list tag at the beginning of each line. (Note that word wrapping can sometimes visually obscure where each line actually begins while you're doing your text entry/editing, but the system knows.) Therefore, for simple lists you need do nothing but enter your text and select a radio button to choose the type of list you want. That gives a "flat list" which will look something like one of these three (depending on which option you've chosen):

Item Item Item Item Item Item

Item Item Item Item Item Item

Item Item Item Item Item Item

In order to use a nested list (see the three examples under "Types of Lists," above, for a nested unordered list and two versions of nested ordered lists), you can use leading hyphens to specify the nesting levels. The system will then nest the lists accordingly (and discard the leading hyphens, which are simply used to guide the nesting process).

For example, suppose you enter this text: (The hyphens might look like they run together, but if you look closely you can see some lines have one leading hyphen, some have two, and some have none at all.)

item
-item
-item
--item
--item
-item
item
item

If you choose Unordered list, the text will automatically display this way:

• item
  • item
  • item
    • item
    • item
  • item
• item
• item

If you choose Ordered list (IA1ai), the text will automatically display this way:

1. item
   1. item
   2. item
      1. item
      2. item
   3. item
2. item
3. item

If you choose Ordered list (1Aia1), the text will automatically display this way:

1. item
   1. item
   2. item
      1. item
      2. item
   3. item
2. item
3. item

Although these examples only nest three levels deep, by adding more hyphens you can nest as deeply as necessary.

For further instructions or related information, check the Help Main Menu.

Distance Education office Santa Rosa Junior College, Santa Rosa, CA USA Last Modified: Friday, 23-Dec-2005 09:08:37 PST	Email to CATE Webmaster