EZ

EZNotes

📋 Practical 66: HTML code for creation of ordered and unordered lists

Learn how to create both ordered (numbered) and unordered (bulleted) lists in HTML with different styling options.

🎯 Aim

To create an HTML program that demonstrates the creation of both ordered lists (<ol>) and unordered lists (<ul>) with different bullet and numbering styles.

🛠️ What You Need

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

📖 Introduction

HTML provides two main types of lists:

  • Unordered List (<ul>) — Displays items with bullets. Used when order doesn't matter.
  • Ordered List (<ol>) — Displays items with numbers or letters. Used when order matters.
  • Both use <li> (list item) tags for each item.
💡 Tip: Use unordered lists for shopping lists, features, or navigation menus. Use ordered lists for steps, instructions, or rankings.

📊 Preview of the Output

📌 Unordered Lists (Bulleted)
Disc (default):
  • Apple
  • Banana
  • Orange
Circle:
  • Apple
  • Banana
  • Orange
Square:
  • Apple
  • Banana
  • Orange
🔢 Ordered Lists (Numbered)
Decimal (1, 2, 3):
  1. Step 1
  2. Step 2
  3. Step 3
Uppercase Alpha (A, B, C):
  1. Item A
  2. Item B
  3. Item C
Uppercase Roman (I, II, III):
  1. First
  2. Second
  3. Third
📂 Nested Lists (Combined)
  • Fruits
    1. Apple
    2. Banana
    3. Orange
  • Vegetables
    • Carrot
    • Spinach
    • Tomato

📝 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 66: Creation of Ordered and Unordered Lists --> <html> <head> <title>Ordered & Unordered Lists</title> </head> <body> <h1>Ordered and Unordered Lists Demo</h1> <!-- ===== UNORDERED LISTS ===== --> <h2>📌 Unordered Lists (Bulleted)</h2> <!-- Default disc bullets --> <h3>Disc Bullets (Default)</h3> <ul> <li>Milk</li> <li>Bread</li> <li>Eggs</li> <li>Butter</li> </ul> <!-- Circle bullets --> <h3>Circle Bullets</h3> <ul type="circle"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <!-- Square bullets --> <h3>Square Bullets</h3> <ul type="square"> <li>Pakistan</li> <li>India</li> <li>China</li> </ul> <!-- ===== ORDERED LISTS ===== --> <h2>🔢 Ordered Lists (Numbered)</h2> <!-- Decimal numbers (default) --> <h3>Decimal Numbers (Default)</h3> <ol> <li>Preheat oven</li> <li>Mix ingredients</li> <li>Bake for 30 minutes</li> <li>Cool and serve</li> </ol> <!-- Uppercase letters --> <h3>Uppercase Letters (A, B, C)</h3> <ol type="A"> <li>Option A</li> <li>Option B</li> <li>Option C</li> </ol> <!-- Lowercase letters --> <h3>Lowercase Letters (a, b, c)</h3> <ol type="a"> <li>First</li> <li>Second</li> <li>Third</li> </ol> <!-- Uppercase Roman numerals --> <h3>Uppercase Roman (I, II, III)</h3> <ol type="I"> <li>Chapter I</li> <li>Chapter II</li> <li>Chapter III</li> </ol> <!-- Lowercase Roman numerals --> <h3>Lowercase Roman (i, ii, iii)</h3> <ol type="i"> <li>Part i</li> <li>Part ii</li> <li>Part iii</li> </ol> <!-- ===== NESTED LISTS ===== --> <h2>📂 Nested Lists (Combined)</h2> <!-- Unordered list with ordered sub-list --> <ul> <li>Fruits <ol> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ol> </li> <li>Vegetables <ul> <li>Carrot</li> <li>Spinach</li> <li>Tomato</li> </ul> </li> </ul> <!-- Ordered list with unordered sub-list --> <ol> <li>Chapter 1 <ul type="circle"> <li>Section 1.1</li> <li>Section 1.2</li> <li>Section 1.3</li> </ul> </li> <li>Chapter 2 <ul type="circle"> <li>Section 2.1</li> <li>Section 2.2</li> </ul> </li> </ol> <!-- ===== CSS STYLED LISTS ===== --> <h2>🎨 CSS Styled Lists</h2> <!-- Unordered list with custom CSS --> <ul style="list-style-type: none; padding: 0;"> <li style="padding: 5px 10px; background: #ebf5fb; margin: 3px 0; border-radius: 5px;">Home</li> <li style="padding: 5px 10px; background: #eafaf1; margin: 3px 0; border-radius: 5px;">About</li> <li style="padding: 5px 10px; background: #fdedec; margin: 3px 0; border-radius: 5px;">Contact</li> </ul> <ol style="list-style-type: decimal; font-weight: bold; color: #2c3e50;"> <li style="color: #3498db;">Blue item</li> <li style="color: #27ae60;">Green item</li> <li style="color: #e74c3c;">Red 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: "lists_demo.html" or "practical66.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 lists_demo.html file.
  3. It will open in your default web browser.
  4. You will see both ordered and unordered lists with different styles.

📊 Unordered List Bullet Types

Type Attribute Bullet Style Example
type="disc" (default) Filled circle (●)
  • Item 1
  • Item 2
type="circle" Hollow circle (○)
  • Item 1
  • Item 2
type="square" Filled square (■)
  • Item 1
  • Item 2
list-style-type: none; No bullets
  • Item 1
  • Item 2

📊 Ordered List Numbering Types

Type Attribute Numbering Style Example
type="1" (default) Decimal (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

📊 Nested Lists: Combining Ordered and Unordered

<!-- Unordered list with ordered sub-list --> <ul> <li>Category 1 <ol> <li>Sub-item 1.1</li> <li>Sub-item 1.2</li> </ol> </li> <li>Category 2 <ul type="circle"> <li>Sub-item 2.1</li> <li>Sub-item 2.2</li> </ul> </li> </ul>
💡 Tip: You can nest lists inside each other to create complex hierarchical structures. Use different bullet or numbering styles for each level to make them visually distinct.

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Using <ul> or <ol> without <li> Invalid HTML structure Always use <li> for each item
Putting text directly inside <ul> or <ol> Text won't display correctly Always wrap text inside <li>
Incorrect nesting of lists Broken list structure Nested lists must be inside <li>
Using type attribute in HTML5 Deprecated in HTML5 Use CSS list-style-type
Forgetting to close tags Invalid HTML Always close all tags: <ul>...</ul>

📊 Observations

  • Unordered lists use bullets (disc, circle, square) and are used when order doesn't matter.
  • Ordered lists use numbers or letters and are used when order matters.
  • Both use the <li> tag for each list item.
  • Lists can be nested inside each other for hierarchical content.
  • You can change bullet/numbering styles using the type attribute or CSS list-style-type.
  • CSS provides more styling options including custom images as bullets.
  • Nested lists can combine both ordered and unordered lists for complex structures.

✅ Result

You have successfully:

  • Created HTML pages with unordered lists (<ul>) with different bullet styles.
  • Created HTML pages with ordered lists (<ol>) with different numbering styles.
  • Created nested lists combining both types.
  • Learned about CSS alternatives for list styling.
  • Viewed all examples in a browser.
📌 Important: The type attribute on lists is deprecated in HTML5. Use CSS list-style-type for modern web development! Also, always use <li> for list items.
💡 Next Steps: Try creating a complex nested list with 3+ levels. Use CSS to style your lists with different colors, padding, and custom bullet images. Create a navigation menu using unordered lists styled with CSS!

🎯 مقصد

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

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

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

📖 تعارف

HTML دو اہم اقسام کی فہرستیں فراہم کرتا ہے:

  • غیر ترتیب شدہ فہرست (<ul>) — آئٹمز کو بلٹس کے ساتھ ظاہر کرتی ہے۔ جب ترتیب کی کوئی اہمیت نہ ہو تو استعمال کریں۔
  • ترتیب شدہ فہرست (<ol>) — آئٹمز کو نمبرز یا حروف کے ساتھ ظاہر کرتی ہے۔ جب ترتیب کی اہمیت ہو تو استعمال کریں۔
  • دونوں ہر آئٹم کے لیے <li> (فہرست کا آئٹم) ٹیگ استعمال کرتی ہیں۔
💡 مشورہ: شاپنگ لسٹ، خصوصیات، یا نیویگیشن مینو کے لیے غیر ترتیب شدہ فہرست استعمال کریں۔ مراحل، ہدایات، یا درجہ بندی کے لیے ترتیب شدہ فہرست استعمال کریں۔

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

📌 غیر ترتیب شدہ فہرست (بلٹڈ)
ڈسک (ڈیفالٹ):
  • سیب
  • کیلا
  • سنترہ
سرکل:
  • سیب
  • کیلا
  • سنترہ
اسکوائر:
  • سیب
  • کیلا
  • سنترہ
🔢 ترتیب شدہ فہرست (نمبرڈ)
ڈیسیمل (1, 2, 3):
  1. مرحلہ 1
  2. مرحلہ 2
  3. مرحلہ 3
بڑے حروف (A, B, C):
  1. آئٹم A
  2. آئٹم B
  3. آئٹم C
بڑے رومن (I, II, III):
  1. پہلا
  2. دوسرا
  3. تیسرا
📂 نیسٹڈ فہرست (مشترکہ)
  • پھل
    1. سیب
    2. کیلا
    3. سنترہ
  • سبزیاں
    • گاجر
    • پالک
    • ٹماٹر

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 66: Creation of Ordered and Unordered Lists --> <html> <head> <title>Ordered & Unordered Lists</title> </head> <body> <h1>ترتیب شدہ اور غیر ترتیب شدہ فہرستوں کا ڈیمو</h1> <!-- ===== غیر ترتیب شدہ فہرست ===== --> <h2>📌 غیر ترتیب شدہ فہرست (بلٹڈ)</h2> <!-- ڈیفالٹ ڈسک بلٹس --> <h3>ڈسک بلٹس (ڈیفالٹ)</h3> <ul> <li>دودھ</li> <li>روٹی</li> <li>انڈے</li> <li>مکھن</li> </ul> <!-- سرکل بلٹس --> <h3>سرکل بلٹس</h3> <ul type="circle"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <!-- اسکوائر بلٹس --> <h3>اسکوائر بلٹس</h3> <ul type="square"> <li>پاکستان</li> <li>بھارت</li> <li>چین</li> </ul> <!-- ===== ترتیب شدہ فہرست ===== --> <h2>🔢 ترتیب شدہ فہرست (نمبرڈ)</h2> <!-- ڈیسیمل نمبرز (ڈیفالٹ) --> <h3>ڈیسیمل نمبرز (ڈیفالٹ)</h3> <ol> <li>اوون کو گرم کریں</li> <li>اجزاء مکس کریں</li> <li>30 منٹ بیک کریں</li> <li>ٹھنڈا کریں اور پیش کریں</li> </ol> <!-- بڑے حروف --> <h3>بڑے حروف (A, B, C)</h3> <ol type="A"> <li>آپشن A</li> <li>آپشن B</li> <li>آپشن C</li> </ol> <!-- چھوٹے حروف --> <h3>چھوٹے حروف (a, b, c)</h3> <ol type="a"> <li>پہلا</li> <li>دوسرا</li> <li>تیسرا</li> </ol> <!-- بڑے رومن ہندسے --> <h3>بڑے رومن (I, II, III)</h3> <ol type="I"> <li>باب I</li> <li>باب II</li> <li>باب III</li> </ol> <!-- چھوٹے رومن ہندسے --> <h3>چھوٹے رومن (i, ii, iii)</h3> <ol type="i"> <li>حصہ i</li> <li>حصہ ii</li> <li>حصہ iii</li> </ol> <!-- ===== نیسٹڈ فہرست ===== --> <h2>📂 نیسٹڈ فہرست (مشترکہ)</h2> <!-- غیر ترتیب شدہ فہرست کے ساتھ ترتیب شدہ ذیلی فہرست --> <ul> <li>پھل <ol> <li>سیب</li> <li>کیلا</li> <li>سنترہ</li> </ol> </li> <li>سبزیاں <ul> <li>گاجر</li> <li>پالک</li> <li>ٹماٹر</li> </ul> </li> </ul> <!-- ترتیب شدہ فہرست کے ساتھ غیر ترتیب شدہ ذیلی فہرست --> <ol> <li>باب 1 <ul type="circle"> <li>حصہ 1.1</li> <li>حصہ 1.2</li> <li>حصہ 1.3</li> </ul> </li> <li>باب 2 <ul type="circle"> <li>حصہ 2.1</li> <li>حصہ 2.2</li> </ul> </li> </ol> <!-- ===== CSS کے ساتھ اسٹائل شدہ فہرست ===== --> <h2>🎨 CSS کے ساتھ اسٹائل شدہ فہرست</h2> <ul style="list-style-type: none; padding: 0;"> <li style="padding: 5px 10px; background: #ebf5fb; margin: 3px 0; border-radius: 5px;">ہوم</li> <li style="padding: 5px 10px; background: #eafaf1; margin: 3px 0; border-radius: 5px;">تعارف</li> <li style="padding: 5px 10px; background: #fdedec; margin: 3px 0; border-radius: 5px;">رابطہ</li> </ul> <ol style="list-style-type: decimal; font-weight: bold; color: #2c3e50;"> <li style="color: #3498db;">نیلا آئٹم</li> <li style="color: #27ae60;">سبز آئٹم</li> <li style="color: #e74c3c;">سرخ آئٹم</li> </ol> </body> </html>

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

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

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

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

📊 غیر ترتیب شدہ فہرست کی بلٹ اقسام

type صفت بلٹ اسٹائل مثال
type="disc" (ڈیفالٹ) بھرا ہوا دائرہ (●)
  • آئٹم 1
  • آئٹم 2
type="circle" کھوکھلا دائرہ (○)
  • آئٹم 1
  • آئٹم 2
type="square" بھرا ہوا مربع (■)
  • آئٹم 1
  • آئٹم 2
list-style-type: none; کوئی بلٹ نہیں
  • آئٹم 1
  • آئٹم 2

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

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

📊 نیسٹڈ فہرست: ترتیب شدہ اور غیر ترتیب شدہ کو یکجا کرنا

<!-- ترتیب شدہ ذیلی فہرست کے ساتھ غیر ترتیب شدہ فہرست --> <ul> <li>زمرہ 1 <ol> <li>ذیلی آئٹم 1.1</li> <li>ذیلی آئٹم 1.2</li> </ol> </li> <li>زمرہ 2 <ul type="circle"> <li>ذیلی آئٹم 2.1</li> <li>ذیلی آئٹم 2.2</li> </ul> </li> </ul>
💡 مشورہ: آپ پیچیدہ درجہ بندی کے ڈھانچے بنانے کے لیے فہرستوں کو ایک دوسرے کے اندر نیسٹ کر سکتے ہیں۔ ہر سطح کے لیے مختلف بلٹ یا نمبرنگ اسٹائل استعمال کریں تاکہ وہ بصری طور پر الگ ہوں۔

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

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

📊 مشاہدات

  • غیر ترتیب شدہ فہرست بلٹس (ڈسک، سرکل، اسکوائر) استعمال کرتی ہے اور جب ترتیب کی کوئی اہمیت نہ ہو تو استعمال ہوتی ہے۔
  • ترتیب شدہ فہرست نمبرز یا حروف استعمال کرتی ہے اور جب ترتیب کی اہمیت ہو تو استعمال ہوتی ہے۔
  • دونوں ہر فہرست آئٹم کے لیے <li> ٹیگ استعمال کرتی ہیں۔
  • فہرستوں کو درجہ بندی کے مواد کے لیے ایک دوسرے کے اندر نیسٹ کیا جا سکتا ہے۔
  • آپ type صفت یا CSS list-style-type کا استعمال کرکے بلٹ/نمبرنگ اسٹائل تبدیل کر سکتے ہیں۔
  • CSS بلٹس کے طور پر حسب ضرورت تصاویر سمیت مزید اسٹائلنگ آپشنز فراہم کرتا ہے۔
  • نیسٹڈ فہرست پیچیدہ ڈھانچوں کے لیے ترتیب شدہ اور غیر ترتیب شدہ دونوں فہرستوں کو یکجا کر سکتی ہے۔

✅ نتیجہ

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

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