EZ

EZNotes

🔤 Practical 62: HTML code for displaying the use of font tags

Learn how to use the <font> tag with its attributes — face, color, and size — along with modern CSS alternatives.

🎯 Aim

To write an HTML program that demonstrates the use of the <font> tag with its attributes — face, color, and size — along with modern CSS alternatives.

🛠️ What You Need

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

📖 Introduction

The <font> tag was used in older HTML versions to specify the font face, color, and size of text. It has three main attributes:

  • face — specifies the font family (e.g., Arial, Times New Roman)
  • color — specifies the text color (name, hex, or RGB)
  • size — specifies the font size (1 to 7, where 1 is smallest and 7 is largest)
⚠️ Important: The <font> tag is deprecated in HTML5. You should use CSS instead:
  • font-family for face
  • color for color
  • font-size for size
💡 Tip: While the <font> tag still works 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

Font Tag (face, color, size): This text uses the font tag
Font Tag (face only): Times New Roman
Font Tag (color only): Green text
Font Tag (size only): Size 6 text
CSS Alternative: CSS styled text
Font Tag Size 1-7: Size 1 Size 2 Size 3 Size 4 Size 5 Size 6 Size 7
Nested Font Tags: This is red inside blue

📝 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 62: Demonstrating the use of font tags --> <html> <head> <title>Font Tags Demo</title> </head> <body> <h1>Font Tags Demonstration</h1> <!-- Using all three attributes --> <h2>Using face, color, and size attributes</h2> <p><font face="Arial" color="#e74c3c" size="4">This text uses the font tag with all attributes</font></p> <!-- Using face attribute only --> <h2>Font face attribute</h2> <p><font face="Times New Roman">This text is in Times New Roman</font></p> <p><font face="Comic Sans MS">This text is in Comic Sans MS</font></p> <!-- Using color attribute --> <h2>Font color attribute</h2> <p><font color="red">Red text</font></p> <p><font color="#27ae60">Green text (hex color)</font></p> <p><font color="#8e44ad">Purple text (hex color)</font></p> <!-- Using size attribute --> <h2>Font size attribute (1-7)</h2> <p> <font size="1">Size 1</font> <font size="2">Size 2</font> <font size="3">Size 3</font> <font size="4">Size 4</font> <font size="5">Size 5</font> <font size="6">Size 6</font> <font size="7">Size 7</font> </p> <!-- Nested font tags --> <h2>Nested Font Tags</h2> <p><font face="Arial" color="#3498db" size="4"> This is blue text with a <font color="#e74c3c">red</font> word inside. </font></p> <!-- CSS Alternative (Recommended) --> <h2>CSS Alternative (Recommended)</h2> <p style="font-family: 'Playfair Display', serif; color: #8e44ad; font-size: 1.5em;"> This text is styled using CSS </p> <p style="font-family: 'Lobster', cursive; color: #27ae60; font-size: 2em;"> CSS with Google Fonts </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: "font_tags.html" or "practical62.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 font_tags.html file.
  3. It will open in your default web browser.
  4. You will see all the font tag examples with different faces, colors, and sizes.

📊 Font Tag Attributes

Attribute Purpose Values Example
face Specifies font family Font name (Arial, Times New Roman, etc.) face="Arial"
color Specifies text color Color name, hex, or RGB color="#e74c3c"
size Specifies font size 1 (smallest) to 7 (largest) size="4"

📊 Font Size Comparison

Font Size Value Approximate Size Example
1 Very Small Size 1 text
2 Small Size 2 text
3 Default Size 3 text
4 Medium Size 4 text
5 Large Size 5 text
6 Very Large Size 6 text
7 Extra Large Size 7 text

📊 CSS Alternatives for Font Tags

<!-- CSS alternatives for font tag attributes --> <!-- Face attribute → font-family --> <p style="font-family: Arial, sans-serif;">Text in Arial</p> <p style="font-family: 'Times New Roman', serif;">Text in Times New Roman</p> <!-- Color attribute → color --> <p style="color: #e74c3c;">Red text</p> <p style="color: rgb(39, 174, 96);">Green text</p> <!-- Size attribute → font-size --> <p style="font-size: 12px;">12px text</p> <p style="font-size: 1.5em;">1.5em text (relative)</p> <p style="font-size: 200%;">200% text</p> <!-- All three combined --> <p style="font-family: 'Playfair Display', serif; color: #8e44ad; font-size: 1.8em;"> All three with CSS </p>

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Using <font> in HTML5 Deprecated tag Use CSS for styling
Using size values outside 1-7 Invalid size range Use 1 to 7 for font tag, or CSS for any size
Spelling color as "colour" Attribute name is "color" Use color (US spelling)
Forgetting to close the tag Invalid HTML Always close: <font>...</font>
Using multiple font tags unnecessarily Messy code Use CSS for cleaner, more maintainable code

📊 Observations

  • The <font> tag uses face, color, and size attributes.
  • face can specify multiple fonts as fallbacks (e.g., face="Arial, Helvetica, sans-serif").
  • color accepts color names, hex codes, or RGB values.
  • size ranges from 1 to 7 (1 is smallest, 7 is largest).
  • The <font> tag is deprecated in HTML5.
  • CSS provides more control and is the recommended modern approach.
  • You can nest <font> tags to combine styles.

✅ Result

You have successfully:

  • Used the <font> tag with all its attributes.
  • Explored different face, color, and size values.
  • Learned about the modern CSS alternatives for font styling.
  • Viewed all examples in a browser.
📌 Important: The <font> tag is deprecated in HTML5. For new projects, always use CSS with font-family, color, and font-size for better control and maintainability!
💡 Next Steps: Try creating a page that uses CSS to style text with different fonts, colors, and sizes. Experiment with Google Fonts for more variety. Compare the same text styled with the <font> tag and with CSS to see the difference!

🎯 مقصد

ایک HTML پروگرام لکھنا جو <font> ٹیگ کے استعمال کو اس کی صفات — face، color، اور size — کے ساتھ ظاہر کرتا ہے، جدید CSS متبادل کے ساتھ۔

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

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

📖 تعارف

<font> ٹیگ پرانے HTML ورژنز میں ٹیکسٹ کی فونٹ، رنگ، اور سائز کو مخصوص کرنے کے لیے استعمال کیا جاتا تھا۔ اس کی تین اہم صفات ہیں:

  • face — فونٹ فیملی مخصوص کرتا ہے (مثلاً Arial، Times New Roman)
  • color — ٹیکسٹ کا رنگ مخصوص کرتا ہے (نام، ہیکس، یا RGB)
  • size — فونٹ کا سائز مخصوص کرتا ہے (1 سے 7، جہاں 1 سب سے چھوٹا اور 7 سب سے بڑا ہے)
⚠️ اہم: <font> ٹیگ HTML5 میں متروک (deprecated) ہے۔ آپ کو اس کی بجائے CSS استعمال کرنا چاہیے:
  • face کے لیے font-family
  • color کے لیے color
  • size کے لیے font-size
💡 مشورہ: اگرچہ <font> ٹیگ زیادہ تر براؤزرز میں اب بھی کام کرتا ہے، CSS کا استعمال جدید تجویز کردہ طریقہ ہے۔ یہ عملی دونوں طریقوں کا احاطہ کرتا ہے تاکہ آپ پرانے اور نئے طریقوں کو سمجھ سکیں!

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

Font Tag (face, color, size): یہ ٹیکسٹ font tag استعمال کرتا ہے
Font Tag (face only): ٹائمز نیو رومن
Font Tag (color only): سبز ٹیکسٹ
Font Tag (size only): سائز 6 کا ٹیکسٹ
CSS متبادل: CSS کے ساتھ اسٹائل شدہ ٹیکسٹ
Font Tag سائز 1-7: سائز 1 سائز 2 سائز 3 سائز 4 سائز 5 سائز 6 سائز 7
نیسٹڈ Font Tags: یہ نیلا ہے سرخ نیلے کے اندر

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 62: Demonstrating the use of font tags --> <html> <head> <title>Font Tags Demo</title> </head> <body> <h1>Font Tags کا ڈیمو</h1> <!-- تینوں صفات کا استعمال --> <h2>face، color، اور size صفات کا استعمال</h2> <p><font face="Arial" color="#e74c3c" size="4">یہ ٹیکسٹ font tag تمام صفات کے ساتھ استعمال کرتا ہے</font></p> <!-- صرف face صفت کا استعمال --> <h2>Font face صفت</h2> <p><font face="Times New Roman">یہ ٹیکسٹ ٹائمز نیو رومن میں ہے</font></p> <p><font face="Comic Sans MS">یہ ٹیکسٹ کامک سینس میں ہے</font></p> <!-- صرف color صفت کا استعمال --> <h2>Font color صفت</h2> <p><font color="red">سرخ ٹیکسٹ</font></p> <p><font color="#27ae60">سبز ٹیکسٹ (ہیکس رنگ)</font></p> <p><font color="#8e44ad">جامنی ٹیکسٹ (ہیکس رنگ)</font></p> <!-- صرف size صفت کا استعمال --> <h2>Font size صفت (1-7)</h2> <p> <font size="1">سائز 1</font> <font size="2">سائز 2</font> <font size="3">سائز 3</font> <font size="4">سائز 4</font> <font size="5">سائز 5</font> <font size="6">سائز 6</font> <font size="7">سائز 7</font> </p> <!-- نیسٹڈ font tags --> <h2>نیسٹڈ Font Tags</h2> <p><font face="Arial" color="#3498db" size="4"> یہ نیلا ٹیکسٹ ہے جس کے اندر <font color="#e74c3c">سرخ</font> لفظ ہے۔ </font></p> <!-- CSS متبادل (تجویز کردہ) --> <h2>CSS متبادل (تجویز کردہ)</h2> <p style="font-family: 'Playfair Display', serif; color: #8e44ad; font-size: 1.5em;"> یہ ٹیکسٹ CSS کے ساتھ اسٹائل کیا گیا ہے </p> <p style="font-family: 'Lobster', cursive; color: #27ae60; font-size: 2em;"> Google Fonts کے ساتھ CSS </p> </body> </html>

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

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

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

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

📊 Font Tag کی صفات

صفت مقصد اقدار مثال
face فونٹ فیملی مخصوص کرتا ہے فونٹ کا نام (Arial، Times New Roman وغیرہ) face="Arial"
color ٹیکسٹ کا رنگ مخصوص کرتا ہے رنگ کا نام، ہیکس، یا RGB color="#e74c3c"
size فونٹ کا سائز مخصوص کرتا ہے 1 (سب سے چھوٹا) سے 7 (سب سے بڑا) size="4"

📊 فونٹ سائز کا موازنہ

فونٹ سائز کی قیمت تقریبی سائز مثال
1 بہت چھوٹا سائز 1 کا ٹیکسٹ
2 چھوٹا سائز 2 کا ٹیکسٹ
3 ڈیفالٹ سائز 3 کا ٹیکسٹ
4 درمیانہ سائز 4 کا ٹیکسٹ
5 بڑا سائز 5 کا ٹیکسٹ
6 بہت بڑا سائز 6 کا ٹیکسٹ
7 انتہائی بڑا سائز 7 کا ٹیکسٹ

📊 Font Tags کے لیے CSS متبادل

<!-- font tag صفات کے لیے CSS متبادل --> <!-- face صفت → font-family --> <p style="font-family: Arial, sans-serif;">ایریل میں ٹیکسٹ</p> <p style="font-family: 'Times New Roman', serif;">ٹائمز نیو رومن میں ٹیکسٹ</p> <!-- color صفت → color --> <p style="color: #e74c3c;">سرخ ٹیکسٹ</p> <p style="color: rgb(39, 174, 96);">سبز ٹیکسٹ</p> <!-- size صفت → font-size --> <p style="font-size: 12px;">12px کا ٹیکسٹ</p> <p style="font-size: 1.5em;">1.5em کا ٹیکسٹ (نسبتی)</p> <p style="font-size: 200%;">200% کا ٹیکسٹ</p> <!-- تینوں کو یکجا کرنا --> <p style="font-family: 'Playfair Display', serif; color: #8e44ad; font-size: 1.8em;"> تینوں CSS کے ساتھ </p>

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

غلطی یہ کیوں غلط ہے صحیح طریقہ
HTML5 میں <font> کا استعمال متروک ٹیگ اسٹائلنگ کے لیے CSS استعمال کریں
1-7 کے علاوہ سائز کی قیمتوں کا استعمال غلط سائز کی حد font tag کے لیے 1 سے 7 استعمال کریں، یا کسی بھی سائز کے لیے CSS
"colour" کے طور پر color کی ہجے کرنا صفت کا نام "color" ہے color استعمال کریں (امریکی ہجے)
ٹیگ بند کرنا بھول جانا غلط HTML ہمیشہ بند کریں: <font>...</font>
ضرورت سے زیادہ متعدد font tags کا استعمال گندا کوڈ صاف، زیادہ برقرار رکھنے کے قابل کوڈ کے لیے CSS استعمال کریں

📊 مشاہدات

  • <font> ٹیگ face، color، اور size صفات استعمال کرتا ہے۔
  • face متعدد فونٹس کو فال بیک کے طور پر مخصوص کر سکتا ہے (مثلاً face="Arial, Helvetica, sans-serif")۔
  • color رنگ کے نام، ہیکس کوڈز، یا RGB اقدار کو قبول کرتا ہے۔
  • size کی حد 1 سے 7 تک ہے (1 سب سے چھوٹا، 7 سب سے بڑا)۔
  • <font> ٹیگ HTML5 میں متروک ہے۔
  • CSS زیادہ کنٹرول فراہم کرتا ہے اور جدید تجویز کردہ طریقہ ہے۔
  • آپ اسٹائلز کو یکجا کرنے کے لیے <font> ٹیگز کو نیسٹ کر سکتے ہیں۔

✅ نتیجہ

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

  • <font> ٹیگ کو اس کی تمام صفات کے ساتھ استعمال کیا۔
  • مختلف face، color، اور size اقدار کو دریافت کیا۔
  • فونٹ اسٹائلنگ کے جدید CSS متبادل کے بارے میں سیکھا۔
  • تمام مثالیں براؤزر میں دیکھیں۔
📌 اہم: <font> ٹیگ HTML5 میں متروک ہے۔ نئے پروجیکٹس کے لیے، بہتر کنٹرول اور دیکھ بھال کے لیے ہمیشہ CSS کو font-family، color، اور font-size کے ساتھ استعمال کریں!
💡 اگلے اقدامات: مختلف فونٹس، رنگوں اور سائزوں کے ساتھ ٹیکسٹ کو اسٹائل کرنے کے لیے CSS استعمال کرنے والا صفحہ بنانے کی کوشش کریں۔ مزید تنوع کے لیے Google Fonts کے ساتھ تجربہ کریں۔ فرق دیکھنے کے لیے اسی ٹیکسٹ کو <font> ٹیگ اور CSS کے ساتھ اسٹائل کرکے موازنہ کریں!
⬅ Back to Practical Notebooks