COS 125

Shared by:
Categories
Tags
-
Stats
views:
2
posted:
9/28/2012
language:
English
pages:
17
Document Sample

```							COS 125

DAY 23
Agenda
   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
   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
   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}

```
Related docs
Other docs by dfhdhdhdhjr
PowerPoint Presentation - The Radclyffe School