Home / Web Builder Channel
 LOOK FOR...   WITH KEYWORDS:  

Consumer Watch
On The Money
Career Track
Health Quest
Business
Small Office
Web Builder
Marketing
Classifieds
Credit & Debt
Biz Finance
IR Journal
Legal Forms
Letter Templates
Archives
HOME

S U B S C R I B E

Good To Know

What People Search For
8 Things You Can Do Today To Start Increasing Traffic
Ten Web Basics For Success
John's 15 Search Engine Registration Tips
Designing Your First Web Site?

 

 

SPONSOR LINKS

Web Hosting, Low Cost
Yourname.com, 100 MB of webspace, FTP, Cgi-Bin, 50 POP3 email account, MySQL

Web Hosting, High-end
Managed dedicated servers

Automate Your Email
Use autoresponders to automatically deliver sales information to customers

Web Hosting, Economical
High speed and reliable

Register Your .TV Domain Name
Exclusive registrar of .tv domain names

Back-order Domain Names
Waiting list for domain names that expire

Personalized Domain Names
Meaningful web addresses in your own language

Web Hosting & Domain Registration
Host, transfer, sell, plus other services regarding domain names

Animated .gifs
Thousands of animated clip-art to download

 


PRINT THIS

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

  3. When it is important for you to list items in a particular order, create a numbered or ordered list:
  4. <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 :-)

  5. The definition lists 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 displays "1" as the 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?

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 away!

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 sa

Milana Nastetskaya is a professional full-time web developer and an author of "Create Your First Business Web Site in 10 days!" and "65 Instant Web Design Answers!"
Full Author Profile -->


PRINT THIS

 

DEPARTMENTS

CoolWare

Feature Story:

A Must-have Application: WinZip 9 SR-1
Untangled Web

Feature Story:

Some Simple JavaScript Functions


R E C E N T   S T O R I E S

Business Credit
The Layperson's Crash Course in Business Credit
Street-Smart Financing
How to Start or Expand Your Business with Street-Smart Financing
Attract the Perfect Investor
How to Attract the Perfect Investor for Your Business
Federal Help For Your Business
How to Obtain Local, State and Federal Help For Your Business

 

 

InsiderReports

Home  | Affiliate Login  | Search  | Advertise  | Classifieds  | Contact Us  | About Us  | Index
 

The Horizons Unlimited Group

Copyright © 1996-2009 Horizons Unlimited Group. All Rights Reserved.     Privacy Policy | Terms of Use
 


Click to verify BBB accreditation and to see a BBB report.