EZ

EZNotes

✏️ Practical 61: HTML code for strike out and center tags

Learn how to use the <strike> and <center> tags, along with their modern CSS alternatives.

🎯 Aim

To write an HTML program that demonstrates the use of <strike> (strike out) and <center> tags, along with their modern CSS alternatives.

🛠️ What You Need

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

📖 Introduction

HTML provides two useful tags for text presentation:

  • <strike> — displays text with a strike through (line through the middle). Used for deleted or outdated content.
  • <center> — aligns text or content
    in the center
    of the page.
⚠️ Important: Both <strike> and <center> tags are deprecated in HTML5. You should use CSS instead:
  • text-decoration: line-through; for strike through
  • text-align: center; for centering content
💡 Tip: While these tags still work in most browsers, using CSS is the recommended modern approach. This practical covers both methods so you understand the old and new ways!

📊 Preview of the Output

Strike (<strike>): This text has a strike through
S (CSS alternative): This text has a strike through using CSS
Del (<del>): This text is deleted (semantic)
Center (<center>): This text is centered using <center>
CSS Center: This text is centered using CSS
Strike + Center:
This text is struck out and centered
CSS Strike + Center:
This text is struck out and centered using CSS

📝 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 61: Demonstrating strike out and center tags --> <html> <head> <title>Strike Out & Center Tags</title> </head> <body> <h1>Strike Out and Center Tags Demo</h1> <!-- Using <strike> tag (deprecated but still works) --> <h2>Using <strike> Tag</h2> <p>Original Price: <strike>$100</strike> Sale Price: $79</p> <p>This product is <strike>old</strike> new!</p> <!-- Using <del> tag (semantic alternative) --> <h2>Using <del> Tag (Semantic)</h2> <p>Original Price: <del>$100</del> Sale Price: $79</p> <!-- Using CSS text-decoration --> <h2>Using CSS (Recommended)</h2> <p style="text-decoration: line-through;">This text is struck out using CSS</p> <!-- Using <center> tag (deprecated) --> <h2>Using <center> Tag</h2> <center> <p>This text is centered using the <center> tag.</p> <p>Everything inside the <center> tag is centered.</p> </center> <!-- Using CSS text-align --> <h2>Using CSS (Recommended)</h2> <div style="text-align: center;"> <p>This text is centered using CSS.</p> <p>All content inside this div is centered.</p> </div> <!-- Combining strike and center --> <h2>Combining Both</h2> <center> <p><strike>This is struck out and centered using old tags</strike></p> </center> <div style="text-align: center;"> <p style="text-decoration: line-through;">This is struck out and centered using CSS</p> </div> </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: "strike_center.html" or "practical61.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 strike_center.html file.
  3. It will open in your default web browser.
  4. You will see all the strike out and center examples.

📊 Comparison: Old Tags vs Modern CSS

Purpose Old Tag Modern CSS Alternative Status
Strike through text <strike> text-decoration: line-through; Deprecated
Strike through (semantic) <del> text-decoration: line-through; Valid
Center alignment <center> text-align: center; Deprecated
Center block <center> display: block; margin: 0 auto; Deprecated

📊 When to Use Each Method

Scenario Recommended Method Reason
Showing deleted/removed content <del> Semantic meaning for deleted content
Showing old price crossed out text-decoration: line-through; Visual only, no semantic meaning needed
Centering a heading text-align: center; Clean, modern, works everywhere
Centering a block element margin: 0 auto; with display: block; Proper block-level centering
Legacy code compatibility <strike> or <center> Still works in browsers, but not recommended

📊 CSS Examples for Strike and Center

<!-- Strike using CSS --> <p style="text-decoration: line-through;">Struck out text</p> <!-- Center using CSS --> <p style="text-align: center;">Centered text</p> <!-- Center a block element --> <div style="width: 300px; margin: 0 auto; background: #f0f0f0;"> This div is centered </div> <!-- Strike + Center together --> <div style="text-align: center;"> <p style="text-decoration: line-through;">Struck out and centered</p> </div>

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Using <strike> for deleted content No semantic meaning Use <del> for deleted content
Using <center> for all centering Deprecated; limited control Use text-align: center; or margin: 0 auto;
Forgetting to close tags Invalid HTML Always close: <strike>...</strike>
Using text-align: center; on block elements Only works on inline content inside the block Use margin: 0 auto; for block centering

📊 Observations

  • <strike> and <center> are deprecated in HTML5.
  • <del> is the semantic alternative for deleted content.
  • CSS provides more control and flexibility for both strike through and centering.
  • text-decoration: line-through; creates the strike effect.
  • text-align: center; centers inline content, while margin: 0 auto; centers block elements.
  • Using modern CSS methods makes your code more maintainable and future-proof.

✅ Result

You have successfully:

  • Used the <strike> and <center> tags.
  • Learned about their semantic alternatives (<del>).
  • Learned the modern CSS methods for strike through and centering.
  • Viewed all examples in a browser.
📌 Important: While <strike> and <center> still work, they are deprecated. Always use CSS for new projects. Use <del> when you need semantic meaning for deleted content!
💡 Next Steps: Try creating a price list with old prices struck out and new prices highlighted. Create a centered header with a line through it. Experiment with different CSS text-decoration options like overline and underline!

🎯 مقصد

ایک HTML پروگرام لکھنا جو <strike> (اسٹرائیک آؤٹ) اور <center> (سینٹر) ٹیگز کے استعمال کو ظاہر کرتا ہے، ان کے جدید CSS متبادل کے ساتھ۔

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

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

📖 تعارف

HTML ٹیکسٹ پریزنٹیشن کے لیے دو مفید ٹیگز فراہم کرتا ہے:

  • <strike> — ٹیکسٹ کو کٹی ہوئی لکیر (درمیان سے لکیر) کے ساتھ ظاہر کرتا ہے۔ حذف شدہ یا پرانے مواد کے لیے استعمال ہوتا ہے۔
  • <center> — ٹیکسٹ یا مواد کو صفحہ کے
    مرکز
    میں ترتیب دیتا ہے۔
⚠️ اہم: <strike> اور <center> دونوں ٹیگز HTML5 میں متروک (deprecated) ہیں۔ آپ کو اس کی بجائے CSS استعمال کرنا چاہیے:
  • اسٹرائیک تھرو کے لیے text-decoration: line-through;
  • مواد کو سینٹر کرنے کے لیے text-align: center;
💡 مشورہ: اگرچہ یہ ٹیگز زیادہ تر براؤزرز میں اب بھی کام کرتے ہیں، CSS کا استعمال جدید تجویز کردہ طریقہ ہے۔ یہ عملی دونوں طریقوں کا احاطہ کرتا ہے تاکہ آپ پرانے اور نئے طریقوں کو سمجھ سکیں!

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

Strike (<strike>): اس ٹیکسٹ پر کٹی ہوئی لکیر ہے
CSS متبادل: اس ٹیکسٹ پر CSS کے ساتھ کٹی ہوئی لکیر ہے
Del (<del>): یہ ٹیکسٹ حذف شدہ ہے (سیمینٹک)
Center (<center>): یہ ٹیکسٹ <center> کے ساتھ سینٹر ہے
CSS Center: یہ ٹیکسٹ CSS کے ساتھ سینٹر ہے
Strike + Center:
یہ ٹیکسٹ کٹا ہوا اور سینٹر ہے
CSS Strike + Center:
یہ ٹیکسٹ CSS کے ساتھ کٹا ہوا اور سینٹر ہے

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 61: Demonstrating strike out and center tags --> <html> <head> <title>Strike Out & Center Tags</title> </head> <body> <h1>اسٹرائیک آؤٹ اور سینٹر ٹیگز کا ڈیمو</h1> <!-- <strike> ٹیگ کا استعمال (متروک لیکن اب بھی کام کرتا ہے) --> <h2><strike> ٹیگ کا استعمال</h2> <p>اصلی قیمت: <strike>$100</strike> سیل قیمت: $79</p> <p>یہ پروڈکٹ <strike>پرانی</strike> نئی ہے!</p> <!-- <del> ٹیگ کا استعمال (سیمینٹک متبادل) --> <h2><del> ٹیگ کا استعمال (سیمینٹک)</h2> <p>اصلی قیمت: <del>$100</del> سیل قیمت: $79</p> <!-- CSS text-decoration کا استعمال --> <h2>CSS کا استعمال (تجویز کردہ)</h2> <p style="text-decoration: line-through;">یہ ٹیکسٹ CSS کے ساتھ کٹا ہوا ہے</p> <!-- <center> ٹیگ کا استعمال (متروک) --> <h2><center> ٹیگ کا استعمال</h2> <center> <p>یہ ٹیکسٹ <center> ٹیگ کے ساتھ سینٹر ہے۔</p> <p><center> ٹیگ کے اندر سب کچھ سینٹر ہے۔</p> </center> <!-- CSS text-align کا استعمال --> <h2>CSS کا استعمال (تجویز کردہ)</h2> <div style="text-align: center;"> <p>یہ ٹیکسٹ CSS کے ساتھ سینٹر ہے۔</p> <p>اس div کے اندر تمام مواد سینٹر ہے۔</p> </div> <!-- اسٹرائیک اور سینٹر کو یکجا کرنا --> <h2>دونوں کو یکجا کرنا</h2> <center> <p><strike>یہ پرانے ٹیگز کے ساتھ کٹا ہوا اور سینٹر ہے</strike></p> </center> <div style="text-align: center;"> <p style="text-decoration: line-through;">یہ CSS کے ساتھ کٹا ہوا اور سینٹر ہے</p> </div> </body> </html>

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

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

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

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

📊 موازنہ: پرانے ٹیگز بمقابلہ جدید CSS

مقصد پرانے ٹیگ جدید CSS متبادل حیثیت
ٹیکسٹ کو کٹی ہوئی لکیر <strike> text-decoration: line-through; متروک
کٹی ہوئی لکیر (سیمینٹک) <del> text-decoration: line-through; درست
سینٹر کی ترتیب <center> text-align: center; متروک
بلاک کو سینٹر کرنا <center> display: block; margin: 0 auto; متروک

📊 ہر طریقہ کب استعمال کریں

صورت حال تجویز کردہ طریقہ وجہ
حذف شدہ مواد دکھانا <del> حذف شدہ مواد کے لیے سیمینٹک معنی
پرانے قیمت کو کاٹ کر دکھانا text-decoration: line-through; صرف بصری، سیمینٹک معنی کی ضرورت نہیں
ہیڈنگ کو سینٹر کرنا text-align: center; صاف، جدید، ہر جگہ کام کرتا ہے
بلاک عنصر کو سینٹر کرنا margin: 0 auto; کے ساتھ display: block; بلاک‑لیول سینٹرنگ کے لیے صحیح
پرانی کوڈ کی مطابقت <strike> یا <center> براؤزرز میں اب بھی کام کرتا ہے، لیکن تجویز نہیں

📊 اسٹرائیک اور سینٹر کے لیے CSS مثالیں

<!-- CSS کے ساتھ اسٹرائیک --> <p style="text-decoration: line-through;">کٹا ہوا ٹیکسٹ</p> <!-- CSS کے ساتھ سینٹر --> <p style="text-align: center;">سینٹر ٹیکسٹ</p> <!-- بلاک عنصر کو سینٹر کرنا --> <div style="width: 300px; margin: 0 auto; background: #f0f0f0;"> یہ div سینٹر ہے </div> <!-- اسٹرائیک + سینٹر ایک ساتھ --> <div style="text-align: center;"> <p style="text-decoration: line-through;">کٹا ہوا اور سینٹر</p> </div>

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

غلطی یہ کیوں غلط ہے صحیح طریقہ
حذف شدہ مواد کے لیے <strike> کا استعمال سیمینٹک معنی نہیں حذف شدہ مواد کے لیے <del> استعمال کریں
تمام سینٹرنگ کے لیے <center> کا استعمال متروک؛ محدود کنٹرول text-align: center; یا margin: 0 auto; استعمال کریں
ٹیگز بند کرنا بھول جانا غلط HTML ہمیشہ بند کریں: <strike>...</strike>
بلاک عناصر پر text-align: center; کا استعمال صرف بلاک کے اندر ان لائن مواد پر کام کرتا ہے بلاک سینٹرنگ کے لیے margin: 0 auto; استعمال کریں

📊 مشاہدات

  • <strike> اور <center> HTML5 میں متروک ہیں۔
  • <del> حذف شدہ مواد کے لیے سیمینٹک متبادل ہے۔
  • CSS اسٹرائیک تھرو اور سینٹرنگ دونوں کے لیے زیادہ کنٹرول اور لچک فراہم کرتا ہے۔
  • text-decoration: line-through; اسٹرائیک اثر پیدا کرتا ہے۔
  • text-align: center; ان لائن مواد کو سینٹر کرتا ہے، جبکہ margin: 0 auto; بلاک عناصر کو سینٹر کرتا ہے۔
  • جدید CSS طریقوں کا استعمال آپ کے کوڈ کو زیادہ برقرار رکھنے کے قابل اور مستقبل کے لیے محفوظ بناتا ہے۔

✅ نتیجہ

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

  • <strike> اور <center> ٹیگز کا استعمال کیا۔
  • ان کے سیمینٹک متبادل (<del>) کے بارے میں سیکھا۔
  • اسٹرائیک تھرو اور سینٹرنگ کے جدید CSS طریقے سیکھے۔
  • تمام مثالیں براؤزر میں دیکھیں۔
📌 اہم: اگرچہ <strike> اور <center> اب بھی کام کرتے ہیں، وہ متروک ہیں۔ نئے پروجیکٹس کے لیے ہمیشہ CSS استعمال کریں۔ حذف شدہ مواد کے لیے سیمینٹک معنی کی ضرورت ہونے پر <del> استعمال کریں!
💡 اگلے اقدامات: پرانی قیمتوں کو کاٹ کر اور نئی قیمتوں کو نمایاں کرکے قیمتوں کی فہرست بنانے کی کوشش کریں۔ اس پر کٹی ہوئی لکیر کے ساتھ ایک سینٹر ہیڈنگ بنائیں۔ مختلف CSS text-decoration آپشنز جیسے overline اور underline کے ساتھ تجربہ کریں!
⬅ Back to Practical Notebooks