1. COS 125
DAY 23

2. Agenda Assignment #6 Graded Assignment #7 Posted Quiz Four 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
Lecture/Discuss Lists

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

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

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

6. Choosing your Markers For Ordered Lists
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

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

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

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}