shadowline
Alignment << Lists >> Images
LISTS are a great way of keeping your web page organized. There are unordered (bullet) lists, ordered (numbered) lists, and definition lists. When you use a list command, it will indent the information a bit making the list look organized and as a unit.

Unordered Lists

This list type has a start character of a dot or other 'bullet' style character.

<ul>
<li> apples </li>
<li> oranges </li>
<li> bananas </li>
</ul>
  • apples
  • oranges
  • bananas

<UL> is for Unordered List. To create each line and start character, the <li> or LINE tag set is used.

There is no need to use a <BR> or <P> tag to skip to the next line. The <li> tag does it automatically.

The symbols before the items are a default DISC(dot). Using the TYPE property, you can choose a value of CIRCLE or SQUARE for a different look.

<ul type="square">
<li> apples </li>
<li> oranges </li>
<li> bananas </li>
</ul>
  • apples
  • oranges
  • bananas

Note : The values for UL must be entered in lower case letters.


Ordered Lists

This list type produces numerical characters on each line instead of a bullet characters.

<ol>
<li> apples </li>
<li> oranges </li>
<li> bananas </li>
</ol>
  1. apples
  2. oranges
  3. bananas

<ol> is for Ordered List. The list now has numbers instead of a 'bullet' before the list items.

The numbers before the items are a default called 1. Using the TYPE property, you can choose a value of a, A, i, or I for a different look.

<ol type="A">
<li> apples </li>
<li> oranges </li>
<li> bananas </li>
</ol>
  1. apples
  2. oranges
  3. bananas


Nested Lists

To be creative, you can create nested lists. These will create a list, inside another list. Each new list will be indented from the one before. This will work for BOTH Unordered lists and Ordered lists.

<ul>
<li> apples </li>
     <ul>
     <li> green are good </li>
     <li> red are better </li>
     </ul>
<li> oranges </li>
<li> bananas </li>
</ul>
  • apples
    • green are good
    • red are better
  • oranges
  • bananas

Using a nested list makes it possible to create sub-catagories from a main list. Take note that a full set of list tags are used to nest a list and the nested (sub) list tags are NOT overlapping the main list tags.

You don't have to indent the actual coding for the new list as the example shows. It is just easier to read and keep track of it that way.

There can be a list, inside a list, inside a list, etc.. Anything beyond 3 nests gets confusing and usually makes a web page look cluttered, so don't over do it.


Definition Lists

This list type is a little different. It creates a TITLE line and a DATA area.

DLDefinition List tags.
DTDefinition Title.
DDDefinition Data.

<dl>
  <dt> apples
    <dd> Apples are a great snack to have. They are crispy, fresh, and fun to eat. I can eat them everyday because I love the taste of them. I think the whole world should eat them.
  <dt> oranges
    <dd> I love to eat oranges. They are also fun to eat. I sometimes have a hard time getting the peel open, but in the end I have a great snack.
</dl>

apples
Apples are a great snack to have. They are crisply, fresh, and fun to eat. I can eat them everyday because I love the taste of them. I think the whole world should eat them.
oranges
I love to eat oranges. They are also fun to eat. I sometimes have a hard time getting the peel open, but in the end I have a great snack.

Similar to the other types of lists, there is a start and ending tag to define the list section. Instead of an LI tag, the DT and DD tags are used. They do not require ending tags.

The title line is aligned along the left and the data lines are indented in. When the data lines go past the right side border, the data continues on the next line and remains indented.
Alignment << Lists >> Images
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow