Drifting Designs Tutorials > > Coding > > HTML > > Ordered Lists
Basic Ordered List
Different Numberers
Jump Starting
Basic Ordered List
This tutorial will teach you how to create an ordered list, meaning that it is listed by number, letter, etc., in contrast to random bullets.
Below is a sample ordered list. Like the vegetables? =)-
- Asparagus
- Broccoli
- Cabbage
- Dandelion
Yes, can you believe that a dandelion is a vegetable? According to Wikipedia's list of vegetables, it is. Hmmm . . .
Anyway, I digress. To make your own list, use the following code -
Explanation:
"<ol>" stands for "ordered list". The "<li>"s tell what is supposed to be listed. Replace the vegetables names with whatever you want. Remember that the list can be extended to however long you want. Just keep adding the "<li>" lines.
Different Numberers
Want a different numberer? (Numberer is a weird word, but I can't think of another word for the thing that numbers your lists). Instead of having the numberers 1, 2, 3 . . . and so on, you can have instead I, II, III, or A, B, C, or a, b, c, or i, ii, iii!
To do that, where it says "<ol>" in the above code, replace that with the following -
which will produce an ordered list like the one below, labeled by letters -
- Asparagus
- Broccoli
- Cabbage
- Dandelion
Option: Replace "A" with the lowercase letter a (so that your code is <ol type="a">) if you want a list like the one below -
- Asparagus
- Broccoli
- Cabbage
- Dandelion
Option: Replace "A" with the lowercase letter I, (so that your code is <ol type="I">) if you want a list like the one below -
- Asparagus
- Broccoli
- Cabbage
- Dandelion
Option: Replace "A" with the lowercase letter i, (so that your code is <ol type="i">) if you want a list like the one below -
- Asparagus
- Broccoli
- Cabbage
- Dandelion
Jump Start
Jump starting a list is when you start a list at, instead of number 1, which is default, number 9 for example. The list below exemplifies how lists can be started at a certain number.
- Asparagus
- Broccoli
- Cabbage
- Dandelion
To start a list at a specific number, use the following code -
Note that Jump Starting Lists only work for lists that are numbered by 1, 2, 3 . . .; they do not work for ordered lists that use letters or Roman numerals.
|
