Organize Your Material With Lists

1
Organize Your Material With Lists

• Day 3

2
Lists

• Great way to organize material on your Web site.
• Ingredients for recipe, page of links with
  description, step by step instructions.
• Two type of lists
• Ordered
• Unordered

3
Create a Bulleted List

• Two elements used to created bulleted (unordered)
  list
• ltulgt lt/ulgt unordered list element enables you to
  create the list
• ltligt lt/ligt you specify individual items on the
  list with the list item element

4
Open template.htm

• Save as ulist.htm
• In between the ltbodygt lt/bodygt tags
• Type an opening unordered list tag ltulgt
• Next, add a set of list item tags ltligtlt/ligt
• For each new list item, add another set of ltligt
  lt/ligt tags
• When the list is complete, type a closing lt/ulgt
  tag.

5
The code for a simple unordered list might look
something like what you see here.
lthtmlgt ltheadgtlttitlegtUnordered Listslt/titlegtlt/headgt
ltbodygt ltulgt ltligtThis is the first
itemlt/ligt ltligtThis is the second
itemlt/ligt ltligtThis is the third
itemlt/ligt ltligtThis is the fourth
itemlt/ligt lt/ulgt ltbodygt lt/htmlgt
6
Changing the bullet type

• If you would like to change the disc bullet, you
  can specify what you would like using the
  following attribute.
• To specify a square ltul typesquaregt
• To specify a circle ltul typecirclegt
• You can also control the type of bullet for each
  separate item by putting the attribute inside the
  ltligt tag
• ltli typesquaregtlt/ligt
• ltli typecirclegtlt/ligt

7
Create an Ordered List

• What if you want to display an outline with
  numbers and letters? Or want to create a numbered
  sequence?
• To create an ordered list, you need the
  following
• ltolgtlt/olgt The ordered list element
• ltligtlt/ligt The list item element

8
Use ltolgt to Create a Numbered List

• Open your template and save as olist.htm
• Then type this code

9
lthtmlgt ltheadgtlttitlegtOrdered Listslt/titlegtlt/headgt lt
bodygt ltolgt ltligtOrdered lists display items with
numbers.lt/ligt ltligtBut HTML doesnt sort the
items.lt/ligt ltligtIt only numbers themlt/ligt ltligtYou
have to do the arranging yourself.lt/ligt lt/olgt lt/bo
dygt lt/htmlgt
10
Use the type Attribute to Specify Numbers or
letters

• ltol typeIgt Capitalize Roman numerals
• ltol typeIgt Lowercase Roman numerals
• ltol type1gt Numbers (default)
• ltol typeAgt Capital letters
• ltol typeagt lowercase letters

11
Use the start attribute to choose a starting
number

• If you want to start a list at a point other than
  I or A all you need to do is include the start
  attribute at the point where you want to change
  the number or letter
• EX ltol type1 start23gt

12
Design Principles

• Learn to use white space(space unoccupied by text
  or pictures)
• Break you text into smaller bits(try breaking
  things into smaller, bite-size paragraphs)
• Use lists to your advantage
• Use heading and text formatting carefully