COS 125 DAY 13

Agenda New course time line Assignment 6 posted Assignment 7 Posted Due March 23 @ 9:35 AM Assignment 7 Posted Due March 30 @ 9:35 AM Quiz 2 will be on March 30 Chapters 7 - 15 20 M/C and 4 Short essays New course time line Lecture/Discuss Lists (with CSS)

New time line March 19 Lists 23 Assignment 6 due Tables part 1 26 30 Assignment 7 due Quiz 2 April 2 Forms part1 Progress report 6 Forms part 2 9 Assignment 8 due Multimedia 13 Scripts Part 1 16 Assignment 9 due Scripts part 2 20 PodCasting Progress report 23 Assignment 10 due Quiz 3 27 Capstones Presentations Due

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

LISTS Ordered Unordered Definitions 3 Types 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

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 ●

Lists Unordered <ul> Ordered <ol> Item 1 Item 1 Item 2 http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/listwithcss.htm

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

Choosing your Markers Examples 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 ul li {list-style-type:circle;} ol li {list-style-type:lower-roman;} Correction to text: unless you specify context (ol or ul) style for li will apply both ordered and unordered lists

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

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

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

Outside Inside

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

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>

Styling Nested Lists ol li{rules} Second level 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}

Rest of Class is help session Get started on assignment 6 and/or assignment 7