COS 125
description
Transcript of COS 125
COS 125
DAY 21
Agenda Assignment 6 due Assignment 7 is posted
Due April 22 @ 2PM
Left to do 1 Assignments (8 total)
Due May 2 3rd and final Capstone progress report due April
25 1 Quiz on May 2 Capstone projects on May 6 @ 3 PM
Lecture/Discuss Lists
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
LISTS
3 TypesOrdered
• NumberedUnordered
• BulletsDefinitions
• Like a dictionary Examples of everything in this lecture
available at http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/localindex.html#c15
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 ●
Lists
Unordered <ul>
• Item 1
• Item 2
• Item 3
• Item 4
</ul>
Ordered <ol>
1. Item 1
2. Item 2
3. Item 3
4. Item 4
</ol>
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
Examples li {list-style-type:circle;} li {list-style-type:lower-roman;}
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 markerShould be less than 15X15 pixels
Create a style ruleli {list-style-image:url(image.gif);}Use absolute URL for imageCan use with list-style-type propertyOverrides 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 ruleli{list-style-postion:inside}Cause text for the item list to indent at
same level as marker on subsequent lines
Default is outside
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 discimage default is noneposition 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}
Rest of Class is help sessionGet started on assignment 7