1 / 20

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 3 rd and final Capstone progress report due April 25 1 Quiz on May 2

marv
Download Presentation

COS 125

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. COS 125 DAY 21

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

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

  4. LISTS • 3 Types • Ordered • Numbered • Unordered • Bullets • Definitions • Like a dictionary • Examples of everything in this lecture available at http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/localindex.html#c15

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

  6. Unordered <ul> Item 1 Item 2 Item 3 Item 4 </ul> Ordered <ol> Item 1 Item 2 Item 3 Item 4 </ol> Lists

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

  8. 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;}

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

  10. 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 • Default is outside

  12. 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 disc • image default is none • position default is outside

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

  14. 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}

  15. Rest of Class is help sessionGet started on assignment 7

More Related