1. Agenda • Lists • Purpose • Types of Lists: • Unordered • Ordered • Definition

2. Lists • Lists allow you to display information in a concise, organized manner without having to use tables. • Things to do: • Put out the garbage • Walk the dog • Cook supper Bulleted items stand-out and therefore are easier to read. Lists can use various bullet shapes and sizes, and other formats such as letters and numbers

3. Unordered Lists • <ul> Unordered List (block-level tag) • This will create a list that uses a bullet beside text as opposed to numbers or letters. Use this style of list when order is not important. • The <li> tag is used to designate (assign) the individual items in the list. • The <ul> and <li> tags require closing tags( i.e. </ul>, </li> ) • Text will wrap on the next line if it’s too long to fit on one line (i.e. word-wrap) • You can use attributes to change the bullet style.

4. Unordered Lists • Attributes • type – indicates which type of bullet style to be used in the unordered list.eg. <ul type=‘circle’><ul type=‘square’> • <ul type=‘disc’> The type attribute can be used in the <li> tag as well… Refer to INT222 course notes for examples of unordered lists…

5. Unordered Lists • Nested Lists • Lists can be placed within lists to indicate sub-items. Source code and result is displayed below: • Item1 • Sub-Item 1a • Sub-Item 1b • Item2 <ul type=‘square’><li>Item1<ul><li>Sub-Item 1a</li><li>Sub-Item 1b</li></ul> </li><li>Item 2</li></ul>

6. Ordered List • <ol> Ordered List ( block-level Tag) • This will create a list that order the lists by letter or number. Use this style of list when order is important. • Rules regarding the <ol> and <li> (beginning and ending) tags remain similar as with unordered lists. • You can use attributes to change the style of number or letter that will appear in the list.

7. Ordered Lists • Attributes • type – indicates which type of style to be used in the ordered list (default is decimal numbers).eg. <ol type=‘A’><ol type=‘a’> • <ol type=‘I’> • <ol type=‘i’>start – indicates which number or letter to start. First two examples will produce lists with upper and lowercase letters. The last two examples will display lower and uppercase Roman numerals Refer to INT222 course notes for examples of ordered lists…

8. Definition Lists • <dl> definition list (block-level tag) • The definition list allows the user to define words (like a glossary of terms). Refer to example below. • Web BroswerA software application used to locate and display web pages • The <dl> and </dl> tags define the area of a definition list. There are two other tags that are used: • <dt> (definition term) – this represents the “word” or “term” being defined (requires ending tag </dt>) • <dd> (definition description) – this represents the “definition” of the above-mentioned work or “term”(requires ending tag </dd>). Word or term Definition of Word or term

9. Definition Lists • Lists can be placed within lists to indicate sub-items. Source code and result is displayed below: • Web Browser • A software application used to locate and display web pages Note: By default, a browser will align terms on left (indented for each item). Refer to INT222 web page for additional examples <dl> <dt>Web Browser</dt> <dd>A software application used to locate and display web pages</dd> </dl>