1. COS 125
DAY 20

2. Agenda Assignment #6 Due Assignment #7 Posted
Due April 18
Capstone Progress Report Due
Next Quiz (Quiz #4)
April 11
Castro Chap 8, 9, 10, 11 and 12
20 M/C questions, 4 Short Essay
60 min
WebSite for text book
Discussion on 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

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. Lists Unordered <ul> Item 1 Item 2 Item 3 Item 4 </ul>
Ordered <ol>
Item 1
Item 2
Item 3
Item 4
</ol>

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 For Ordered Lists 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
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
Defualt is outside

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

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 session