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

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.

<TAG OF TYPE OF LIST>

<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:

  1. Open the NOTEPAD.
  2. COPY OR TYPE the following code for the ordered list.
  3. 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:

  1. Plug in the TV.
  2. Take out the remote.
  3. 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>

ordered list in html code
CODE-ORDERED LIST IN HTML
gyankosh.net html tutorial
ordered list in html output
OUTPUT-ORDERED LIST IN 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>
<br>
<br>
<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>

ORDERED LIST TYPE GYANKOSH.NET
CODE: ORDERED LIST TYPE SETTING
gyankosh.net html tutorial
ORDERED LIST ATTRIBUTE OUTPUT
OUTPUT:ORDERED LIST OUTPUT
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.

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>
<br>
<br>
<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>

ordered list position code
CODE:ORDERED LIST POSITION
gyankosh.net html tutorial
ORDERED LIST OUTPUT
OUTPUT:ORDERED LIST POSITION

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>
<br>
<br>
<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>

ORDERED LIST CUSTOM START VALUE CODE
CODE:CUSTOM START VALUE FOR ORDERED LIST
gyankosh.net html tutorial
OUTPUT:CUSTOM START VALUE FOR ORDERED LIST

OTHER WAYS TO REACH THIS ARTICLE

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

LEARN

  • EXCEL
  • HTML
  • JAVASCRIPT
  • MORE TO COME…

Encourage us by following at …

If you have any queries or suggestions or any problem which you would like us to solve for you, kindly mail at

gyankosh060309@gmail.com

Pin It on Pinterest

Share This

KINDLY SPEND FEW SECONDS HERE....

%d bloggers like this: