Return to Cauldron Home Page

Please donate now to pay our monthly server fees:
Donate to The Cauldron
[More Info]

Community Menu
Community Home

Message Board
Board Home
Board Rules
Board Extras:
   Arcade
   Calendar
   Links

CauldronMUX [Client]
Sister Forums:
   Asatru Lore

Menu

Home
Site Info & Rules
Site Archives
Volunteers Needed
Advertise Here

Pagan Supplies
Buy Pagan Books
Buy Pagan Supplies

Books & Media
Books Home
Games Home
Music: Free | Pagan
Online Books
Pagan Book Browser
Reviews:
   Academic Books
   Divination Decks
   Fiction Books
   Pagan Books
   Speculative Books
   DVD & Videotape
Submit Review

Pagan Features
Article Library
Auctions
Chat Log Index
File Library
Humor
Lessons
Pagan Holidays
Pagan Primer
Pagan Rituals
Pagan Supplies
Pagan Youth
Polls
Reconstructionism
Spell Grimoire [Blog]
Web Resources

Pagan Living
Cauldron Cookbook
Take Political Action

Newsletter
Back Issues
Subscribe

Other Features
eCauldronMail
Greeting Cards
Syndicated Articles
World News/Opinion

Shopping
Cheap Web Hosting
Doxy's Bazaar
Witchcraft Course
Zazzle

Old Indexes
Article Index
Webcrafting Index

Network Sites
Cauldron and Candle
Cauldron's Grimoire
RetroRoleplaying
RetroRoleplaying: The Blog
Software Gadgets
The Terran Empire

Site Search
Google
Entire Web
The Cauldron

Member - Pagan Forum Alliance
Charter Member

Get Firefox! While this web site is designed to work in all major browsers, we recommend Firefox.

This site hosted on
a Linode VPS
Formerly hosted by

Why Use Dreamhost?

Site copyright
© 1998-2009
by Randall

Home > Article Library > Webcrafting > How to Create Lists in HTML Search

How to Create Lists in HTML and Control the Way They Look
by Milana Leshinsky

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

Pagan-Friendly Webhosting


Dreamhost offers high-quality, low cost web hosting with a dedication to free speech.

Dreamhost Features

· unlimited web space
· 50 gigs personal file space
· unlimited bandwidth
· unlimited email boxes (POP3/IMAP)
· unlimited ftp/shell accounts
· unlimited domains/subdomains
· php5, cgi, python, fastcgi, ssi
· zend optimizer, ruby on rails
· unlimited MySQL 5 databases
· announcement lists
· discussion (aka mailing) lists
· Jabber server, Custom DNS
· Crontab and Shell access
· Web-based Control Panel
· One-Click installs of the Wordpress blog & others
· 1 free domain name
· helpful tech support
· 100% Uptime Guarantee
· and much more!

All for $10.95 a month with a $49.95 setup fee (pay for a year in advance for $9.95 a month and there is no setup fee). Pay two years in advance and the price drops to $8.95 a month. (And there is a 97 day money back guarantee!)

Click here to read why we've hosted with Dreamhost.

Discuss
Pagan Webcrafting
Do you have questions about web design or web hosting? Would you like to talk with fellow Pagans about web design? The Cauldron: A Pagan Forum's message board has a special folder set aside for discussions about
Computers and the Internet
(Click to Join Us. It's Free.)


Top | Home | Message Board | Site Info & Rules | Report Site Problems
Thanks to Cauldron Sponsors
(Sponsor The Cauldron!)

Cheap Web Hosting Report | Pagan & Magick Supplies
Witchcraft Course
Download Hundreds of Magic Spells