List Crazy

1
List Crazy

• Week 6 - Presentation 1
• Veronica Noone

2
Objectives

• All About Lists!
• Unordered Lists
• Ordered Lists
• Nesting lists
• Definition Lists
• Styling the List
• List Markers
• Bullet Position
• Horizontal Lists

3
All About Lists!

• Lists are invaluable element when marking up web
  pages.
• Its hard to find a page without a list!
• Lets take a look favorite web page?

4
Unordered Lists

• ltulgtltligtlt/ligtlt/ulgt
• AKA Bulleted lists
• Works just like the unordered list
• CSS can be used to change bullet, i.e. circles,
  squares or even an image

ltulgt ltligtUnorderedlt/ligt ltligtOrderedlt/ligt ltligtDe
finitionlt/ligt lt/ulgt
5
Try it!

• Take a copy of your template file and save it as
  lists.html
• Add the following information.
• All About Lists!
• Today in class we learned about lists. There are
  three different kinds of lists.
• Unordered
• Ordered
• Definition

6
Ordered Lists

• ltolgtltligtlt/ligtlt/olgt
• List items will be ordered sequentially by the
  browser
• CSS can be used to change value, i.e. Roman
  Numerals, letters

ltolgt ltligtheaderslt/ligt ltligtparagraphslt/ligt ltligtl
ine breakslt/ligt ltligtlistslt/ligt lt/olgt
7
Try It!

• Add this to you lists file
• We learned Ordered Lists should be used when the
  items in the list imply order. For example
• Freshman
• Sophomore
• Junior
• Senior

8
Nesting lists

• Everybody does this wrong! ?

ltulgt ltligtReview materialslt/ligt ltligtComplete
Assignments ltulgt ltligtReadlt/ligt ltligtComplet
e lablt/ligt ltligtPost lab to web
serverlt/ligt lt/ulgt lt/ligt ltligtNo Double
Dasheslt/ligt lt/ulgt
9
Try It!

• Add a nested unordered list to our ordered list.
  
• Freshman
• rookies
• newbies
• Sophomore
• Junior
• Senior

10
Definition Lists

• ltdlgtltdtgtlt/dtgtltddgtlt/ddgtlt/dlgt
• Three elements

ltdlgt ltdtgtHTMLlt/dtgt ltddgtmarkup symbols or codes
placed in a file intended for display on a web
browser.lt/ddgt ltdtgtXMLlt/dtgt ltddgtdesigned to
describe, deliver, and exchange structured
information.lt/ddgt ltdtgtXHTMLlt/dtgt ltddgtreformula
tion of HTML 4.0 as an application of
XML.lt/ddgt lt/dlgt
11
Try It!

• Add the following in a Definition Lists
• Ordered Lists
• These are sometimes called numbered lists, and
  list items that have a specific numerical order
  or ranking.
• Unordered Lists
• These are sometimes called bulleted lists,
  because they have small bullet icons in front of
  the list items. They are for lists that don't
  have a required order.
• Definition Lists
• These are lists of items that have two parts, a
  term to be defined and the definition.
• There are three tags associated with the
  definition list

12
Styling the List

• Of course we arent limited to the simple black
  disc or sequential numbers of the list elements
• We have CSS!

13
List Markers

• These can be applied to ordered or unordered
  lists use the list-style-type property.
• disc
• circle
• square
• decimal
• lower-roman
• upper-roman

The color and size of the bullet is set from the
color and font-size of the ltligt Can also use an
image! list-style-image url(locationOfImage)
14
Bullet Position

• The default position of the bullet is outside of
  the list.
• You can manipulate that as well

ul list-style-image url(green_check_mark.gif)
list-style-position inside
15
Try it!

• Manipulate the 3 list properties for you lists
• list-style-type
• list-style-image
• list-style-position

16
Horizontal Lists

• You can make a list appear horizontal if you want
• More advanced CSS property (will cover more about
  later)
• This is just one way!

li display inline
17

• So what were the 3 types of lists again?