EZ

EZNotes

🔬 Practical 60: HTML code using superscript and subscript tags for chemistry formulas and quadratic equations

Learn how to use the <sup> (superscript) and <sub> (subscript) tags to display chemical formulas and mathematical equations correctly.

🎯 Aim

To write an HTML program that demonstrates the use of <sup> (superscript) and <sub> (subscript) tags to display chemistry formulas and quadratic equations correctly.

🛠️ What You Need

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

📖 Introduction

HTML provides two special tags for displaying text that needs to be positioned above or below the normal baseline:

  • <sup> — Superscript text appears higher than normal text. Used for exponents, powers, and mathematical superscripts.
  • <sub> — Subscript text appears lower than normal text. Used for chemical formulas, indices, and mathematical subscripts.
💡 Tip: These tags are essential for correctly displaying scientific and mathematical content. Without them, formulas like H₂O would look like H2O, which is incorrect!

📊 Preview of the Output

🧪 Chemistry Formulas
Water: H2O
Carbon Dioxide: CO2
Methane: CH4
Glucose: C6H12O6
Sulfuric Acid: H2SO4
Ammonia: NH3
Sodium Chloride: NaCl
📐 Quadratic Equations
Quadratic Formula: x = (-b ± √(b2 - 4ac)) / 2a
General Form: ax2 + bx + c = 0
Example: 3x2 - 5x + 2 = 0
Discriminant: D = b2 - 4ac
🔢 Mathematical Expressions
Pythagorean Theorem: a2 + b2 = c2
Area of Circle: A = πr2
Volume of Sphere: V = (4/3)πr3
Einstein's Equation: E = mc2

📝 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 60: Demonstrating superscript and subscript tags --> <html> <head> <title>Superscript & Subscript Demo</title> </head> <body> <h1>Chemistry Formulas & Quadratic Equations</h1> <!-- Chemistry Formulas --> <h2>🧪 Chemistry Formulas</h2> <p>Water: H<sub>2</sub>O</p> <p>Carbon Dioxide: CO<sub>2</sub></p> <p>Methane: CH<sub>4</sub></p> <p>Glucose: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p> <p>Sulfuric Acid: H<sub>2</sub>SO<sub>4</sub></p> <!-- Quadratic Equations --> <h2>📐 Quadratic Equations</h2> <p>General Form: ax<sup>2</sup> + bx + c = 0</p> <p>Quadratic Formula: x = (-b ± √(b<sup>2</sup> - 4ac)) / 2a</p> <p>Example: 3x<sup>2</sup> - 5x + 2 = 0</p> <p>Discriminant: D = b<sup>2</sup> - 4ac</p> <!-- Mathematical Expressions --> <h2>🔢 Mathematical Expressions</h2> <p>Pythagorean Theorem: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p> <p>Area of Circle: A = πr<sup>2</sup></p> <p>Einstein's Equation: E = mc<sup>2</sup></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: "formulas.html" or "practical60.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 formulas.html file.
  3. It will open in your default web browser.
  4. You will see all chemistry formulas and equations displayed with proper superscripts and subscripts.

📊 Common Chemistry Formulas Using Subscript

Formula Name Chemical Formula HTML Code
Water H2O H<sub>2</sub>O
Carbon Dioxide CO2 CO<sub>2</sub>
Methane CH4 CH<sub>4</sub>
Glucose C6H12O6 C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
Sulfuric Acid H2SO4 H<sub>2</sub>SO<sub>4</sub>
Ammonia NH3 NH<sub>3</sub>

📊 Mathematical Expressions Using Superscript

Expression Mathematical Notation HTML Code
Square x2 x<sup>2</sup>
Cube a3 a<sup>3</sup>
Quadratic ax2 + bx + c ax<sup>2</sup> + bx + c
Pythagorean a2 + b2 = c2 a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
Einstein E = mc2 E = mc<sup>2</sup>

📊 Combining Superscript and Subscript

<!-- Combining both tags --> <p>Isotope: <sup>14</sup>C<sub>6</sub></p> <p>Ion: <sup>2+</sup>Ca<sub>2+</sub></p>
💡 Tip: You can nest <sup> and <sub> tags inside each other or combine them in the same element for complex scientific notation!

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Writing H2O instead of H2O Incorrect chemical formula Use <sub>2</sub>
Writing x2 instead of x2 Looks like x times 2, not x squared Use <sup>2</sup>
Forgetting to close tags Invalid HTML Always close: <sup>...</sup>
Using superscript for subscripts Wrong positioning Use <sub> for lower position

📊 Observations

  • <sup> raises text above the baseline — perfect for exponents and powers.
  • <sub> lowers text below the baseline — perfect for chemical formulas.
  • These tags are essential for scientific and mathematical content.
  • You can use multiple <sup> or <sub> tags in one line.
  • Proper formatting makes content more professional and readable.

✅ Result

You have successfully:

  • Created an HTML page using <sup> and <sub> tags.
  • Displayed chemistry formulas with subscripts.
  • Displayed quadratic equations and mathematical expressions with superscripts.
  • Viewed the correctly formatted scientific content in a browser.
📌 Important: Superscript and subscript tags are crucial for displaying scientific and mathematical content correctly. Always use them instead of plain text for exponents, powers, and chemical formulas!
💡 Next Steps: Try creating more complex formulas like the quadratic formula with both superscript and subscript. Experiment with nested tags for advanced scientific notation. You can also use CSS to further style the superscript and subscript text!

🎯 مقصد

ایک HTML پروگرام لکھنا جو <sup> (سپر اسکرپٹ) اور <sub> (سب اسکرپٹ) ٹیگز کے استعمال کو ظاہر کرتا ہے تاکہ کیمسٹری فارمولے اور کواڈریٹک مساوات کو صحیح طریقے سے ظاہر کیا جا سکے۔

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

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

📖 تعارف

HTML دو خاص ٹیگز فراہم کرتا ہے جو ٹیکسٹ کو عام بیس لائن سے اوپر یا نیچے ظاہر کرنے کے لیے ہیں:

  • <sup> — سپر اسکرپٹ ٹیکسٹ عام ٹیکسٹ سے اوپر ظاہر ہوتا ہے۔ ایکسپوننٹس، پاورز، اور ریاضیاتی سپر اسکرپٹس کے لیے استعمال ہوتا ہے۔
  • <sub> — سب اسکرپٹ ٹیکسٹ عام ٹیکسٹ سے نیچے ظاہر ہوتا ہے۔ کیمیکل فارمولوں، انڈیکسز، اور ریاضیاتی سب اسکرپٹس کے لیے استعمال ہوتا ہے۔
💡 مشورہ: یہ ٹیگز سائنسی اور ریاضیاتی مواد کو صحیح طریقے سے ظاہر کرنے کے لیے ضروری ہیں۔ ان کے بغیر، H₂O جیسے فارمولے H2O نظر آئیں گے، جو غلط ہے!

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

🧪 کیمسٹری فارمولے
پانی: H2O
کاربن ڈائی آکسائیڈ: CO2
میتھین: CH4
گلوکوز: C6H12O6
سلفیورک ایسڈ: H2SO4
امونیا: NH3
سوڈیم کلورائیڈ: NaCl
📐 کواڈریٹک مساوات
کواڈریٹک فارمولا: x = (-b ± √(b2 - 4ac)) / 2a
جنرل فارم: ax2 + bx + c = 0
مثال: 3x2 - 5x + 2 = 0
ڈسکریمیننٹ: D = b2 - 4ac
🔢 ریاضیاتی اظہارات
پائی تھیگورس تھیوریم: a2 + b2 = c2
دائرے کا رقبہ: A = πr2
کرہ کا حجم: V = (4/3)πr3
آئن سٹائن کی مساوات: E = mc2

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 60: Demonstrating superscript and subscript tags --> <html> <head> <title>Superscript & Subscript Demo</title> </head> <body> <h1>کیمسٹری فارمولے اور کواڈریٹک مساوات</h1> <!-- Chemistry Formulas --> <h2>🧪 کیمسٹری فارمولے</h2> <p>پانی: H<sub>2</sub>O</p> <p>کاربن ڈائی آکسائیڈ: CO<sub>2</sub></p> <p>میتھین: CH<sub>4</sub></p> <p>گلوکوز: C<sub>6</sub>H<sub>12</sub>O<sub>6</sub></p> <p>سلفیورک ایسڈ: H<sub>2</sub>SO<sub>4</sub></p> <!-- Quadratic Equations --> <h2>📐 کواڈریٹک مساوات</h2> <p>جنرل فارم: ax<sup>2</sup> + bx + c = 0</p> <p>کواڈریٹک فارمولا: x = (-b ± √(b<sup>2</sup> - 4ac)) / 2a</p> <p>مثال: 3x<sup>2</sup> - 5x + 2 = 0</p> <p>ڈسکریمیننٹ: D = b<sup>2</sup> - 4ac</p> <!-- Mathematical Expressions --> <h2>🔢 ریاضیاتی اظہارات</h2> <p>پائی تھیگورس تھیوریم: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p> <p>دائرے کا رقبہ: A = πr<sup>2</sup></p> <p>آئن سٹائن کی مساوات: E = mc<sup>2</sup></p> </body> </html>

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

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

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

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

📊 سب اسکرپٹ والے عام کیمسٹری فارمولے

فارمولا کا نام کیمیکل فارمولا HTML کوڈ
پانی H2O H<sub>2</sub>O
کاربن ڈائی آکسائیڈ CO2 CO<sub>2</sub>
میتھین CH4 CH<sub>4</sub>
گلوکوز C6H12O6 C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
سلفیورک ایسڈ H2SO4 H<sub>2</sub>SO<sub>4</sub>
امونیا NH3 NH<sub>3</sub>

📊 سپر اسکرپٹ والے ریاضیاتی اظہارات

اظہار ریاضیاتی اشارہ HTML کوڈ
مربع x2 x<sup>2</sup>
مکعب a3 a<sup>3</sup>
کواڈریٹک ax2 + bx + c ax<sup>2</sup> + bx + c
پائی تھیگورس a2 + b2 = c2 a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
آئن سٹائن E = mc2 E = mc<sup>2</sup>

📊 سپر اسکرپٹ اور سب اسکرپٹ کو یکجا کرنا

<!-- دونوں ٹیگز کو یکجا کرنا --> <p>آئسوٹوپ: <sup>14</sup>C<sub>6</sub></p> <p>آئن: <sup>2+</sup>Ca<sub>2+</sub></p>
💡 مشورہ: آپ <sup> اور <sub> ٹیگز کو ایک دوسرے کے اندر نیسٹ کر سکتے ہیں یا پیچیدہ سائنسی اشارے کے لیے انہیں ایک ہی عنصر میں یکجا کر سکتے ہیں!

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

غلطی یہ کیوں غلط ہے صحیح طریقہ
H2O لکھنا بجائے H2O غلط کیمیکل فارمولا <sub>2</sub> استعمال کریں
x2 لکھنا بجائے x2 x ضرب 2 لگتا ہے، x مربع نہیں <sup>2</sup> استعمال کریں
ٹیگز بند کرنا بھول جانا غلط HTML ہمیشہ بند کریں: <sup>...</sup>
سب اسکرپٹ کے لیے سپر اسکرپٹ کا استعمال غلط پوزیشننگ نیچے کی پوزیشن کے لیے <sub> استعمال کریں

📊 مشاہدات

  • <sup> ٹیکسٹ کو بیس لائن سے اوپر اٹھاتا ہے — ایکسپوننٹس اور پاورز کے لیے بہترین۔
  • <sub> ٹیکسٹ کو بیس لائن سے نیچے لاتا ہے — کیمیکل فارمولوں کے لیے بہترین۔
  • یہ ٹیگز سائنسی اور ریاضیاتی مواد کے لیے ضروری ہیں۔
  • آپ ایک لائن میں متعدد <sup> یا <sub> ٹیگز استعمال کر سکتے ہیں۔
  • صحیح فارمیٹنگ مواد کو مزید پیشہ ورانہ اور پڑھنے کے قابل بناتی ہے۔

✅ نتیجہ

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

  • <sup> اور <sub> ٹیگز کا استعمال کرتے ہوئے ایک HTML صفحہ بنایا۔
  • سب اسکرپٹ کے ساتھ کیمسٹری فارمولے ظاہر کیے۔
  • سپر اسکرپٹ کے ساتھ کواڈریٹک مساوات اور ریاضیاتی اظہارات ظاہر کیے۔
  • براؤزر میں صحیح طریقے سے فارمیٹ شدہ سائنسی مواد دیکھا۔
📌 اہم: سپر اسکرپٹ اور سب اسکرپٹ ٹیگز سائنسی اور ریاضیاتی مواد کو صحیح طریقے سے ظاہر کرنے کے لیے بہت اہم ہیں۔ ایکسپوننٹس، پاورز، اور کیمیکل فارمولوں کے لیے ہمیشہ انہیں سادہ ٹیکسٹ کی بجائے استعمال کریں!
💡 اگلے اقدامات: مزید پیچیدہ فارمولے بنانے کی کوشش کریں جیسے کواڈریٹک فارمولا جس میں سپر اسکرپٹ اور سب اسکرپٹ دونوں ہوں۔ جدید سائنسی اشارے کے لیے نیسٹڈ ٹیگز کے ساتھ تجربہ کریں۔ آپ سپر اسکرپٹ اور سب اسکرپٹ ٹیکسٹ کو مزید اسٹائل کرنے کے لیے CSS بھی استعمال کر سکتے ہیں!
⬅ Back to Practical Notebooks