1. COS 125 DAY 21

2. Agenda  Assignment 6 due  Assignment 7 is posted Assignment 7 Due April 22 @ 2PM  Left to do 1 Assignments (8 total)  Due May 2 3 rd 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 http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples /localindex.html#c15

5. 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 ●

6. Lists Unordered Item 1 Item 2 Item 3 Item 4 Ordered 1. Item 1 2. Item 2 3. Item 3 4. Item 4

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

8. 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 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 To change number “mid-stream”

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 Type and word or phrase to be fined followed by Type and definition for word or phrase followed by Type

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 session Get started on assignment 7