by Milana Nastetskaya
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>
Produces this on a web page:
- 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: 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 displays "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:
<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.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Milana Nastetskaya is a full time web and the author of two books:
"Create Your First Busines Web Site in 10 days", "65 Instant Web
Design Answers".
http://www.firstbusinesswebsite.com
http://www.instantwebanswers.com
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Return to Beginning HTML Tutorial Index
|
WEBSITE101 TUTORIALS
HTML Tutorial
| CGI
tutorial | Email
Tutorial | Spam
Tutorial | Cookies
Tutorial | Privacy
Tutorial | Windows
Tutorial | DreamWeaver
Tutorial | Domain
Name Tutorial | Business
Plan Tutorial | Search
Position Tutorial | Online
Advertising Tutorial | Ecommerce
Essentials Tutorial
|