Bullet Lists.
<ol>, <ul> and <DL>.

 

The Unordered List.

The <ul> tag defines your list as an unordered list which simply means it’s not numbered. The <ul> tag also comes with a handy little feature called TYPE which allows you to define the type of bullets you want.

The <li>--</li> tag is not nearly as complicated. It defines each item in your list.

Here’s an example of a list with circles:

<ul type="circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

This gives us:

  • Item 1
  • Item 2
  • Item 3

type="square" gives us:

  • Item 1
  • Item 2
  • Item 3

The Ordered List.

If you want numbers instead of bullets you need to enclose the list in <ol> </ol> (Ordered List) tags rather than <ul> </ul> (Unordered list) tags.

With this:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

We get this:

  1. Item 1
  2. Item 2
  3. Item 3

If you want letters instead of numbers you need to change the <ol> tag to include the type=" " tag that you want.
Here are the type values:
1 (decimal numbers: 1, 2, 3, 4, 5, ...)
a (lowercase alphabetic: a, b, c, d, e, ...)
A (uppercase alphabetic: A, B, C, D, E, ...)
i (lowercase Roman numerals: i, ii, iii, iv, v, ...)
I (uppercase Roman numerals: I, II, III, IV, V, ...)

Here’s how it’s done:

<ol type="I">
<li>Item 1 </li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

We get this:

  1. Item 1
  2. Item 2
  3. Item 3

Start the Count from another number then One.
That’s easy to fix.
Here’s an ordered list that starts at four (4).

Here’s how it’s done:

<ol start="4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

We get this:

  1. Item 1
  2. Item 2
  3. Item 3

How about a, A, i, I well that is similar but a little trickier.

Here’s how it’s done:

<ol type="a" start="4">
<li>Item 1</li>
<li>Item2</li>
<li>Item 3</li>
</ol>

We get this:

  1. Item 1
  2. Item 2
  3. Item 3

NOTE:
<ol type="
a" start="4"> type ="a" to give us our Letters List and start="4" because "D" is the forth letter of Alphabet. If we started with type A at 25 which would be "Y" and added a couple of more Items we would get this:

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5

Can I put an Ordered and Unordered list together?
Sure can!
Just remember to close each one. E.G.

<ol>
<li>
First Heading</li>
<ul>
<li>
First Item</li>
</ul>
</ol>

You could do something like an <ol> Ordered List and under each <li> command you could put in a small <ul>. Like so:

  1. First Heading
    • Item 1
    • Item 2
  2. Second Heading
    • Item 1
    • Item 2

Here’s what it looks like:

<ol type="I" >
<li>First Heading</li>
<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<li>Second Heading</li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</ol>

There is a pattern to putting unordered lists under one another unless you specify a change as in the First Heading. This is

  • The first list gives you the solid bullet. Like this.
  • The second gives you the empty bullet. Like this.
  • All lists after that gives you a square bullet. Like this.

Styling Your Lists.

You can also control how the list is displayed by adding attributes to the <ol> tag like this:
<ol style = "font-family: Arial; font-weight: bold; color: red;">
<li>
Item 1</li>
<li>
Item 2</li>
<li>
Item 3</li>
</ol>

NOTE: The result is the wholelist is now RED including the Numbers.

  1. Item 1
  2. Item 2
  3. Item 3

Suppose we changed the style not only to the whole list but to individual<li>tags like this:
<ol type="A" style = "font-family: Arial; font-weight: bold;">
<li style = "color:
red;">Item 1</li>
<li style = "color:
black;">Item 2</li>
<LI style = "color:
blue;">Item 3</li>
</ol>


NOTE: The result is each list item is now a differnt colour including the Letters.

  1. Item 1
  2. Item 2
  3. Item 3

You could also make each indervidual line a different type like this:
<li type="A" style = "color:red;">Item 1</li>
<li type="a" style = "color:black;">
Item 2</li>
<li type="I" style = "color:blue;">
Item 3</li>
to get this:

  1. Item 1
  2. Item 2
  3. Item 3

So to get the list to have nice pretty coloured numbers but text of a different colour we need to do this:

The Style for the Numbering
<ol style = "font-family: Arial; font-weight: bold; color:blue; ">

The Style for the Text
<li><font color="#000000" face="Courier New, Courier, mono">Item 1</font></li> and so we get.

  1. Item 1
  2. Item 2
  3. Item 3

Offcourse you can get as complex as you like This:
<ul style = "font-family: Arial; font-weight: bold;">
<li>This is the first line unordered list line</li>
<ol>
<li>
This is line 1 in a ordered list, inside the unordered list</li>
<li>
This is line 2</li>
<ol type="a">
<li>
Line 1 in a ordered list line type="a", in a ordered list, inside the unordered list</li>
<li>
This is line 2</li>
</ol>
<li>
This is line 3 in the first ordered, list inside the unordered list</li>
<li>
This is line 4</li>
<ul>
<li>
This is a unordered list, inside ordered list, inside the unordered list</li>
<li>
This is another</li>
<ol type="I">
<li>
Line 1 in an ordered list type="I", inside unordered list, inside ordered list, inside unordered list</li>
<li>
This is line 2</li>
</ol>
</ul>
<li style = "color:blue;">
This is line 5 in the first ordered list with style = "color:blue;"</li>
</ol>
<li>
This is back to the original unordered list</li>
</ul>

Will give you this.

  • This is the first line in the unordered list
  • This is line 2
    1. This is line 1 in a ordered list, inside the unordered list
    2. This is line 2
      1. Line 1 in a ordered list type="a", in a ordered list, inside the unordered list
      2. This is line 2
    3. This is line 3 in the first ordered list, inside the unordered list
    4. This is line 4
      • This is a unordered list, inside ordered list, inside the unordered list
      • This is another
        1. Line 1 in an ordered list type="I", inside unordered list, inside ordered list, inside unordered list
        2. This is line 2
    5. This is line 5 in the first ordered list, with style = "color:blue;"
  • This is back to the original unordered list

The Definition List.

There’s one more set of list commands that manipulate the text for you. You can play with the text all you want inside of all these list commands. Bold, italic or anything else. The lists above are all single item lists. Each <li> command makes one list item. Now check this out:

Here’s What’s For Dinner

Entrée.
Rabbit food.
Main Meal.
Mystery Meat Pie.
Dessert.
Sandwiches there.

...and here’s what it looks like.

<dl>
<dt>
Entrée.</dt>
<dd>
Rabbit food.</dd>
<dt>
Main Meal.</dt>
<dd>
Mystery Meat Pie.</dd>
<dt>
Dessert.</dt>
<dd>
Sandwiches there.</dd>
</dl>

Here’s What’s Happening

  • I used an <H1> -- </H1> command to create a heading.
  • <DL> stands for Definition List. It tells the browser that a double title list is coming up.
  • <DT> stands for Definition Term. It is the first title.
  • <DD> stands for Definition Description. It is indented and is in this case the second definition title.
  • NOTE: You do not have to the end tags on this list E.G. </DD>, </DT>, </DL>. But I’ve found some browsers do not handle them well so I always put them in.

That’s it, I pray I have helped.

CU
May your day bring your heart peace.
Gary.

 

 

BlueBar.gif


Visitor N°
 
Free Text Counter.
Counter added 05/02/2014.

Top