PROVIDING ACCURATE, RELIABLE AND STRAIGHT TO THE POINT KNOWLEDGE ABOUT DIFFERENT IT TOOLS EXPLAINED WITH PRACTICAL EXAMPLES

GENERAL FORMAT OF LIST TAG
TYPES OF LISTS
WHAT IS ORDERED LIST?
ORDERED LIST EXAMPLE
SETTING TYPE OF ORDERED LIST
TAG FOR SETTING ORDERED LIST TYPE
EXAMPLE FOR SETTING TYPE OF ORDERED LIST
SETTING CUSTOM START NUMBER FOR ORDERED LIST
EXAMPLE FOR SETTING CUSTOM START NUMBER IN ORDERED LIST

HTML-LISTS-ordered list

If we go by the definition of a LIST, its a set of the items which belong to the same group or class.

Same is the case with the LISTS in HTML.

If you remember the history of the HTML, it was developed for Research AND Educational work, so LISTS AND TABLES were part of HTML from very beginning.

HTML-GENERAL FORMAT OF LIST ELEMENT

The LIST TAG is used to tell the browser that the following text is to be represented as LISTS. Although there are three types of lists present, the format for this element is almost similar to all the three types. Here is the format.

<LI> ITEM DESCRIPTION </LI>

</TAG OF TYPE OF LIST>

This is the standard format of using any list.

DO YOU KNOW ????

THE CAPITAL and small words used in HTML CODING doesn't matter. But of course, if same is used, that's better.

HTML-TYPES OF LISTS

There are mainly THREE TYPES OF LISTS in HTML.

ORDERED LIST
UNORDERED LIST
DEFINITION LIST

We will discuss every type with examples and try to understand them.

html-what is ordered list?

As the name itself is self explanatory, it is ordered one. We put numbers in ascending order to make anything in order, so does the ordered list in html. So THE ORDERED LIST IS THE ONE WHICH-

is preceded by a number, a roman numeral or an alphabet to show that the list is in order. The numerals or alphabet can be in upper case or lower case.

*The list used in this text is showing bullets i.e. unordered list.

html-ordered list example

Let us make an ordered list.

STEPS:

Open the NOTEPAD.
COPY OR TYPE the following code for the ordered list.
The explanation follows after the pictorial description.

SCENARIO: Let us make a list of steps to switch on the tv.

To accomplish this target, we have to do the following steps.

STEPS:

Plug in the TV.
Take out the remote.
Press standby button on remote and the tv will turn on.

<!doctype html5>
<html>
<head>
<title>Example Ordered List</title>
</head>
<body>
<ol>
<li>
Plug in the TV.
</li>
<li>
Take out the remote.
</li>
<li>
Press standby button on remote and the tv will turn on.
</li>
</ol>
</body>
</html>

HTML-ATTRIBUTES-CHOOSING TYPE OF NUMBERING IN LIST

As already mentioned, there are different ways of using the numbers in the ORDERED LIST.

For example numerals, alphabet, lower or upper case, roman etc.

In the following code , take a look at the attribute setting in the <OL> tag.(ordered list tag)

THE ATTRIBUTE TO SET ORDERED LIST TYPE

DESCRIPTION OF ATTRIBUTE SETTING TAG:

The STYLE is used to set the attributes(property).

The numbering of the ORDERED LIST can be done from one of the following type.

Just change the desired property in the above written tag in place of “PROPERTY AS DESIRED”.

THE FOLLOWING EXAMPLE SHOWS THE DEMONSTRATION.

HTML:example of SETTING THE NUMBERING TYPE IN ORDERED LIST

HTML:example code-ready to be copied

<!doctype html5>
<html>
<head>
<title>GYANKOSH.NET ORDERED LIST ATTRIBUTES</title>
</head>
<body><CODE>
<ol style=”list-style:lower-greek;”>
<li>
Plug in the TV.
</li>
<li>
Take out the remote.
</li>
<li>
Press standby button on remote and the tv will turn on.
</li>
</ol>
 
 
<ol style=”list-style:lower-roman;”>
<li>
Plug in the TV.
</li>
<li>
Take out the remote.
</li>
<li>
Press standby button on remote and the tv will turn on.
</li>
</ol>
</CODE>
</body>

DESCRIPTION OF EXAMPLE:

The example code starts with the standard tags.

The first ordered list, we have set the list type to -lower greek. We can see alpha ,beta, gamma etc. in the first group.

In the second one, we have used lower roman.

Here is the list of other optional properties for ordering type.

Numeric: decimal, decimal-leading-zero, arabic-indic, armenian, upper-armenian, lower-armenian, bengali, cambodian, khmer, cjk-decimal, devanagari, georgian, gujarati, gurmukhi, hebrew, kannada, lao, malayalam, mongolian, myanmar, oriya, persian, lower-roman, upper-roman, tamil, telugu, thai, tibetan

Alphabetic: lower-alpha, lower-latin, upper-alpha, upper-latin, lower-greek, hiragana, hiragana-iroha, katakana, katakana-iroha

Symbolic: disc, circle, square, disclosure-open, disclosure-closed

And more like JAPANESE, KOREAN ETC.

BUT MOST IMPORTANTLY WE ARE GOING TO USE, DECIMAL, ROMAN ,ALPHABET ETC.

HTML:NUMBERING INSIDE OR OUTSIDE THE MARGIN

This function allows us to keep the number within the list or want to keep the numbering outside the list. Following is the example for the same.

THE TAG FOR SETTING THE INSIDE POSITION OR OUTSIDE POSITION IS:

THE ATTRIBUTE TO SET ORDERED LIST POSITION

HTML:example for NUMBERING INSIDE OR OUTSIDE THE MARGIN

HTML:example code-ready to be copied

<!doctype html5>
<html>
<head>
<title>GYANKOSH.NET ORDERED LIST ATTRIBUTES</title>
</head>
<body><CODE>
<ol style=”list-style:lower-greek;list-style-position:inside;”>
<li>
Plug in the TV.
</li>
<li>
Take out the remote.
</li>
<li>
Press standby button on remote and the tv will turn on.
</li>
</ol>
 
 
<ol style=”list-style:lower-roman;”>
<li>
Plug in the TV.
</li>
<li>
Take out the remote.
</li>
<li>
Press standby button on remote and the tv will turn on.
</li>
</ol>
</body>
</html>

HTML:SETTING A CUSTOM STARTING VALUE FOR ORDERED LIST

Sometimes a situation may occur when we need to start the ORDERING FROM A SPECIFIC NUMBER. In that case we need to give our counter a starting value.

Here is the TAG for reference.

THE ATTRIBUTE TO SET A CUSTOM START

HTML:example for SETTING A CUSTOM STARTING VALUE FOR ORDERED LIST

example code-ready to be copied

<html>
<head>
<title>GYANKOSH.NET ORDERED LIST ATTRIBUTES</title>
</head>
<body><CODE>
<ol start=”3″>
<li>
Plug in the TV.
</li>
<li>
Take out the remote.
</li>
<li>
Press standby button on remote and the tv will turn on.
</li>
</ol>
 
 
<ol style=”list-style:lower-roman;”>
<li>
Plug in the TV.
</li>
<li>
Take out the remote.
</li>
<li>
Press standby button on remote and the tv will turn on.
</li>
</ol>
</body>
</html>

HTML-LISTS-ordered list

HTML-GENERAL FORMAT OF LIST ELEMENT

DO YOU KNOW ????

THE CAPITAL and small words used in HTML CODING doesn't matter. But of course, if same is used, that's better.

HTML-TYPES OF LISTS

There are mainly THREE TYPES OF LISTS in HTML.

html-what is ordered list?

html-ordered list example

Let us make an ordered list.

SCENARIO: Let us make a list of steps to switch on the tv.

HTML-ATTRIBUTES-CHOOSING TYPE OF NUMBERING IN LIST

THE ATTRIBUTE TO SET ORDERED LIST TYPE

HTML:example of SETTING THE NUMBERING TYPE IN ORDERED LIST

HTML:example code-ready to be copied

Alphabetic: lower-alpha, lower-latin, upper-alpha, upper-latin, lower-greek, hiragana, hiragana-iroha, katakana, katakana-iroha

Symbolic: disc, circle, square, disclosure-open, disclosure-closed

HTML:NUMBERING INSIDE OR OUTSIDE THE MARGIN

THE ATTRIBUTE TO SET ORDERED LIST POSITION

HTML:example for NUMBERING INSIDE OR OUTSIDE THE MARGIN

HTML:example code-ready to be copied

HTML:SETTING A CUSTOM STARTING VALUE FOR ORDERED LIST

THE ATTRIBUTE TO SET A CUSTOM START

HTML:example for SETTING A CUSTOM STARTING VALUE FOR ORDERED LIST

example code-ready to be copied

WHAT IS EXCEL, HOW EXCEL WORKS, WRITE FORMULA IN EXCEL, EXAMPLE OF USING FORMULA IN EXCEL, ANIMATED EXAMLPE OF USING FORMULA IN EXCEL

Like this:

Pin It on Pinterest

KINDLY SPEND FEW SECONDS HERE....