EZ

EZNotes

🔢 Practical 64: HTML code for ordered list

Learn how to create numbered lists using the <ol> (ordered list) and <li> (list item) tags with different numbering styles.

🎯 Aim

To write an HTML program that demonstrates the use of <ol> (ordered list) and <li> (list item) tags to create numbered lists with different numbering styles.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result

📖 Introduction

An ordered list in HTML is used to display a list of items in a specific order. The list items are automatically numbered by the browser.

  • <ol> — defines the ordered list container
  • <li> — defines each list item inside the list
💡 Tip: Ordered lists are perfect for steps in a recipe, instructions, rankings, or any list where the order matters!

📊 Preview of the Output

📝 Recipe Steps (Default Numbering)
  1. Preheat oven to 350°F
  2. Mix flour and sugar
  3. Add eggs and milk
  4. Bake for 30 minutes
  5. Let cool before serving
🔤 Different Numbering Styles
Decimal (1, 2, 3):
  1. Item 1
  2. Item 2
  3. Item 3
Upper Alpha (A, B, C):
  1. Item A
  2. Item B
  3. Item C
Lower Alpha (a, b, c):
  1. Item a
  2. Item b
  3. Item c
Upper Roman (I, II, III):
  1. Item I
  2. Item II
  3. Item III
Lower Roman (i, ii, iii):
  1. Item i
  2. Item ii
  3. Item iii
🔢 Starting from 5
  1. Step 5
  2. Step 6
  3. Step 7
📂 Nested Ordered List
  1. Chapter 1
    1. Section 1.1
    2. Section 1.2
    3. Section 1.3
  2. Chapter 2
    1. Section 2.1
    2. Section 2.2

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

  1. Launch Notepad++.
  2. Set the language to HTML (Language → H → HTML).
  3. Write the following simplified HTML code:
<!-- Practical 64: Demonstrating ordered lists --> <html> <head> <title>Ordered List Demo</title> </head> <body> <h1>Ordered Lists Example</h1> <!-- Basic ordered list with default numbering --> <h2>Recipe Steps (Default Numbers)</h2> <ol> <li>Preheat oven to 350°F</li> <li>Mix flour and sugar</li> <li>Add eggs and milk</li> <li>Bake for 30 minutes</li> <li>Let cool before serving</li> </ol> <!-- Ordered list with uppercase letters --> <h2>Uppercase Letters (A, B, C)</h2> <ol type="A"> <li>Option A</li> <li>Option B</li> <li>Option C</li> </ol> <!-- Ordered list with lowercase letters --> <h2>Lowercase Letters (a, b, c)</h2> <ol type="a"> <li>Item a</li> <li>Item b</li> <li>Item c</li> </ol> <!-- Ordered list with uppercase Roman numerals --> <h2>Uppercase Roman (I, II, III)</h2> <ol type="I"> <li>First</li> <li>Second</li> <li>Third</li> </ol> <!-- Ordered list with lowercase Roman numerals --> <h2>Lowercase Roman (i, ii, iii)</h2> <ol type="i"> <li>First</li> <li>Second</li> <li>Third</li> </ol> <!-- Ordered list starting from a specific number --> <h2>Starting from 5</h2> <ol start="5"> <li>Step 5</li> <li>Step 6</li> <li>Step 7</li> </ol> <!-- Reversed ordered list --> <h2>Reversed Order</h2> <ol reversed> <li>Last item</li> <li>Middle item</li> <li>First item</li> </ol> <!-- Nested ordered list --> <h2>Nested Ordered List</h2> <ol> <li>Chapter 1 <ol type="a"> <li>Section 1.1</li> <li>Section 1.2</li> <li>Section 1.3</li> </ol> </li> <li>Chapter 2 <ol type="a"> <li>Section 2.1</li> <li>Section 2.2</li> </ol> </li> </ol> <!-- Ordered list with CSS styling --> <h2>CSS Styling (Custom Colors)</h2> <ol style="color: #3498db; font-weight: bold;"> <li style="color: #e74c3c;">Red item</li> <li style="color: #27ae60;">Green item</li> <li style="color: #8e44ad;">Purple item</li> </ol> </body> </html>

Step 2: Save the File

  1. Go to File → Save As… (or press Ctrl+Shift+S).
  2. Choose a location (e.g., Desktop).
  3. Name the file: "ordered_list.html" or "practical64.html".
  4. In "Save as type", select All types (*.*).
  5. Click Save.

Step 3: Open in Browser

  1. Navigate to the folder where you saved the file.
  2. Double‑click the ordered_list.html file.
  3. It will open in your default web browser.
  4. You will see all the ordered list examples with different numbering styles.

📊 Ordered List Numbering Types

Type Attribute Numbering Style Example
type="1" (default) Decimal numbers (1, 2, 3...)
  1. Item 1
  2. Item 2
type="A" Uppercase letters (A, B, C...)
  1. Item A
  2. Item B
type="a" Lowercase letters (a, b, c...)
  1. Item a
  2. Item b
type="I" Uppercase Roman (I, II, III...)
  1. Item I
  2. Item II
type="i" Lowercase Roman (i, ii, iii...)
  1. Item i
  2. Item ii

📊 Additional Attributes for Ordered Lists

Attribute Purpose Example
start Specifies the starting number <ol start="5"> → Starts from 5
reversed Reverses the numbering order <ol reversed> → Counts down
type Specifies the numbering style <ol type="A"> → Uses letters

📊 CSS Alternatives for Numbering Styles

<!-- CSS alternatives for ordered list styling --> <!-- Decimal numbers (default) --> <ol style="list-style-type: decimal;"> <li>Item 1</li> </ol> <!-- Uppercase letters --> <ol style="list-style-type: upper-alpha;"> <li>Item A</li> </ol> <!-- Lowercase letters --> <ol style="list-style-type: lower-alpha;"> <li>Item a</li> </ol> <!-- Uppercase Roman numerals --> <ol style="list-style-type: upper-roman;"> <li>Item I</li> </ol> <!-- Lowercase Roman numerals --> <ol style="list-style-type: lower-roman;"> <li>Item i</li> </ol>

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Forgetting the <ol> tag List items won't be grouped or numbered Wrap <li> tags inside <ol>
Using <ol> without <li> Invalid HTML structure Always use <li> for each item
Nesting incorrectly Broken list structure Nested <ol> must be inside <li>
Using type attribute in HTML5 Deprecated in HTML5 Use CSS list-style-type instead
Not closing tags Invalid HTML Always close: <ol>...</ol>

📊 Observations

  • <ol> creates a numbered list where order matters.
  • <li> defines each list item.
  • Default numbering style is decimal (1, 2, 3...).
  • You can change numbering style using type attribute (deprecated) or CSS list-style-type.
  • Use start attribute to begin numbering from a specific number.
  • Use reversed attribute to count down.
  • Lists can be nested inside each other for hierarchical content.
  • CSS provides more styling options for ordered lists.

✅ Result

You have successfully:

  • Created an HTML page with <ol> and <li> tags.
  • Used different numbering styles: decimal, letters, and Roman numerals.
  • Used start and reversed attributes.
  • Created nested ordered lists.
  • Learned about CSS alternatives for list styling.
  • Viewed all examples in a browser.
📌 Important: The type attribute on <ol> is deprecated in HTML5. Use CSS list-style-type for modern web development!
💡 Next Steps: Try creating a nested list with 3 levels of nesting. Experiment with different numbering styles for each level. Create a table of contents using ordered lists styled with CSS!

🎯 مقصد

ایک HTML پروگرام لکھنا جو <ol> (ترتیب شدہ فہرست) اور <li> (فہرست کا آئٹم) ٹیگز کے استعمال کو مختلف نمبرنگ اسٹائلز کے ساتھ ظاہر کرتا ہے۔

🛠️ آپ کو کیا چاہیے

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر

📖 تعارف

HTML میں ترتیب شدہ فہرست کا استعمال ان آئٹمز کی فہرست ظاہر کرنے کے لیے کیا جاتا ہے جو مخصوص ترتیب میں ہیں۔ فہرست کے آئٹمز براؤزر کے ذریعے خود بخود نمبر دیے جاتے ہیں۔

  • <ol> — ترتیب شدہ فہرست کا کنٹینر مخصوص کرتا ہے
  • <li> — فہرست کے اندر ہر آئٹم کی وضاحت کرتا ہے
💡 مشورہ: ترتیب شدہ فہرست ترکیب کے مراحل، ہدایات، درجہ بندی، یا کسی بھی ایسی فہرست کے لیے بہترین ہے جہاں ترتیب کی اہمیت ہوتی ہے!

📊 آؤٹ پٹ کا پیش منظر

📝 ترکیب کے مراحل (ڈیفالٹ نمبرنگ)
  1. اوون کو 350°F پر پہلے سے گرم کریں
  2. آٹا اور چینی مکس کریں
  3. انڈے اور دودھ شامل کریں
  4. 30 منٹ تک بیک کریں
  5. پیش کرنے سے پہلے ٹھنڈا ہونے دیں
🔤 مختلف نمبرنگ اسٹائلز
ڈیسیمل (1, 2, 3):
  1. آئٹم 1
  2. آئٹم 2
  3. آئٹم 3
بڑے حروف (A, B, C):
  1. آئٹم A
  2. آئٹم B
  3. آئٹم C
چھوٹے حروف (a, b, c):
  1. آئٹم a
  2. آئٹم b
  3. آئٹم c
بڑے رومن (I, II, III):
  1. آئٹم I
  2. آئٹم II
  3. آئٹم III
چھوٹے رومن (i, ii, iii):
  1. آئٹم i
  2. آئٹم ii
  3. آئٹم iii
🔢 5 سے شروع کرنا
  1. مرحلہ 5
  2. مرحلہ 6
  3. مرحلہ 7
📂 نیسٹڈ ترتیب شدہ فہرست
  1. باب 1
    1. حصہ 1.1
    2. حصہ 1.2
    3. حصہ 1.3
  2. باب 2
    1. حصہ 2.1
    2. حصہ 2.2

📝 مرحلہ وار: HTML صفحہ بنانا

پہلا قدم: Notepad++ کھولیں اور کوڈ لکھیں

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 64: Demonstrating ordered lists --> <html> <head> <title>Ordered List Demo</title> </head> <body> <h1>ترتیب شدہ فہرست کی مثالیں</h1> <!-- ڈیفالٹ نمبرنگ کے ساتھ بنیادی ترتیب شدہ فہرست --> <h2>ترکیب کے مراحل (ڈیفالٹ نمبرز)</h2> <ol> <li>اوون کو 350°F پر پہلے سے گرم کریں</li> <li>آٹا اور چینی مکس کریں</li> <li>انڈے اور دودھ شامل کریں</li> <li>30 منٹ تک بیک کریں</li> <li>پیش کرنے سے پہلے ٹھنڈا ہونے دیں</li> </ol> <!-- بڑے حروف کے ساتھ ترتیب شدہ فہرست --> <h2>بڑے حروف (A, B, C)</h2> <ol type="A"> <li>آپشن A</li> <li>آپشن B</li> <li>آپشن C</li> </ol> <!-- چھوٹے حروف کے ساتھ ترتیب شدہ فہرست --> <h2>چھوٹے حروف (a, b, c)</h2> <ol type="a"> <li>آئٹم a</li> <li>آئٹم b</li> <li>آئٹم c</li> </ol> <!-- بڑے رومن ہندسوں کے ساتھ ترتیب شدہ فہرست --> <h2>بڑے رومن (I, II, III)</h2> <ol type="I"> <li>پہلا</li> <li>دوسرا</li> <li>تیسرا</li> </ol> <!-- چھوٹے رومن ہندسوں کے ساتھ ترتیب شدہ فہرست --> <h2>چھوٹے رومن (i, ii, iii)</h2> <ol type="i"> <li>پہلا</li> <li>دوسرا</li> <li>تیسرا</li> </ol> <!-- مخصوص نمبر سے شروع ہونے والی ترتیب شدہ فہرست --> <h2>5 سے شروع کرنا</h2> <ol start="5"> <li>مرحلہ 5</li> <li>مرحلہ 6</li> <li>مرحلہ 7</li> </ol> <!-- الٹی ترتیب شدہ فہرست --> <h2>الٹی ترتیب</h2> <ol reversed> <li>آخری آئٹم</li> <li>درمیانی آئٹم</li> <li>پہلا آئٹم</li> </ol> <!-- نیسٹڈ ترتیب شدہ فہرست --> <h2>نیسٹڈ ترتیب شدہ فہرست</h2> <ol> <li>باب 1 <ol type="a"> <li>حصہ 1.1</li> <li>حصہ 1.2</li> <li>حصہ 1.3</li> </ol> </li> <li>باب 2 <ol type="a"> <li>حصہ 2.1</li> <li>حصہ 2.2</li> </ol> </li> </ol> <!-- CSS اسٹائلنگ کے ساتھ ترتیب شدہ فہرست --> <h2>CSS اسٹائلنگ (حسب ضرورت رنگ)</h2> <ol style="color: #3498db; font-weight: bold;"> <li style="color: #e74c3c;">سرخ آئٹم</li> <li style="color: #27ae60;">سبز آئٹم</li> <li style="color: #8e44ad;">جامنی آئٹم</li> </ol> </body> </html>

دوسرا قدم: فائل محفوظ کریں

  1. File → Save As… (یا Ctrl+Shift+S) پر جائیں۔
  2. ایک مقام منتخب کریں (مثلاً Desktop)۔
  3. فائل کا نام رکھیں: "ordered_list.html" یا "practical64.html"۔
  4. "Save as type" میں All types (*.*) منتخب کریں۔
  5. Save پر کلک کریں۔

تیسرا قدم: براؤزر میں کھولیں

  1. اس فولڈر میں جائیں جہاں آپ نے فائل محفوظ کی تھی۔
  2. ordered_list.html فائل پر ڈبل‑کلک کریں۔
  3. یہ آپ کے ڈیفالٹ براؤزر میں کھل جائے گی۔
  4. آپ کو مختلف نمبرنگ اسٹائلز کے ساتھ تمام ترتیب شدہ فہرست کی مثالیں نظر آئیں گی۔

📊 ترتیب شدہ فہرست کی نمبرنگ اقسام

type صفت نمبرنگ اسٹائل مثال
type="1" (ڈیفالٹ) ڈیسیمل نمبرز (1, 2, 3...)
  1. آئٹم 1
  2. آئٹم 2
type="A" بڑے حروف (A, B, C...)
  1. آئٹم A
  2. آئٹم B
type="a" چھوٹے حروف (a, b, c...)
  1. آئٹم a
  2. آئٹم b
type="I" بڑے رومن (I, II, III...)
  1. آئٹم I
  2. آئٹم II
type="i" چھوٹے رومن (i, ii, iii...)
  1. آئٹم i
  2. آئٹم ii

📊 ترتیب شدہ فہرستوں کے لیے اضافی صفات

صفت مقصد مثال
start شروع ہونے والا نمبر مخصوص کرتا ہے <ol start="5"> → 5 سے شروع ہوتا ہے
reversed نمبرنگ کی ترتیب کو الٹ دیتا ہے <ol reversed> → الٹی گنتی
type نمبرنگ کا اسٹائل مخصوص کرتا ہے <ol type="A"> → حروف استعمال کرتا ہے

📊 نمبرنگ اسٹائلز کے لیے CSS متبادل

<!-- ترتیب شدہ فہرست اسٹائلنگ کے لیے CSS متبادل --> <!-- ڈیسیمل نمبرز (ڈیفالٹ) --> <ol style="list-style-type: decimal;"> <li>آئٹم 1</li> </ol> <!-- بڑے حروف --> <ol style="list-style-type: upper-alpha;"> <li>آئٹم A</li> </ol> <!-- چھوٹے حروف --> <ol style="list-style-type: lower-alpha;"> <li>آئٹم a</li> </ol> <!-- بڑے رومن ہندسے --> <ol style="list-style-type: upper-roman;"> <li>آئٹم I</li> </ol> <!-- چھوٹے رومن ہندسے --> <ol style="list-style-type: lower-roman;"> <li>آئٹم i</li> </ol>

📊 عام غلطیاں جن سے بچنا ہے

غلطی یہ کیوں غلط ہے صحیح طریقہ
<ol> ٹیگ بھول جانا فہرست کے آئٹمز گروپ یا نمبر نہیں ہوں گے <li> ٹیگز کو <ol> کے اندر لپیٹیں
<li> کے بغیر <ol> کا استعمال غلط HTML ڈھانچہ ہر آئٹم کے لیے ہمیشہ <li> استعمال کریں
غلط طریقے سے نیسٹ کرنا ٹوٹی ہوئی فہرست کا ڈھانچہ نیسٹڈ <ol> <li> کے اندر ہونا چاہیے
HTML5 میں type صفت کا استعمال HTML5 میں متروک اس کی بجائے CSS list-style-type استعمال کریں
ٹیگز بند نہ کرنا غلط HTML ہمیشہ بند کریں: <ol>...</ol>

📊 مشاہدات

  • <ol> ایک نمبر والی فہرست بناتا ہے جہاں ترتیب کی اہمیت ہوتی ہے۔
  • <li> ہر فہرست آئٹم کی وضاحت کرتا ہے۔
  • ڈیفالٹ نمبرنگ اسٹائل ڈیسیمل (1, 2, 3...) ہے۔
  • آپ type صفت (متروک) یا CSS list-style-type کا استعمال کرکے نمبرنگ اسٹائل تبدیل کر سکتے ہیں۔
  • مخصوص نمبر سے شروع کرنے کے لیے start صفت استعمال کریں۔
  • الٹی گنتی کے لیے reversed صفت استعمال کریں۔
  • فہرستوں کو درجہ بندی کے مواد کے لیے ایک دوسرے کے اندر نیسٹ کیا جا سکتا ہے۔
  • CSS ترتیب شدہ فہرستوں کے لیے مزید اسٹائلنگ آپشنز فراہم کرتا ہے۔

✅ نتیجہ

آپ نے کامیابی سے:

  • <ol> اور <li> ٹیگز کے ساتھ ایک HTML صفحہ بنایا۔
  • مختلف نمبرنگ اسٹائلز کا استعمال کیا: ڈیسیمل، حروف، اور رومن ہندسے۔
  • start اور reversed صفات کا استعمال کیا۔
  • نیسٹڈ ترتیب شدہ فہرستوں کا استعمال کیا۔
  • فہرست اسٹائلنگ کے لیے CSS متبادل کے بارے میں سیکھا۔
  • تمام مثالیں براؤزر میں دیکھیں۔
📌 اہم: <ol> پر type صفت HTML5 میں متروک ہے۔ جدید ویب ڈیولپمنٹ کے لیے CSS list-style-type استعمال کریں!
💡 اگلے اقدامات: 3 سطحوں کی نیسٹنگ کے ساتھ ایک نیسٹڈ فہرست بنانے کی کوشش کریں۔ ہر سطح کے لیے مختلف نمبرنگ اسٹائلز کے ساتھ تجربہ کریں۔ CSS کے ساتھ اسٹائل کردہ ترتیب شدہ فہرستوں کا استعمال کرتے ہوئے ایک مواد کی فہرست (Table of Contents) بنائیں!
⬅ Back to Practical Notebooks