COS 125

							COS 125

DAY 23
Agenda
   Assignment #6 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
        http://www.cookwood.com/html5ed/
   Lecture/Discuss Lists
LISTS

   3 Types
       Ordered
         • Numbered
       Unordered
         • Bullets
       Definitions
         • Like a dictionary
   Examples of everything in this lecture
    available at
    http://perleybrook.umfk.maine.edu/samples/lists.htm
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 ●
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
   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
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
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
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

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