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

Written 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 isrepparttar 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. Mixrepparttar 118043 batter
  2. Put it inrepparttar 118044 oven
  3. Bake for 20 minutes

Obviously, order of items is important here (you don't want to bakerepparttar 118045 batter that hasn't been mixed yet :-)

Finally,repparttar 118046 Definition lists. They are most often used when you have a list of items to be defined or explained. Use

to start and end your list.
will stand for "term" and
will stand for "definition". Usingrepparttar 118047 previous cake baking topic, here is an example of a Definition list:

Mixrepparttar 118048 batter:
Make sure to mix it until well blended orrepparttar 118049 cake will be lumpy

Put it inrepparttar 118050 oven:
You may need to rotate it middle ofrepparttar 118051 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 isrepparttar 118052 best way for you to organize items on your web page.

And here isrepparttar 118053 frosting! Hey, I bet even experienced webmasters might have missedrepparttar 118054 real flexibility of lists.

Showing and Hiding HTML elements using Layers

Written by Amrit Hallan

A long time back I visited a site that had a very fancy, animated navigation bar. Now, as a professional web developer, I'm not in favor of DHTML-supported, fancy navigation bars, but it was very fascinating. What they had done was, whenever you hovered your cursor over a link, a big, comics-type dialog balloon appeared to give further details of that link. I wondred how they did it, but then it slipped out of my mind.

That technique uses layers and Cascading Style Sheet definitions, and I'm going to tell you here, how it is done. Nothing pyrotechnic, but it'll pay a way to more complex tasks.

First,repparttar demo. I believe once you visually see it, you'll understand better what I'm trying to accomplish here. Given below is a link. If you take your cursor overrepparttar 118042 link, an image appears somewhere onrepparttar 118043 screen. By tweaking you can controlrepparttar 118044 placements. You can seerepparttar 118045 demo, along withrepparttar 118046 online version of this article at:

I've purposely maderepparttar 118047 image appear over a text area so that you don't think it is a simple rollover image effect. The image actually appears aboverepparttar 118048 text.

Below liesrepparttar 118049 code that ofrepparttar 118050 effect that appears above.

Firstrepparttar 118051 HTML part that definesrepparttar 118052 general link andrepparttar 118053 division that definesrepparttar 118054 placement ofrepparttar 118055 image. Take note ofrepparttar 118056 CSS definitions required to setrepparttar 118057 z-index andrepparttar 118058 "hide" attributes. Before testingrepparttar 118059 code, remember to removerepparttar 118060 preceding dots that I have appended so that your email software doesn't readrepparttar 118061 code as some "process-able" content.

Cont'd on page 2 ==> © 2005
Terms of Use