Skip to main content

Ordered List & Unordered list in HTML with Live Execution

List in HTML

Different kinds of Lists in HTML :

List is one of the important concepts in Website creation.

There are three different kinds of list

Important Tags :

    Its has different Tags like
  1. Ordered list : Starting tag : <ol> Ending tag : </ol>
  2. Unordered list : Starting tag : <ul> Ending tag : </ul>
  3. Definitioned list : Starting tag : <dl> Ending tag : </dl> We use this for only Definition purpouse just like subscript tag
  4. List item : Starting tag : <li> Ending tag : </li>
    5. - used to define the item with in the list.
For this first take a notepad and copy code then save it with .html extension.Thats it your Program will be exected.if You want to check its effect within this website plese click on EXECUTE button.

1. Ordered list : If you want you arrange items in an Priority manner you will use ordered list .It has mainly two different types of Attributes

  1. Type
  2. Start

I. Type attribute : Type attribute for Ordered list is to specify the type of numbering . By default, it is a number. Values are 1 (For Numbers),A (For Capital values),a (for small Alphabets),I (For Big roman values),i (For small roman values)

CODE <html> <head> <title> OL TAG </title> <style type="text/css"> </style> </head> <body > <H2> <u> Top 3 Batsmen with most international runs with Numericals </u> </H2> <ol> <li>Sachin Tendulkar (India) - 34,357 runs </li> <li> Kumar Sangakkara (Sri Lanka) - 28,016</li> <li>Ricky Ponting (Australia) - 27,483 runs </li> </ol> <H2> <u> Top 3 Batsmen with most international runs with big Alphabets </u> </H2> <ol type="A"> <li>Sachin Tendulkar (India) - 34,357 runs </li> <li> Kumar Sangakkara (Sri Lanka) - 28,016</li> <li>Ricky Ponting (Australia) - 27,483 runs </li> </ol> <H2> <u> Top 3 Batsmen with most international runs with Small Alphabets </u> </H2> <ol type="a"> <li>Sachin Tendulkar (India) - 34,357 runs </li> <li> Kumar Sangakkara (Sri Lanka) - 28,016</li> <li>Ricky Ponting (Australia) - 27,483 runs </li> </ol> <H2> <u> Top 3 Batsmen with most international runs with Big Roman Values </u> </H2> <ol type="I"> <li>Sachin Tendulkar (India) - 34,357 runs </li> <li> Kumar Sangakkara (Sri Lanka) - 28,016</li> <li>Ricky Ponting (Australia) - 27,483 runs </li> </ol> <H2> <u> Top 3 Batsmen with most international runs with Small Roman Values </u> </H2> <ol type="i"> <li>Sachin Tendulkar (India) - 34,357 runs </li> <li> Kumar Sangakkara (Sri Lanka) - 28,016</li> <li>Ricky Ponting (Australia) - 27,483 runs </li> </ol> </body> </html>
OutPut (Click on above execute Button)

II. Start attribute : Type attribute for Ordered list is to set the starting value for each list item .Starting values interms of 1,2,3...Etc. By default, it is a number. Values are 1 (For Numbers),A (For Capital values),a (for small Alphabets),I (For Big roman values),i (For small roman values)

CODE <html> <head> <title> OL TAG </title> <style type="text/css"> </style> </head> <body > <H2> <u> Top 3 Batsmen with most international runs with Numericals From Starting 5 </u> </H2> <ol type="1" start="5"> <li>Sachin Tendulkar (India) - 34,357 runs </li> <li> Kumar Sangakkara (Sri Lanka) - 28,016</li> <li>Ricky Ponting (Australia) - 27,483 runs </li> </ol> <H2> <u> Top 3 Batsmen with most international runs with big Alphabets From Starting E </u> </H2> <ol type="A" start="5"> <li>Sachin Tendulkar (India) - 34,357 runs </li> <li> Kumar Sangakkara (Sri Lanka) - 28,016</li> <li>Ricky Ponting (Australia) - 27,483 runs </li> </ol> <H2> <u> Top 3 Batsmen with most international runs with Small Alphabets From Starting e </u> </H2> <ol type="a" start="5"> <li>Sachin Tendulkar (India) - 34,357 runs </li> <li> Kumar Sangakkara (Sri Lanka) - 28,016</li> <li>Ricky Ponting (Australia) - 27,483 runs </li> </ol> <H2> <u> Top 3 Batsmen with most international runs with Big Roman Values From Starting V </u> </H2> <ol type="I" start="5"> <li>Sachin Tendulkar (India) - 34,357 runs </li> <li> Kumar Sangakkara (Sri Lanka) - 28,016</li> <li>Ricky Ponting (Australia) - 27,483 runs </li> </ol> <H2> <u> Top 3 Batsmen with most international runs with Small Roman Values From Starting v </u> </H2> <ol type="i" start="5"> <li>Sachin Tendulkar (India) - 34,357 runs </li> <li> Kumar Sangakkara (Sri Lanka) - 28,016</li> <li>Ricky Ponting (Australia) - 27,483 runs </li> </ol> </body> </html>
OutPut (Click on above execute Button)

2. Unordered List : An unordered list is used to list the items which doesn't require any priority or all elements have Equal Priority

Type Attribute : It is the main attribute in the unordered list to create visualization.It has different values like Circle,disc and square

CODE <html> <head> <title> UL TAG </title> <style type="text/css"> </style> </head> <body > <H2> <u> List of Fruits avaliable in The Market (with Square type) </u> </H2> <ul type="square" > <li> Apple</li> <li> Banana</li> <li>Grapes </li> <li> Mango </li> <li> Guvva </li> </ul> <H2> <u> List of Fruits avaliable in The Market (with Circle type) </u> </H2> <ul type="circle" > <li> Apple</li> <li> Banana</li> <li>Grapes </li> <li> Mango </li> <li> Guvva </li> </ul> <H2> <u> List of Fruits avaliable in The Market (with Disc type) </u> </H2> <ul type="disc" > <li> Apple</li> <li> Banana</li> <li>Grapes </li> <li> Mango </li> <li> Guvva </li> </ul> </body> </html>
OutPut (Click on above execute Button)

Comments

Post a Comment

Popular posts from this blog

Image map or Map and Area tags

Anchor TAG Image Map or map Tag : An image map is an image with clickable areas. Sarting Tag : Ending tag : Attributes : It has different attributes like usemap name Area Tag : It contains Area tag Sarting Tag : Ending tag : Attributes : It has different attributes like shape coords href For this first take a notepad and copy code then save it with .html extension.Thats it your Program will be exected.if You want to check its effect within this website plese click on EXECUTE button. 1. Usemap attribute : Usemap att...
Post a Comment
Read more

Marquee Tag and Its Attributes

Marquee TAG Marquee Tag : Marquee is one of the important tags in Website creation .it is generally used to scrooling the content on the webpage .For example : in our regular innovations Website i use this for showing latest updates on my website. Sarting Tag : Ending tag : Attributes : It has different attributes like Direction Height Width Behavior Scrolldelay Scrollamount Hspace Vspace Loop Bgcolor Id & Hovering effects ...
Post a Comment
Read more

Fieldset and Pre Tags in HTML with Live execution

Fieldset Tag in HTML Fieldset & Pre Tags in HTML : 1. Fieldset Tag : is used for grouping related form elements in a box.It is used to give user a clear view about Content. Starting tag : Ending tag : 2. Legend Tag : Legend tag is used to give title for Fieldset. Starting tag : Ending tag : 3. Pre Tag : Pre tag is used to set alignment of your web page as coded line wise . Starting tag : Ending tag : For this first take a notepad and copy code then save it with .html extension.Thats it your Program will be exected.if You want to check its effect within this website plese click on EXECUTE button. CODE Fieldset ,Pre TAGs Login Page User Name : Password : OutPut (...
Post a Comment
Read more