|
|
|
|
HTML Lists
|
|
|
|
|
HTML supports three different types of lists namely ordered, unordered & definition lists. Each of these lists serves different functions as per your requirement.
Unordered Lists
This is the best type to start with, especially for the HTML beginners. An unordered list is typically in the form of a list of items marked with bullets. The unordered list starts with the opening tag <ul> & ends with the closing tag </ul>. Each item in the list starts with <li> tag & closes with </li> tag. It is also possible for you to choose the type of bullets to be displayed in the list using the type attribute. The different types available include, disc, square & circle.
| Code |
Results |
| <ul>
<li>Pencil</li>
<li>Rubber</li>
</ul> |
|
|
|
|
|
|
Ordered Lists
The ordered list is also in the form of a list of items & functions in the same manner as unordered list. The only difference is that, instead of bullets, here the items in the list are marked with numbers. The ordered list starts with <ol> tag & ends with </ol> tag. The items in the list start with <li> tag. Here again you can choose the type of numbering or lettering system to be used with the list of items. Possible types include, upper/ lower case letters (A, a), upper/lower case Roman numerals (I, i) & the default Arabic numerals (1).
| Code |
Results |
| <ol>
<li>Pencil</li>
<li>Rubber</li>
</ol> |
- Pencil
- Rubber
|
Definition Lists
As opposed to ordered & unordered lists, the definition lists are not a list of single items. These are indeed a list of items (terms) along with a description for each listed item (term). The definition list starts with <dl> tag & ends with </dl> tag, each term starts with <dt> tag & ends with </dt> tag & each description starts with <dd> tag & ends with </dd> tag.
| Code |
Results |
| <dl>
<dt>Pencil</dt>
<dd>This is Natraj Pencil</dd>
<dt>Rubber</dt>
<dd>This is Natraj Rubber</dd>
</dl> |
- Pencil
- This is Natraj Pencil
- Rubber
- This is Natraj Rubber
|
|
|
|
|
| |
|
|
| Use only hexadecimal #RGB values for colors. The behavior of named colors is browser-idiosyncratic and totally unpredictable. |
|
| |
|
|
|
|
| You can resize your images without a graphics program by changing the HEIGHT and WIDTH in your image tag. |
|
| |
|
|
|
| |
|
|
|
|
|
|
