HTML notes: Lists
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   
Genreal Format of a List

      < LI > Put an item here
      < LI > Put an item here
      < LI > Put an item here

Ordered list

Attributes: TYPE, START
These are the types of ordering:
1. TYPE=A -will give you A B C D E F G...
2. TYPE=a -will give you a b c d e f g...
3. TYPE=1 -will give you 1 2 3 4 5 6 7 8 9... THIS IS THE DEFAULT!
4. TYPE=I -will give you I II III IV V VI... Roman Numerals
5. TYPE=i -will give you i ii iii iv v vi... small roman numerals

START=n -if you want to begin the table with a number other than 1 (or A, a, I, i, etc).
It will translate the number into its corresponding equivalent, (i.e. 5 = V, v, 5, E, or e).

Using the line item tag <li> will put each item on a separate line, instead of using a line break--no closing line tag needed.

  • The line item tag places a bullet in front of the sentence, if it is used outside of a list.

    list One:

      If you type directly after the OL tag, it will appear indented.
    1. I. Chapter 1 - Introduction
    2. II. Chapter 2 - Birth
    3. III. Chapter 3 - Childhood
    4. IV. Chapter 4 - Adolescence
    5. V. Chapter 5 - Adult

    CODE for list one:
    <OL>If you type directly after the OL tag, it will appear indented.
    <li>I. Chapter 1 - Introduction</li>
    <li>II. Chapter 2 - Birth</li>
    <li>III. Chapter 3 - Childhood</li>
    <li>IV. Chapter 4 - Adolescence</li>
    <li>V. Chapter 5 - Adult</li>

    list Two:

    1. Chapter 1 - Introduction
    2. Chapter 2 - Birth
    3. Chapter 3 - Childhood
    4. Chapter 4 - Adolescence
    5. Chapter 5 - Adult

    CODE for list two:
    <OL TYPE=1 START=50>
    <li>Chapter 1 - Introduction</li>
    <li>Chapter 2 - Birth</li>
    <li>Chapter 3 - Childhood</li>
    <li>Chapter 4 - Adolescence</li>
    <li>Chapter 5 - Adult</li>

    list Three:

    1. Chapter 1 - Introduction
    2. Chapter 2 - Birth - (Notice I've changed the TYPE!)
    3. Chapter 3 - Childhood - (Notice I've changed the VALUE!)
    4. Chapter 4 - Adolescence - (Notice the value continues counting from the VALUE I've changed above in li!)
    5. Chapter 5 - Adult

    CODE for list three:

    <ol type=A>
    <li>Chapter 1 - Introduction</li>
    <li type=a>Chapter 2 - Birth</li>
    <li value=7>Chapter 3 - Childhood</li>
    <li>Chapter 4 - Adolescence</li>
    <li>Chapter 5 - Adult</li></OL>

    Unordered lists

    Attributes: TYPE
    An Unordered list is made with bulleted points. There are THREE Types of bullets:

    • TYPE=disc is the DEFAULT and is a solid ball <li TYPE=disc>
    • TYPE=circle will give you an empty circle <li TYPE=circle>
    • TYPE=square will give you a square <li TYPE=square>
    • Type directly after the <UL> tag and it will indent.
    • I have selected TYPE to be square in the <UL> tag: <ul type=square> for this list.
    • But I can OVERRIDE it by using the TYPE attribute in the li tag!
    • This way you can intermix discs, circles, and bullets in the same list.


    Definition lists

    Instead of list Items, you have two parts, <DT> and <DD> within the list:

    Define your Definition LIST with DL
    Definition Title DT
    Definition DD
    Another Word
    Another Definition
    Another Word
    Another Definition

    CODE for Definition list:

    <DL>Define your Definition LIST with DL
    <dt>Definition Title DT</dt>
    <dd>Definition DD</dd>
    <dt>Another Word</dt>
    <dd>Another Definition</dd>
    <dt>Another Word</dt>
    <dd> Another Definition</dd>

    Nested lists
    You can have lists within lists, or an Outline-type list (Table of Contents, etc.)

    The OFFICIAL Outlining order for lists is: I, A, 1, a, i.
    If you nest an UNORDERED list, the default order is: disc, circle, square, and square for rest.

    1. Chapter 1 - Lifestages
      1. Lifestages of a fruitfly
      2. Lifestages of a paramecium
      3. Lifestages of a Butterfly
        1. Egg stage
          1. Many eggs laid at once
          2. Hatch 2 minutes after laid
        2. Pupa
        3. Larvae
        4. Adolescence
        5. Adult
        6. Death (they only live a couple days)
    2. Chapter 2
    3. Chapter 3
    4. Chapter 4

    CODE for Nested list:
    <OL TYPE=I>

          <li>Chapter 1 - Lifestages</li>
         <OL TYPE=A>
              <li>Lifestages of a fruitfly</li>
              <li>Lifestages of a paramecium</li>
              <li>Lifestages of a Butterfly</li>
              <OL TYPE=1>
                   <li>Egg stage</li>
                   <OL TYPE=a>
                        <li>Many eggs laid at once</li>
                        <li>Hatch 2 minutes after laid</li>
                   <li>Death (they only live a couple days)</li>
         <li>Chapter 2</li>
         <li>Chapter 3</li>
         <li>Chapter 4</li>

    Adding CSS:
    Replace the TYPE attribute with a STYLE attribute using list-style-type / list-style-position / list-style-image.

    list-style-type: choose one of the following bullet styles

    none, square, disc, circle, upper-alpha, lower-alpha, upper-roma , lower-roman, decimal (choose one)

    EX: <OL style="list-style-type:circle;">

    list-style-position: inside or outside

    inside - Indents the marker and the text.
    outside - Keeps the marker to the left of the text

    EX: <OL style="list-style-position:inside;">

      This is the start of the list
    1. Put this inside
    2. Put this inside

      This is the start of the list
    1. Put this outside
    2. Put this outside

    list-style-image: url('image location')

    EX: <UL style="list-style-image: url('../images/arrow.gif');"> --single quotes around image pathname.

    • arrow bullet
    • arrow bullet
    • arrow bullet

    Lesson 4
    1) Create a LIST with a NESTED LIST and use CSS to control the look.