HTML List

z

Lists are useful for displaying just that, lists. There are three types of lists: ordered, unordered, and definition.

An ordered list displays each list item with a number. Ordered lists are defined using the <ol> tag.

Example Code:


<strong>School Items</strong>
<ol>
<li>Pencil</li>
<li>Paper</li>
<li>Ruler</li>
</ol>


Numbered List Output:
School Items
  1. Pencil
  2. Paper
  3. Ruler


you can also start your ordered list on any number by using start attribute. The syntax for this is <ol> start=n</ol>. Where n=is any number.

Example Code:

<strong>School Items</strong>
<ol start=6>
<li>Pencil</li>
<li>Paper</li>
<li>Ruler</li>
</ol>


Numbered List (start attribute) Output:
School Items
  1. Pencil
  2. Paper
  3. Ruler


There are 2 other types of ordered list other than numbers and these are the Roman Numerals and Alphabets. These is done by using the type attribute.

Example Code:

<ol type="A">
<ol type="a">
<ol type="I">
<ol type="i">


Numbered List (type attribute) Output:
School Items
Letters
(Upper-Case)
Letters
(Lower-Case)
Roman Numerals
(Upper-Case)
Roman Numerals
(Lower-Case)
  1. Pencil
  2. Paper
  3. Ruler
  1. Pencil
  2. Paper
  3. Ruler
  1. Pencil
  2. Paper
  3. Ruler
  1. Pencil
  2. Paper
  3. Ruler


Unordered lists display each item with a symbol called a bullet, usually a small round circle. Unordered lists are defined using the <ul> tag.

Example Code:

<strong>Animals</strong>
<ul>
<li>Pig</li>
<li>Cow</li>
<li>Chicken</li>
<li>Goat</li>
</ul>


Numbered List Output:
Animals
  • Pig
  • Cow
  • Chicken
  • Goat


You can manually control the appearance of item markers as either circles, squares, or discs. This feature is meant to give you more control over the look of bulleted lists. use the TYPE attribute to change the bullet used in the list. Its value can be one of disc, square, or circle.

Example Code:

<ul type="square">
<ul type="disc">
<ul type="circle">


Unordered List (type attribute) Output:
Animals
type="sqaure"type="disc"type="circle"
  • Pig
  • Cow
  • Chicken
  • Goat
  • Pig
  • Cow
  • Chicken
  • Goat
  • Pig
  • Cow
  • Chicken
  • Goat


List items for both the ordered and unordered lists are defined using the <li> tag.

The last type of list is called a definition list. Unlike the ordered and unordered lists definition lists do not list items they list terms and their definitions. A definition list is defined using the <dl> tag, the definitions terms by the <dt> tag, and the terms definition by the <dd> tag.

Example Code:
<dl>

<dt><b>Boot Disk</b></dt>

<dd>A boot disk is actually not a computer disk in the shape of a boot. If it was, most disk drives would have a difficult time reading it. Instead, a boot disk is a disk that a computer can start up or "boot" from. The most common type of boot disk is an internal hard drive, which most computers use to start up from. The operating system installed on the hard drive is loaded during the boot process.</dd>

<dt><b>CPU (Central Processing Unit)</b></dt>

<dd>Stands for "Central Processing Unit." This is the pretty much the brain of your computer. It processes everything from basic instructions to complex functions. Any time something needs to be computed, it gets sent to the CPU. Every day, it's Compute this, compute that -- you'd think the CPU would need a break after awhile. But no -- it just keeps on processing. The CPU can also be referred to simply as the "processor."</dd>
</dl>


Definition List Output:

Boot Disk

A boot disk is actually not a computer disk in the shape of a boot. If it was, most disk drives would have a difficult time reading it. Instead, a boot disk is a disk that a computer can start up or "boot" from. The most common type of boot disk is an internal hard drive, which most computers use to start up from. The operating system installed on the hard drive is loaded during the boot process.

CPU (Central Processing Unit)

Stands for "Central Processing Unit." This is the pretty much the brain of your computer. It processes everything from basic instructions to complex functions. Any time something needs to be computed, it gets sent to the CPU. Every day, it's compute this, compute that -- you'd think the CPU would need a break after awhile. But no -- it just keeps on processing. The CPU can also be referred to simply as the "processor."

 

© New Blogger Templates | Webtalks