You make lists every day -- shopping lists, "things to do" lists,
people to call lists. Indeed, lists are a very important part of
our lives. That's why when HTML was developed, its programmers
just couldn't help it -- they created a way to add a list to a
web page.
There are three kinds of lists that you can create:
- Unordered
- Ordered
- Definitions
Oops, another list right there! :-)
1) Here is the HTML code for creating Unordered list:
<UL> <LI>Sour cream <LI>Spagetti <LI>Pancakes </UL>
The above code will simply create a list of bulleted items
(bullets are small dots next to each item - sort of a check
mark).
2) When it is important for you to list items in a particular
order, create a numbered - or Ordered - list:
<OL> <LI>Mix the batter <LI>Put it in the oven <LI>Bake for 20
minutes </OL>
Obviously, order of items is important here (you don't want to
bake the batter that hasn't been mixed yet :-)
Finally, the Definition lists. They are most often used when you
have a list of items to be defined or explained. Use <DL> and
</DL> to start and end your list. <DT> will stand for "term" and
<DD> will stand for "definition". Using the previous cake baking
topic, here is an example of a Definition list:
<DL> <DT>Mix the batter: <DD>Make sure to mix it until well
blended or the cake will be lumpy
<DT>Put it in the oven: <DD>You may need to rotate it middle of
the baking cycle
<DT>Bake for 20 minutes: <DD>Baking time may vary. Start
checking in about 15 minutes. </DL>
When you're creating a complex list, with sub-items, you may use
nested lists (list inside another list) and mix different kinds
of lists together. Experiment with different combinations of
lists to see what is the best way for you to organize items on
your web page.
And here is the frosting! Hey, I bet even experienced webmasters
might have missed the real flexibility of lists.
Every Ordered list begins counting with "1" by default. Every
time you create a list, it automatically display "1" as the
first item. But what if you don't want a list to start with "1"?
Is it possible for you to control what number it starts counting
at?
Let's say you are explaining different features of a product on
your web page. You list the first 3 features, but then would
like to stop for a moment and talk a little more about the 3rd
feature. You have to end the list by using the </OL> tag. Then
you will add the extra explanation about it in the next 2-3
paragraphs.
Now, you want to continue with your list. Oops! But you already
closed it. If you start a new list, it will automatically begin
with "1" again. But you need it to start with "4", right?
Here is what you do:
<ol> <li value="4">This item will be number 4 <li>The next one
will be 5 and so on. </ol>
All I did was add the word "value" and gave it a number. That
number will start your list, and all the following list items
will be counted from there.
And here is the sprinkles on the frosting. And this will really
blow you off!
In an Unordered list bullets look different in each browser. If
you would like to have control over how bullets look on your web
site, you can specify their type (options are - square, circle,
and disc):
<ul> <li type=disc>This item has a black circle bullet <li
type=circle>The next one has empty circle as a bullet <li
type=square>The last one looks like a square </ul>
So there you have it. Three types of lists that you can mix,
match, combine and completely control with enough practice and
experimentation. Use them often. Especially when you have long
web pages filled with text. Be easy on your readers' eyes and
they will be more likely to read what you have to say.
About The Author
Milana Leshinsky is the author of web design manuals for new and intermediate level webmasters. Her latest e-book "Mesmerizing Website Power" includes 65 web design tutorials, and a special report on how to design and lay out your web site to sell more of your products, "Web Design Psychology & Asthetics". Check it out at: http://www.instantwebanswers.com/?html-lists
|
|