COS 125

DAY 20

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 http://www.cookwood.com/html5ed/

Discussion on 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 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 ●

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

Defualt is outside

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}

Rest of Class is help session