COS 125

1. COS 125 DAY 21

2. Agenda • Assignment 6 due • Assignment 7 is posted • Due April 22 @ 2PM • Left to do • 1 Assignments (8 total) • Due May 2 • 3rd and final Capstone progress report due April 25 • 1 Quiz on May 2 • Capstone projects on May 6 @ 3 PM • Lecture/Discuss Lists

3. List Overview • Creating Ordered and Unordered Lists • Choosing Your Markers (Bullets) • Choosing Where to Start List Numbering • Using Custom Markers • Controlling Where Markers Hang • Setting All List-Style Properties at Once • Creating Definition Lists • Styling Nested Lists

4. LISTS • 3 Types • Ordered • Numbered • Unordered • Bullets • Definitions • Like a dictionary • Examples of everything in this lecture available at http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/localindex.html#c15

5. Creating Ordered and Unordered Lists • Type <ol> for ordered list or <ul> for unordered list • Type <li> to begin every item of the list followed by </li> • Repeat step above for every item • Type </ol> or </ul> to complete list • Default for ordered list 1,2,3,4 • Default for unordered list is ●

6. Unordered <ul> Item 1 Item 2 Item 3 Item 4 </ul> Ordered <ol> Item 1 Item 2 Item 3 Item 4 </ol> Lists

7. Creating Ordered and Unordered Lists • You can nest lists (one inside another) • <ul> <li> <ol><li></li></ol> </li> </ul> • You cannot put text between opening tag (<ol> or <ul>) and first item <li> • Lists are automatically indented from left margin

8. Choosing your Markers • Works for both ordered and unordered lists • Create a style rule for <li> • li {list-style-type:“marker”;} • Marker can be • For Unordered lists • disc ● • circle ○ • square ■ • For Ordered Lists • decimal 1,2,3,4 • upper-alpha A,B,C,D • lower-alpha a,b,c,d • upper-roman I,II,III,IV • lower-roman i,ii,iii,iv • Examples • li {list-style-type:circle;} • li {list-style-type:lower-roman;}

9. Choosing Where to start List Numbering • You can modify the numbering of your lists • To start on a number other than one • <ol start=“3”> • To change number “mid-stream” • <li value=“5”>

11. Using Custom markers • You can use any image as a marker • Should be less than 15X15 pixels • Create a style rule • li {list-style-image:url(image.gif);} • Use absolute URL for image • Can use with list-style-type property • Overrides list-style-type property

13. Controlling Where Markers Hang • By default markers are indent from left and list item indent a bit further • Can be modified by style rule • li{list-style-postion:inside} • Cause text for the item list to indent at same level as marker on subsequent lines • Default is outside

15. Setting All List Properties at Once • li{list-style: image then position then type} • li{list-style:url(arrow.gif) inside square;} • Any item not set is set to default setting • type default is disc • image default is none • position default is outside

16. Creating a definition list • Type <dl> • Type <dt> and word or phrase to be fined followed by </dt> • Type <dd> and definition for word or phrase followed by </dd> • Type </dl>

18. Styling Nested Lists • Using nested lists and style rules you can create “outlines” just like on your word processor • First level Style rules • ol li{rules} • Second level • ol ol li{rules} • Third level • ol ol ol li{rules} • Forth level • ol ol ol ol li{rules}

20. Rest of Class is help sessionGet started on assignment 7