EZ

EZNotes

🇵🇰 Practical 58: Displaying PAKISTAN in varying font, color and style

Learn how to use HTML font styling attributes and CSS to display the word "PAKISTAN" in multiple font styles, colors, and text decorations.

🎯 Aim

To write an HTML program that displays the word "PAKISTAN" in different fonts, colors, and styles using HTML tags and CSS.

🛠️ What You Need

  • Notepad++ or any text editor
  • A web browser to view the result
  • Basic understanding of HTML and CSS styling

📖 Introduction

In this practical, you will learn how to apply different fonts, colors, and text styles to the word "PAKISTAN". You can use:

  • Inline CSS with the style attribute
  • HTML tags like <font> (older method, not recommended)
  • CSS properties like font-family, color, font-size, font-weight, text-decoration, etc.
💡 Tip: Modern web development uses CSS for styling. The style attribute is the simplest way to apply inline styles to individual elements.

📊 Preview of the Output

PAKISTAN
Playfair Display · #1a5276 · Bold
PAKISTAN
Roboto · #c0392b · Extra Bold · Wide
PAKISTAN
Lobster · #27ae60 · Cursive
PAKISTAN
Oswald · #8e44ad · Uppercase · Wide
PAKISTAN
Dancing Script · #d35400 · Handwriting
PAKISTAN
Monoton · #2c3e50 · Decorative
PAKISTAN
Courier New · #2980b9 · Wavy Underline

📝 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 58: Display PAKISTAN in varying font, color and style --> <html> <head> <title>PAKISTAN - Font, Color & Style</title> <!-- Link to Google Fonts (optional but recommended) --> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@900&family=Lobster&family=Oswald:wght@600&family=Dancing+Script:wght@700&family=Monoton&display=swap" rel="stylesheet"> </head> <body> <h1>🇵🇰 PAKISTAN in Various Styles 🇵🇰</h1> <!-- Style 1: Playfair Display, Blue, Bold --> <p style="font-family: 'Playfair Display', serif; color: #1a5276; font-weight: 700; font-size: 2.8em; letter-spacing: 6px;">PAKISTAN</p> <!-- Style 2: Roboto, Red, Extra Bold --> <p style="font-family: 'Roboto', sans-serif; color: #c0392b; font-weight: 900; font-size: 2.5em; letter-spacing: 8px;">PAKISTAN</p> <!-- Style 3: Lobster, Green, Cursive --> <p style="font-family: 'Lobster', cursive; color: #27ae60; font-size: 3.2em;">PAKISTAN</p> <!-- Style 4: Oswald, Purple, Uppercase --> <p style="font-family: 'Oswald', sans-serif; color: #8e44ad; font-weight: 600; font-size: 2.8em; letter-spacing: 10px; text-transform: uppercase;">PAKISTAN</p> <!-- Style 5: Dancing Script, Orange, Handwriting --> <p style="font-family: 'Dancing Script', cursive; color: #d35400; font-size: 3.5em;">PAKISTAN</p> <!-- Style 6: Monoton, Dark, Decorative --> <p style="font-family: 'Monoton', cursive; color: #2c3e50; font-size: 2.8em; letter-spacing: 4px;">PAKISTAN</p> <!-- Style 7: Courier New, Blue, Wavy Underline --> <p style="font-family: 'Courier New', monospace; color: #2980b9; font-weight: 700; font-size: 2.8em; text-decoration: underline wavy #e74c3c;">PAKISTAN</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: "pakistan_styles.html" or "practical58.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 pakistan_styles.html file.
  3. It will open in your default web browser.
  4. You will see "PAKISTAN" displayed in multiple font styles, colors, and designs.

📊 CSS Properties Used for Styling

CSS Property Purpose Example Value
font-family Sets the font type 'Playfair Display', serif
color Sets the text color #1a5276 (hex), red, rgb()
font-size Sets the text size 2.8em, 32px, 200%
font-weight Sets the boldness 700 (bold), 900 (extra bold)
letter-spacing Space between letters 6px, 0.2em
text-decoration Underline, overline, etc. underline wavy #e74c3c
text-transform Changes text case uppercase, lowercase

📊 Alternative: Using the <font> Tag (Legacy Method)

<!-- Using the old <font> tag (not recommended in modern HTML) --> <font face="Arial" color="red" size="6">PAKISTAN</font>
⚠️ Note: The <font> tag is deprecated in HTML5. Use CSS instead for better control and maintainability.

📊 Common Mistakes to Avoid

Mistake Why It's Wrong Correct Way
Using <font> tag Deprecated in HTML5 Use CSS style attribute or <style> tag
Forgetting to close quotes in style Invalid CSS, won't work Always use matching quotes: style="color: red;"
Using unsupported font names Browser will fallback to default Use web-safe fonts or link Google Fonts
Mixing inline styles with <style> Can cause conflicts Be consistent; use one method

📊 Observations

  • Different fonts give the word "PAKISTAN" a completely different look and feel.
  • Colors can convey different emotions — blue for trust, red for passion, green for nature.
  • Text decorations like underline, overline, and wavy lines add visual interest.
  • Letter spacing makes the text look wider and more dramatic.
  • Google Fonts provide a wide variety of free, high-quality fonts for web use.

✅ Result

You have successfully:

  • Created an HTML page that displays "PAKISTAN" in multiple fonts, colors, and styles.
  • Used inline CSS to style the text.
  • Learned about various CSS properties for text styling.
📌 Important: CSS gives you complete control over the appearance of your text. Use it to make your web pages visually appealing and engaging!
💡 Next Steps: Try adding more styles — different background colors, text shadows, or transformations (rotate, scale). Experiment with different font pairings to see what looks best!

🎯 مقصد

ایک HTML پروگرام لکھنا جو لفظ "PAKISTAN" کو مختلف فونٹس، رنگوں، اور اسٹائلز میں HTML ٹیگز اور CSS کا استعمال کرتے ہوئے ظاہر کرے۔

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

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

📖 تعارف

اس عملی میں، آپ لفظ "PAKISTAN" پر مختلف فونٹس، رنگ، اور ٹیکسٹ اسٹائل لگانا سیکھیں گے۔ آپ استعمال کر سکتے ہیں:

  • style اٹریبیوٹ کے ساتھ Inline CSS
  • <font> جیسے HTML ٹیگز (پرانا طریقہ، تجویز نہیں)
  • font-family، color، font-size، font-weight، text-decoration جیسی CSS پراپرٹیز
💡 مشورہ: جدید ویب ڈیولپمنٹ اسٹائلنگ کے لیے CSS استعمال کرتی ہے۔ style اٹریبیوٹ انفرادی عناصر پر ان لائن اسٹائل لگانے کا سب سے آسان طریقہ ہے۔

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

PAKISTAN
Playfair Display · #1a5276 · Bold
PAKISTAN
Roboto · #c0392b · Extra Bold · Wide
PAKISTAN
Lobster · #27ae60 · Cursive
PAKISTAN
Oswald · #8e44ad · Uppercase · Wide
PAKISTAN
Dancing Script · #d35400 · Handwriting
PAKISTAN
Monoton · #2c3e50 · Decorative
PAKISTAN
Courier New · #2980b9 · Wavy Underline

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

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

  1. Notepad++ لانچ کریں۔
  2. زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
  3. نیچے دیا گیا آسان HTML کوڈ لکھیں:
<!-- Practical 58: Display PAKISTAN in varying font, color and style --> <html> <head> <title>PAKISTAN - Font, Color & Style</title> <!-- Google Fonts کا لنک (اختیاری لیکن تجویز کردہ) --> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Roboto:wght@900&family=Lobster&family=Oswald:wght@600&family=Dancing+Script:wght@700&family=Monoton&display=swap" rel="stylesheet"> </head> <body> <h1>🇵🇰 PAKISTAN in Various Styles 🇵🇰</h1> <!-- اسٹائل 1: Playfair Display، نیلا، بولڈ --> <p style="font-family: 'Playfair Display', serif; color: #1a5276; font-weight: 700; font-size: 2.8em; letter-spacing: 6px;">PAKISTAN</p> <!-- اسٹائل 2: Roboto، سرخ، Extra Bold --> <p style="font-family: 'Roboto', sans-serif; color: #c0392b; font-weight: 900; font-size: 2.5em; letter-spacing: 8px;">PAKISTAN</p> <!-- اسٹائل 3: Lobster، سبز، Cursive --> <p style="font-family: 'Lobster', cursive; color: #27ae60; font-size: 3.2em;">PAKISTAN</p> <!-- اسٹائل 4: Oswald، جامنی، Uppercase --> <p style="font-family: 'Oswald', sans-serif; color: #8e44ad; font-weight: 600; font-size: 2.8em; letter-spacing: 10px; text-transform: uppercase;">PAKISTAN</p> <!-- اسٹائل 5: Dancing Script، نارنجی، Handwriting --> <p style="font-family: 'Dancing Script', cursive; color: #d35400; font-size: 3.5em;">PAKISTAN</p> <!-- اسٹائل 6: Monoton، گہرا، Decorative --> <p style="font-family: 'Monoton', cursive; color: #2c3e50; font-size: 2.8em; letter-spacing: 4px;">PAKISTAN</p> <!-- اسٹائل 7: Courier New، نیلا، لہریا Underline --> <p style="font-family: 'Courier New', monospace; color: #2980b9; font-weight: 700; font-size: 2.8em; text-decoration: underline wavy #e74c3c;">PAKISTAN</p> </body> </html>

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

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

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

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

📊 اسٹائلنگ کے لیے استعمال ہونے والی CSS پراپرٹیز

CSS پراپرٹی مقصد مثال کی قیمت
font-family فونٹ کی قسم سیٹ کرتا ہے 'Playfair Display', serif
color ٹیکسٹ کا رنگ سیٹ کرتا ہے #1a5276 (hex)، red، rgb()
font-size ٹیکسٹ کا سائز سیٹ کرتا ہے 2.8em، 32px، 200%
font-weight موٹائی سیٹ کرتا ہے 700 (bold)، 900 (extra bold)
letter-spacing حروف کے درمیان فاصلہ 6px، 0.2em
text-decoration انڈر لائن، اوورلائن وغیرہ underline wavy #e74c3c
text-transform ٹیکسٹ کیس تبدیل کرتا ہے uppercase، lowercase

📊 متبادل: <font> ٹیگ کا استعمال (پرانا طریقہ)

<!-- پرانے <font> ٹیگ کا استعمال (جدید HTML میں تجویز نہیں) --> <font face="Arial" color="red" size="6">PAKISTAN</font>
⚠️ نوٹ: <font> ٹیگ HTML5 میں متروک (deprecated) ہے۔ بہتر کنٹرول اور دیکھ بھال کے لیے CSS استعمال کریں۔

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

غلطی یہ کیوں غلط ہے صحیح طریقہ
<font> ٹیگ کا استعمال HTML5 میں متروک CSS style اٹریبیوٹ یا <style> ٹیگ استعمال کریں
style میں کوٹس بند کرنا بھولنا غلط CSS، کام نہیں کرے گا ہمیشہ مماثل کوٹس استعمال کریں: style="color: red;"
غیر معاون فونٹ نام کا استعمال براؤزر ڈیفالٹ پر واپس آجائے گا ویب‑سیف فونٹس استعمال کریں یا Google Fonts لنک کریں
ان لائن اسٹائل کو <style> کے ساتھ ملانا تنازعات کا سبب بن سکتا ہے مستقل رہیں؛ ایک طریقہ استعمال کریں

📊 مشاہدات

  • مختلف فونٹس لفظ "PAKISTAN" کو مکمل طور پر مختلف شکل دیتے ہیں۔
  • رنگ مختلف جذبات کا اظہار کر سکتے ہیں — نیلا اعتماد کے لیے، سرخ جذبے کے لیے، سبز فطرت کے لیے۔
  • ٹیکسٹ ڈیکوریشنز جیسے انڈرلائن، اوورلائن، اور لہریا لائنیں بصری دلچسپی شامل کرتی ہیں۔
  • لیٹر اسپیسنگ ٹیکسٹ کو وسیع اور زیادہ ڈرامائی بناتی ہے۔
  • Google Fonts ویب استعمال کے لیے مفت، اعلیٰ معیار کے فونٹس کی وسیع اقسام فراہم کرتے ہیں۔

✅ نتیجہ

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

  • ایک HTML صفحہ بنایا جو "PAKISTAN" کو متعدد فونٹس، رنگوں، اور اسٹائلز میں ظاہر کرتا ہے۔
  • ٹیکسٹ اسٹائل کرنے کے لیے inline CSS کا استعمال کیا۔
  • ٹیکسٹ اسٹائلنگ کے لیے مختلف CSS پراپرٹیز کے بارے میں سیکھا۔
📌 اہم: CSS آپ کو اپنے ٹیکسٹ کی ظاہری شکل پر مکمل کنٹرول دیتا ہے۔ اپنے ویب صفحات کو بصری طور پر دلکش اور دلچسپ بنانے کے لیے اس کا استعمال کریں!
💡 اگلے اقدامات: مزید اسٹائلز شامل کرنے کی کوشش کریں — مختلف پس منظر کے رنگ، ٹیکسٹ شیڈوز، یا ٹرانسفارمیشنز (rotate، scale)۔ دیکھیں کہ کون سی فونٹ جوڑیاں بہترین لگتی ہیں!
⬅ Back to Practical Notebooks