Lists

1. Lists All of the proceeding information can be found at: http://interactiveu.berkeley.edu:8000/pathway/stories/storyReader$13

2. Three Types Of Lists • There are three types of commonly used lists: • Unordered lists • Ordered lists • Definition lists

3. List Tags • <ul> stands for unordered list • <ol> stands for ordered list. • <dl> stands for definition list. • Sublist tags: • <li> stands for list item. • <dt> stands for definition term. • <dd> stands for definition definition.

4. Unordered Lists • An unordered list is a bulleted list. To create an unordered list, you will need to open your list with the tags <ul>. This tells the computer program that you are creating an unordered list. To list an item (with a bullet), you will need to type in <li> before the item that you want listed. After you have typed in the item that you want listed, close the listed item with a closing tag, </li>. Continue listing items using <li> and closing those items with </li>. When you have finished listing all of your items, close the list with </ul>.

5. Unordered List Example • List the words one, two, and three. • What the list will look like to the user:

6. Unordered List Example (HTML) • List the words one, two, and three. • What the list will look like in HTML:

7. Ordered Lists • An ordered list is a list that is numbered. To create an ordered list, you will need to open your list with the tags <ol>. This tells the computer program that you are creating an ordered list. To list an item (with a bullet), you will need to type in <li> before the item that you want listed. After you have typed in the item that you want listed, close the listed item with a closing tag, </li>. Continue listing items using <li> and closing those items with </li>. When you have finished listing all of your items, close the list with </ol>.

8. Ordered List Example • List the words one, two, and three. • What the list will look like to the user:

9. Ordered List Example (HTML) • List the words one, two, and three. • What the list will look like in HTML:

10. Definition Lists • A definition list allows you to create a list, for example, if you were to do definitions. To create a definition list, you will need to open your list with <dl>. This tells the computer that you are creating a definition list. Next, type in <dt> to list the item that you would like defined. After you have listed that item, close the <dt> with </dt>. To define this item, type in <dd>. This will indent the definition from the word that you are defining. When you have finished defining the term, close the <dd> with </dd>. Finally, after you have finished listed all of the terms that you would like defined, close your list with </dl>.

11. Definition List Example • Define the words control group and costs. • The definition of control group is: A group of untreated targets that is compared with experimental groups on outcome measures in impact evaluation. • The definition of costs is: Inputs, both direct and indirect, required to produce an intervention.

12. Definition List Example • What the list will look like to the user:

13. Definition List Example (HTML) • What the list will look like in HTML:

14. Make Your Own List! • You are now ready to make your own list. • You should be able to make all three different types of lists.