EZ

EZNotes

🔄 Practical 68: HTML code displaying Types of Loops in C/C++ as ordered list

Learn how to create an HTML webpage that lists and explains the different types of loops in C/C++ using an ordered list.

🎯 Aim

To create an HTML webpage that displays the Types of Loops in C/C++ using an ordered list (<ol>) with proper descriptions and syntax examples.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result
  • Basic understanding of HTML ordered lists

📖 Introduction

In C and C++ programming, loops are used to execute a block of code repeatedly. There are three main types of loops:

  1. for loop — used when the number of iterations is known
  2. while loop — used when the number of iterations is unknown
  3. do-while loop — similar to while but executes at least once
💡 Tip: Use an ordered list (<ol>) when presenting information in a specific sequence. This makes the content well-organized and easy to follow.

📊 Preview of the Output

🔄 Types of Loops in C/C++

📋 The Three Main Loops
  1. for Loop

    Used when the number of iterations is known in advance. It has three parts: initialization, condition, and increment/decrement.

    for (int i = 0; i < 10; i++) { // code }
  2. while Loop

    Used when the number of iterations is not known and depends on a condition. It checks the condition before executing the code.

    while (condition) { // code }
  3. do-while Loop

    Similar to while loop but executes the code at least once before checking the condition.

    do { // code } while (condition);
📊 Comparison Table
Feature for Loop while Loop do-while Loop
Condition Check Before each iteration Before each iteration After each iteration
Minimum Executions 0 (if condition false) 0 (if condition false) 1 (always executes once)
Use Case Known number of iterations Unknown iterations, condition-based At least one execution needed

📝 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 68: Types of Loops in C/C++ as Ordered List --> <html> <head> <title>Types of Loops in C/C++</title> </head> <body> <h1>🔄 Types of Loops in C/C++</h1> <p> In C and C++ programming, loops are control structures that allow a block of code to be executed repeatedly. There are three main types of loops: </p> <!-- Ordered list of loop types --> <ol> <li> for Loop <br> The for loop is used when the number of iterations is known in advance. It consists of three parts: initialization, condition, and increment/decrement. <br> Syntax: <br> for (initialization; condition; increment/decrement) { <br> // code to be executed <br> } <br> Example: <br> for (int i = 0; i < 10; i++) { <br> printf("%d ", i); <br> } </li> <li> while Loop <br> The while loop is used when the number of iterations is not known and depends on a condition. It checks the condition before executing the loop body. <br> Syntax: <br> while (condition) { <br> // code to be executed <br> } <br> Example: <br> int i = 0; <br> while (i < 10) { <br> printf("%d ", i); <br> i++; <br> } </li> <li> do-while Loop <br> The do-while loop is similar to the while loop, but it executes the loop body at least once before checking the condition. <br> Syntax: <br> do { <br> // code to be executed <br> } while (condition); <br> Example: <br> int i = 0; <br> do { <br> printf("%d ", i); <br> i++; <br> } while (i < 10); </li> </ol> <!-- Comparison Section --> <h2>📊 Comparison of Loops</h2> <table border="1" cellpadding="8" cellspacing="0" style="width: 100%; border-collapse: collapse;"> <thead> <tr style="background: #2c3e50; color: white;"> <th>Feature</th> <th>for Loop</th> <th>while Loop</th> <th>do-while Loop</th> </tr> </thead> <tbody> <tr> <td>Condition Check</strong></td> <td>Before iteration</td> <td>Before iteration</td> <td>After iteration</td> </tr> <tr> <td>Minimum Executions</strong></td> <td>0</td> <td>0</td> <td>1</td> </tr> <tr> <td>Use Case</strong></td> <td>Known iterations</td> <td>Unknown iterations</td> <td>At least once needed</td> </tr> <tr> <td>Example</strong></td> <td>for (int i=0; i<10; i++)</td> <td>while (i < 10)</td> <td>do { ... } while (i < 10)</td> </tr> </tbody> </table> <!-- Summary --> <h2>📌 Summary</h2> <p> In summary, C/C++ provides three types of loops: <ol> <li>for loop — best when you know exactly how many times to iterate.</li> <li>while loop — best when you don't know the number of iterations.</li> <li>do-while loop — best when you need to execute at least once.</li> </ol> Each loop has its own use case, and choosing the right loop makes your code more efficient and readable. </p> </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: "loops_in_cpp.html" or "practical68.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 loops_in_cpp.html file.
  3. It will open in your default web browser.
  4. You will see the ordered list of loop types with descriptions and syntax examples.

📊 Comparison of Loops

Feature for Loop while Loop do-while Loop
Condition Check Before iteration Before iteration After iteration
Minimum Executions 0 0 1
Use Case Known iterations Unknown iterations At least once needed
Syntax Complexity Moderate (3 parts) Simple (1 condition) Simple (1 condition)

📊 HTML Elements Used in This Practical

HTML Element Purpose Example
<ol> Ordered list for numbered items Listing the three loop types
<li> List items inside ordered list Each loop type as an item
<h1> to <h3> Headings for structure Main title, section headings
<p> Paragraphs for descriptions Explanations of each loop
<code> Code snippets Syntax examples
<table> Comparison table Comparing loop features

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Using <ul> instead of <ol> Numbers are important for showing sequence Use <ol> for ordered lists
Putting text directly inside <ol> Invalid HTML structure Always wrap content in <li>
Not using <code> for syntax Code doesn't stand out Use <code> or <pre> for code
Forgetting to close tags Invalid HTML Always close: <ol>...</ol>

📊 Observations

  • Ordered lists (<ol>) are perfect for listing items in a specific sequence.
  • Each loop type is clearly numbered, making it easy to reference.
  • Using bold text (<strong>) helps emphasize important terms.
  • Using <code> for syntax makes code snippets stand out.
  • The comparison table helps readers quickly understand the differences.
  • Proper HTML structure improves readability and accessibility.

✅ Result

You have successfully:

  • Created an HTML webpage that lists the Types of Loops in C/C++.
  • Used an ordered list (<ol>) for numbered display.
  • Added descriptions and syntax examples for each loop.
  • Included a comparison table for quick reference.
  • Viewed the complete webpage in a browser.
📌 Important: Use ordered lists when the sequence or order of items matters. In this practical, the loops are presented in a logical order (for → while → do-while) to help students understand their progression and use cases.
💡 Next Steps: Try adding more details like infinite loops, nested loops, or loop control statements (break, continue). You can also add code examples in different languages or create a flowchart for each loop type!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو C/C++ میں لوپ کی اقسام کو ترتیب شدہ فہرست (<ol>) کے ساتھ مناسب وضاحتوں اور نحو کی مثالوں کے ساتھ ظاہر کرتا ہے۔

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

  • Notepad++ یا کوئی بھی ٹیکسٹ ایڈیٹر
  • نتیجہ دیکھنے کے لیے ایک ویب براؤزر
  • HTML ترتیب شدہ فہرستوں کی بنیادی معلومات

📖 تعارف

C اور C++ پروگرامنگ میں، لوپس کا استعمال کوڈ کے ایک بلاک کو بار بار چلانے کے لیے کیا جاتا ہے۔ لوپ کی تین اہم اقسام ہیں:

  1. for loop — جب تکرار کی تعداد معلوم ہو
  2. while loop — جب تکرار کی تعداد نامعلوم ہو
  3. do-while loop — while کی طرح لیکن کم از کم ایک بار چلتی ہے
💡 مشورہ: معلومات کو مخصوص ترتیب میں پیش کرتے وقت ترتیب شدہ فہرست (<ol>) استعمال کریں۔ یہ مواد کو اچھی طرح سے منظم اور پیروی کرنے میں آسان بناتا ہے۔

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

🔄 C/C++ میں لوپ کی اقسام

📋 تین اہم لوپ
  1. for Loop

    جب تکرار کی تعداد پہلے سے معلوم ہو تو استعمال ہوتا ہے۔ اس کے تین حصے ہیں: ابتدائیہ، شرط، اور اضافہ/کمی۔

    for (int i = 0; i < 10; i++) { // code }
  2. while Loop

    جب تکرار کی تعداد معلوم نہ ہو اور کسی شرط پر منحصر ہو تو استعمال ہوتا ہے۔ یہ کوڈ چلانے سے پہلے شرط چیک کرتا ہے۔

    while (condition) { // code }
  3. do-while Loop

    while لوپ کی طرح لیکن شرط چیک کرنے سے پہلے کم از کم ایک بار کوڈ چلاتا ہے۔

    do { // code } while (condition);
📊 موازنہ کی میز
خصوصیت for Loop while Loop do-while Loop
شرط کی جانچ ہر تکرار سے پہلے ہر تکرار سے پہلے ہر تکرار کے بعد
کم از کم نفاذ 0 0 1
استعمال کی صورت معلوم تکرار نامعلوم تکرار کم از کم ایک بار کی ضرورت

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 68: Types of Loops in C/C++ as Ordered List --> <html> <head> <title>Types of Loops in C/C++</title> </head> <body> <h1>🔄 C/C++ میں لوپ کی اقسام</h1> <p> C اور C++ پروگرامنگ میں، لوپس کنٹرول ڈھانچے ہیں جو کوڈ کے بلاک کو بار بار چلانے کی اجازت دیتے ہیں۔ لوپ کی تین اہم اقسام ہیں: </p> <!-- ترتیب شدہ فہرست --> <ol> <li> for Loop <br> for loop اس وقت استعمال ہوتا ہے جب تکرار کی تعداد پہلے سے معلوم ہو۔ اس کے تین حصے ہیں: ابتدائیہ، شرط، اور اضافہ/کمی۔ <br> نحو (Syntax): <br> for (initialization; condition; increment/decrement) { <br> // code to be executed <br> } <br> مثال: <br> for (int i = 0; i < 10; i++) { <br> printf("%d ", i); <br> } </li> <li> while Loop <br> while loop اس وقت استعمال ہوتا ہے جب تکرار کی تعداد معلوم نہ ہو اور کسی شرط پر منحصر ہو۔ یہ لوپ باڈی کو چلانے سے پہلے شرط چیک کرتا ہے۔ <br> نحو (Syntax): <br> while (condition) { <br> // code to be executed <br> } <br> مثال: <br> int i = 0; <br> while (i < 10) { <br> printf("%d ", i); <br> i++; <br> } </li> <li> do-while Loop <br> do-while loop while لوپ کی طرح ہے، لیکن یہ شرط چیک کرنے سے پہلے کم از کم ایک بار لوپ باڈی کو چلاتا ہے۔ <br> نحو (Syntax): <br> do { <br> // code to be executed <br> } while (condition); <br> مثال: <br> int i = 0; <br> do { <br> printf("%d ", i); <br> i++; <br> } while (i < 10); </li> </ol> <!-- موازنہ کا حصہ --> <h2>📊 لوپس کا موازنہ</h2> <table border="1" cellpadding="8" cellspacing="0" style="width: 100%; border-collapse: collapse;"> <thead> <tr style="background: #2c3e50; color: white;"> <th>خصوصیت</th> <th>for Loop</th> <th>while Loop</th> <th>do-while Loop</th> </tr> </thead> <tbody> <tr> <td>شرط کی جانچ</strong></td> <td>تکرار سے پہلے</td> <td>تکرار سے پہلے</td> <td>تکرار کے بعد</td> </tr> <tr> <td>کم از کم نفاذ</strong></td> <td>0</td> <td>0</td> <td>1</td> </tr> <tr> <td>استعمال کی صورت</strong></td> <td>معلوم تکرار</td> <td>نامعلوم تکرار</td> <td>کم از کم ایک بار کی ضرورت</td> </tr> <tr> <td>مثال</strong></td> <td>for (int i=0; i<10; i++)</td> <td>while (i < 10)</td> <td>do { ... } while (i < 10)</td> </tr> </tbody> </table> <!-- خلاصہ --> <h2>📌 خلاصہ</h2> <p> خلاصہ یہ کہ C/C++ تین اقسام کے لوپ فراہم کرتا ہے: <ol> <li>for loop — جب آپ کو معلوم ہو کہ کتنی بار تکرار کرنی ہے۔</li> <li>while loop — جب آپ کو تکرار کی تعداد معلوم نہ ہو۔</li> <li>do-while loop — جب آپ کو کم از کم ایک بار چلانے کی ضرورت ہو۔</li> </ol> ہر لوپ کا اپنا استعمال کا معاملہ ہے، اور صحیح لوپ کا انتخاب آپ کے کوڈ کو زیادہ موثر اور پڑھنے کے قابل بناتا ہے۔ </p> </body> </html>

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

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

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

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

📊 لوپس کا موازنہ

خصوصیت for Loop while Loop do-while Loop
شرط کی جانچ تکرار سے پہلے تکرار سے پہلے تکرار کے بعد
کم از کم نفاذ 0 0 1
استعمال کی صورت معلوم تکرار نامعلوم تکرار کم از کم ایک بار کی ضرورت
نحو کی پیچیدگی درمیانی (3 حصے) سادہ (1 شرط) سادہ (1 شرط)

📊 اس عملی میں استعمال ہونے والے HTML عناصر

HTML عنصر مقصد مثال
<ol> نمبر والی اشیاء کے لیے ترتیب شدہ فہرست تین لوپ اقسام کی فہرست
<li> ترتیب شدہ فہرست کے اندر فہرست کی اشیاء ہر لوپ کی قسم بطور آئٹم
<h1> سے <h3> ڈھانچے کے لیے ہیڈنگز مرکزی عنوان، سیکشن ہیڈنگز
<p> وضاحتوں کے لیے پیراگراف ہر لوپ کی وضاحتیں
<code> کوڈ کے ٹکڑے نحو کی مثالیں
<table> موازنہ کی میز لوپ کی خصوصیات کا موازنہ

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

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

📊 مشاہدات

  • ترتیب شدہ فہرست (<ol>) اشیاء کو مخصوص ترتیب میں درج کرنے کے لیے بہترین ہے۔
  • ہر لوپ کی قسم واضح طور پر نمبر دی گئی ہے، جس سے حوالہ دینا آسان ہے۔
  • بولڈ ٹیکسٹ (<strong>) کا استعمال اہم اصطلاحات کو نمایاں کرنے میں مدد کرتا ہے۔
  • نحو کے لیے <code> کا استعمال کوڈ کے ٹکڑوں کو نمایاں کرتا ہے۔
  • موازنہ کی میز قارئین کو اختلافات کو فوری طور پر سمجھنے میں مدد کرتی ہے۔
  • مناسب HTML ڈھانچہ پڑھنے کی اہلیت اور رسائی کو بہتر بناتا ہے۔

✅ نتیجہ

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

  • C/C++ میں لوپ کی اقسام کی فہرست دینے والا ایک HTML ویب صفحہ بنایا۔
  • نمبر والی نمائش کے لیے ترتیب شدہ فہرست (<ol>) کا استعمال کیا۔
  • ہر لوپ کے لیے وضاحتیں اور نحو کی مثالیں شامل کیں۔
  • فوری حوالہ کے لیے موازنہ کی میز شامل کی۔
  • مکمل ویب صفحہ کو براؤزر میں دیکھا۔
📌 اہم: جب اشیاء کی ترتیب یا ترتیب اہم ہو تو ترتیب شدہ فہرست استعمال کریں۔ اس عملی میں، لوپس کو منطقی ترتیب میں پیش کیا گیا ہے (for → while → do-while) تاکہ طلباء کو ان کی ترقی اور استعمال کے معاملات کو سمجھنے میں مدد ملے۔
💡 اگلے اقدامات: مزید تفصیلات شامل کرنے کی کوشش کریں جیسے لامحدود لوپ، نیسٹڈ لوپ، یا لوپ کنٹرول اسٹیٹمنٹس (break, continue)۔ آپ مختلف زبانوں میں کوڈ کی مثالیں بھی شامل کر سکتے ہیں یا ہر لوپ کی قسم کے لیے فلو چارٹ بنا سکتے ہیں!