rss

About Me

My Photo
irnanto dwi saputra
View my complete profile

22 May 2011

Ordered List and Unordered List

There are two kinds of list items is an ordered list and unordered list, or also called the numbering and bullets.

Sample list of an ordered list :

  1. First item
  2. The second item
  3. The third three

Example of unordered list items list:

  • First item
  • The second item
  • The third three

To create a sequential list of items we use the tag <OL> while to create a sequential list of items not used tags <UL>. and for each item marked with a tag <LI>.

Sample code for a list of items ordered or ordered list.

<ol>
<li>First item</li>
<li>The second item</li>
<li>The third three</li>
</ol>

And sample code for a list of items not ordered or unordered list.

<ul>
<li>First item</li>
<li>The second item</li>
<li>The third three</li>
</ul>

We can also create a stratified list of items or list items in the list of items. Examples are as follows:

  • First item
  • The second item
    • The first sub-item
    • The second sub-item
      • The first sub sub item
      • The second sub sub item
      • The third sub sub item
    • The third sub-item
  • The third item

To create a multilevel list of items as above, no additional tags or attributes. Has to do is place the tags into lower-level list item in the list of items level on it. For more details, below is the source code :

<ul>
<li>First item</li>
<li>The second item</li>
<ul>
<li>The first sub-item</li>
<li>The second sub-item</li>
<ul>
<li>The first sub sub item</li>
<li>The second sub sub item</li>
<li>The third sub sub item</li>
</ul>
<li>The third sub-item</li>
</ul>
<li>The third item</li>
</ul>

The browser will display the list using a space slightly to the inside to the levels below it.

We can use the same way to create a multilevel sequential list of items using an ordered list. We simply replace the tag <ul> with the tag <ol> , then it will be like this:

  1. First item
  2. The second item
    1. The first sub-item
    2. The second sub-item
      1. The first sub sub item
      2. The second sub sub item
      3. The third sub sub item
    3. The third sub-item
  3. The third item

From the sample list of items not ordered or unordered list that rise above, we see that by default, the browser will display the picture (bullet) black dots for the first level items, circle for the items to the second level, and black boxes for the items third-level items. Actually we can choose what type of bullet you want to use to add a TYPE attribute in the tag <UL>. Code: <UL TYPE="bullet type">. Where a bullet there are three kinds: "disc" for the black dots, "circle" to the circle, and "square" to kotam black. So if we want to list these items:

  • First item
  • The second item
  • The third item

So the HTML codes that must be specified as below.

<ul type="square">
<li>First item</li>
<li>The second item</li>
<li>The third item</li>
</ul>

For a list of items ordered or ordered list (numbering), type the numbers can be changed by using the same attribute. So the code: <OL TYPE="number type">. While the types of figures can be filled with 1, A, a, I, or i depending on our tastes. Example:

<ol type="I">
<li>First item</li>
<li>The second item</li>
<ol type="A">
<li>The first sub-item</li>
<li>The second sub-item</li>
<ol type="1">
<li>The first sub sub item</li>
<li>The second sub sub item</li>
<li>The third sub sub item</li>
</ol>
<li>The third sub-item</li>
</ol>
<li>The third item</li>
</ol>

Will produce a list of items as follows:

  1. First item
  2. The second item
    1. The first sub-item
    2. The second sub-item
      1. The first sub sub item
      2. The second sub sub item
      3. The third sub sub item
    3. The third sub-item
  3. The third item

Lessons on the bullet / unordered lists and numbering / ordered list .

sorry produced results inconsistent with my desire, because setting my template does not comply with this practice examples

DKBAAK3V7XP4

Read also this....



0 komentar:


Post a Comment

 

Site Info

Google Pagerank Powered by  MyPagerank.Net My Ping in TotalPing.com TopOfBlogs My Zimbio Blog Directory