Cos 125
This presentation is the property of its rightful owner.
Sponsored Links
1 / 20

COS 125 PowerPoint PPT Presentation


  • 78 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Cos 125

COS 125

DAY 21


Agenda

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

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

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


Creating ordered and unordered lists

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 ●


Lists1

Unordered <ul>

Item 1

Item 2

Item 3

Item 4

</ul>

Ordered <ol>

Item 1

Item 2

Item 3

Item 4

</ol>

Lists


Creating ordered and unordered lists1

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

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

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

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

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


Setting all list properties at once

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


Creating a definition list

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

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 get started on assignment 7

Rest of Class is help sessionGet started on assignment 7


  • Login