1. COS 125
DAY 13

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

3. New time line March 19 Lists 23 Assignment 6 due Tables part 1 2630
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

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

5. LISTS Ordered Unordered Definitions 3 Types
Numbered
Unordered
Bullets
Definitions
Like a dictionary
Examples of everything in this lecture available at

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

7. Lists Unordered <ul> Ordered <ol> Item 1 Item 1 Item 2

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

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

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

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

14. 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. Outside
Inside

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

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

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

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