Search
Recommended Products
Related Links


 

 

Informative Articles

Choosing A Web Designer : A Plan to Guide You Through The Minefield
Choosing a web designer can seem like a daunting task. They come in all shapes and sizes – from freelancers working at home to glossy new media agencies, and there is as much variation in prices and service as there is in size. So how do you choose...

Keeping Your Site Current
It's imperative that your website's information be current. This can prevent you from many problems with your clients. If you have anything on your site that's date sensitive, such as a sale, promotion, coupon or similar items that have expiration...

Review: Swish
Are you in a busy office and need to get web design jobs with complex text effects done immediately? Want to speed up your productivity but avoid working until Saturday afternoons breaking up text and hand tweening? Then, SWiSH, the new standalone...

Separating Presentation, Content and Structure
The overall quality of the website quantifies its worth. It must not only be unique, flashy or overwhelming, it should also be functional, entertaining. It is not only there for display. Its there for a purpose and it should serve that purpose....

The immutable laws of effective navigation - part 1
The first immutable law of effective navigation: It's gotta be readily available. Visitors should not have to hunt for your navigation or wonder where to find it. If you've done your job right, it will be right there when they are ready for it. ...

 
How to create lists in HTML and control the way they look

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:


  • Sour cream
  • Spagetti
  • Pancakes


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:


  1. Mix the batter
  2. Put it in the oven
  3. Bake for 20 minutes


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
and to start and end your list. will stand
for "term" and will stand for "definition". Using the
previous cake baking topic, here is an example of a
Definition list:


Mix the batter:
Make sure to mix it until well blended or the
cake will be lumpy

Put it in the oven:
You may need to rotate it middle of the
baking cycle

Bake for 20 minutes:
Baking time may vary. Start checking in
about 15 minutes.


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
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:


  1. This item will be number 4
  2. The next one will be 5 and so on.


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):


  • This item has a black circle bullet
  • The next one has empty circle as a bullet
  • The last one looks like a square


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