1. COS 125 DAY 23

2. Agenda Assignment #6 Graded 8 A’s, 4 B’s and 1 D Biggest Problem area was layout Assignment #7 Posted Due April 20 Two (one?) more to go Quiz Four Graded 1 A, 6 B’s, 3 C’s and 3 D’s Exam #5 is April 30 Castro Chap13, 14, 15 & 16 25 M/C questions, WebCT 50 min Website for text book http://www.cookwood.com/html5ed/ Lecture/Discuss Lists

3. LISTS 3 Types Ordered Numbered Unordered Bullets Definitions Like a dictionary Examples of everything in this lecture available at http://perleybrook.umfk.maine.edu/samples/lists.htm http://perleybrook.umfk.maine.edu/samples/lists.htm

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

5. Creating Ordered and Unordered Lists You can nest lists (one inside another) You cannot put text between opening tag ( or ) and first item Lists are automatically indented from left margin

6. Choosing your Markers Works for both ordered and unordered lists Create a style rule for 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

7. Choosing Where to start List Numbering You can modify the numbering of your lists To start on a number other than one To change number “mid-stream”

9. 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

11. 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

13. Setting All List Properties at Once li{list-style: image then positions 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

14. Creating a definition list Type Type and word or phrase to be fined followed by Type and definition for word or phrase followed by Type

16. 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}