COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012

1. COAP 2000 XHTML PROGRAMMING: INTRODUCTION TO WEB PROGRAMMING Fall I, 2012 Week 4 – Class 1 dejan.dimitrovski@gmail.com dimitdej@webster.edu http://coap2000.ddejan.com/

2. HTML Lists • Lists are used to group related type of information together • It is much easier for the human brain to scan information that is grouped in a list, instead of having it as text Cakes: Plain Sponge, Chocolate Cake, Apple Tea Cake. Biscuits: Anzac Biscuits, Jam Drops, Melting Moments

3. HTML Lists • In HTML there are 3 ways to create lists • Unordered lists <ul> • Ordered lists <ol> • Description lists<dl> • Un/Ordered lists contain list items <li> • Description lists contain definition terms <dt> and definition descriptions <dd>

4. Ordered lists • Used to group a collection of items together, in a way that suggests an order of precedence or importance. • Attributes • Type – Specify what type of ordering to use • a (a, b, c, …) • A ( A, B, C, …) • i (i, ii, iii, …) • I ( I, II, III, …) • 1(1, 2, 3, …) • Start – specify the start position for the first item in the list

5. Ordered Lists <ol type=“a” start=“3”> <li> Item 3 </li> <li> Item 4 </li></ol>

6. Unordered Lists • <ul> • Used to group a collection of items together in a list, but in a way that doesn’t suggest an order of precedence or importance. • Attributes • Type • Circle (the default option) • Disc • Square

7. List Items • Both ordered and unordered lists contain list items • <li> </li> • Attributes • Type = "{ circle|disc|square|a|A|i|I|1 }“ • Using the type attribute on the list item, we can override the type value from the un/ordered list element • Value = "number" • Using the value attribute we can override the value defined (explicitly or implicitly) by the un/ordered list

8. List Items <ol> <li>Eggs</li> <li type="a">Cheese</li> <li>Milk</li> <li value="99">Papadums</li> <li>Tickle-me Elmo</li> <li>Dr Who Remote Control Dalek</li></ol>

9. Nested Lists • We can create nested ordered or unordered lists (or a combination of the two) <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About Us</a> <!— note that this list item is not closed here —> <ul> <li><a href="/about/history/">Our history</a></li> <li><a href="/aboout/team/">The team</a></li> <li><a href="/about/vision/">Our vision</a></li> </ul> </li> <!—the parent for the nested list is actually closed here —> <li><a href="/portfolio/">Portfolio</a></li> <li><a href="/clients/">Clients</a></li> </ul>

10. Nested Lists <ol> <li>Introduction</li> <li>Characters <!— note that this list item is not closed here —> <ol type="a"> <li>Legolas</li> <li>Aragorn</li> <li>Gimley</li> </ol> </li> <!—the parent for the nested list is actually closed here —> <li>Main Battle</li> <li>Happy End</li> </ol>

11. Definition Lists • Useful when we have a series of items that are essentially a combination of title and description of some kind • Basic structure<dl> <dt> … </dt> <dd> … </dt></dl> • Each <dt>, does not have to be followed by a <dd> immediately (and vice versa). See p. 143 D

12. Exercise • Use CSS to make the lists look better • Using custom markers (p.404) • Controlling where markers hang (p.406) • Styling nested lists (p. 408)