🎯 Aim

To create an HTML webpage that demonstrates the use of bgcolor and text attributes in the <body> tag to set background color and text color.

🛠️ What You Need

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

📖 Introduction

The <body> tag has two important attributes for controlling colors:

bgcolor — Sets the background color of the entire webpage.
text — Sets the default color of all text on the webpage.

⚠️ Important: Both bgcolor and text attributes are deprecated in HTML5. Use CSS instead: style="background-color: color;" and style="color: color;". However, these attributes are still supported and useful for learning purposes.

💡 Tip: You can use color names (e.g., "red", "blue"), hexadecimal values (e.g., "#ff0000"), or RGB values (e.g., "rgb(255,0,0)") for both attributes.

📊 Preview of the Output

🎨 Using bgcolor and text Attributes

🎨 Color Combinations

bgcolor="#2c3e50" text="white"

Dark background, white text

bgcolor="#f1c40f" text="#2c3e50"

Yellow background, dark text

bgcolor="red" text="white"

Red background, white text

bgcolor="green" text="white"

Green background, white text

📝 Example Code

<body bgcolor="lightblue" text="darkblue"> <h1>Welcome to My Page</h1> <p>This text is dark blue on a light blue background.</p> </body>

📊 Color Name vs Hex Values

tomato

steelblue

seagreen

blueviolet

orangered

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

Launch Notepad++.
Set the language to HTML (Language → H → HTML).
Write the following simplified HTML code:

<html> <head> <title>bgcolor and text Demo</title> </head>  <body bgcolor="lightblue" text="darkblue"> <h1>Welcome to My Colorful Page</h1> <p>This page demonstrates the use of bgcolor and text attributes. The background is light blue and the text is dark blue.</p>  <h2>Different Color Combinations</h2>  <p style="color: #e74c3c;">This text is red (using inline CSS).</p> <p style="color: #27ae60;">This text is green (using inline CSS).</p> <p style="color: #8e44ad;">This text is purple (using inline CSS).</p>  <h2>Using font tag</h2> <p><font color="red">This text is red using <font> tag.</font></p> <p><font color="#ff8c00">This text is orange using <font> tag.</font></p>  <h2>Common Color Names</h2> <ul> <li><font color="red">Red</font></li> <li><font color="green">Green</font></li> <li><font color="blue">Blue</font></li> <li><font color="orange">Orange</font></li> <li><font color="purple">Purple</font></li> <li><font color="teal">Teal</font></li> </ul>  <h2>CSS Background Colors on Elements</h2> <p style="background-color: #fdedec; padding: 8px; border-radius: 5px;"> This paragraph has a light red background. </p> <p style="background-color: #eafaf1; padding: 8px; border-radius: 5px;"> This paragraph has a light green background. </p> <p style="background-color: #ebf5fb; padding: 8px; border-radius: 5px;"> This paragraph has a light blue background. </p> </body> </html>

Step 2: Save the File

Go to File → Save As… (or press Ctrl+Shift+S).
Choose a location (e.g., Desktop).
Name the file: "bgcolor_text.html" or "practical71.html".
In "Save as type", select All types (*.*).
Click Save.

Step 3: Open in Browser

Navigate to the folder where you saved the file.
Double‑click the bgcolor_text.html file.
It will open in your default web browser.
You will see the page with the specified background and text colors.

📊 Color Values Accepted

Value Type	Example	Description
Color Name	`bgcolor="red"`	Standard color names (red, blue, green, etc.)
Hexadecimal	`bgcolor="#ff0000"`	Hex color codes (#RRGGBB)
RGB	`bgcolor="rgb(255,0,0)"`	RGB values (0-255 for each color)
RGBA	`bgcolor="rgba(255,0,0,0.5)"`	RGB with alpha (transparency) — CSS only

📊 Common Color Names

Color Name	Hex Value	Color Preview
black	#000000
white	#ffffff
red	#ff0000
green	#00ff00
blue	#0000ff
yellow	#ffff00
orange	#ffa500
purple	#800080
teal	#008080
lightblue	#add8e6

📊 CSS Alternative (Modern Method)

<html> <head> <style> body { background-color: lightblue; color: darkblue; } </style> </head> <body> <h1>Welcome to My Page</h1> <p>This uses CSS for styling instead of attributes.</p> </body> </html>

📊 Common Mistakes to Avoid

Mistake	Why It's Wrong	Correct Way
Using `bgcolor` and `text` in HTML5	Deprecated attributes	Use CSS `background-color` and `color`
Misspelling attributes (e.g., "bgcolor" vs "bgcolor")	Attribute won't work	Use correct spelling: `bgcolor` and `text`
Using color names with spaces	Invalid color value	Use single word color names or hex codes
Forgetting to close the `<body>` tag	Invalid HTML	Always close `</body>`
Using poor contrast (e.g., white text on yellow)	Hard to read	Choose colors with good contrast

📊 Observations

bgcolor sets the background color of the entire page.
text sets the default text color for all text on the page.
You can use color names, hex codes, or RGB values.
These attributes are deprecated in HTML5 but still work in browsers.
The recommended modern approach is to use CSS.
Individual elements can override the default text color using style or <font> tag.

✅ Result

You have successfully:

Used the bgcolor and text attributes in the <body> tag.
Created a webpage with custom background and text colors.
Learned about different color value types.
Learned about the CSS alternative for modern web development.
Viewed the results in a browser.

📌 Important: While bgcolor and text are useful for learning, they are deprecated in HTML5. For new projects, always use CSS with background-color and color for better control, maintainability, and adherence to web standards.

💡 Next Steps: Try creating a page with different color combinations. Experiment with hex codes to create custom colors. Learn about color contrast to make your pages more readable. Move to CSS for all styling in your future projects!

🎯 مقصد

ایک HTML ویب صفحہ بنانا جو bgcolor اور text صفات کو <body> ٹیگ میں بیک گراؤنڈ کلر اور ٹیکسٹ کلر سیٹ کرنے کے لیے استعمال کرنے کا طریقہ ظاہر کرتا ہے۔

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

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

📖 تعارف

<body> ٹیگ میں رنگوں کو کنٹرول کرنے کے لیے دو اہم صفات ہیں:

bgcolor — پورے ویب صفحے کا بیک گراؤنڈ کلر سیٹ کرتا ہے۔
text — صفحے پر تمام ٹیکسٹ کا ڈیفالٹ کلر سیٹ کرتا ہے۔

⚠️ اہم: bgcolor اور text دونوں صفات HTML5 میں متروک (deprecated) ہیں۔ اس کی بجائے CSS استعمال کریں: style="background-color: color;" اور style="color: color;"۔ تاہم، یہ صفات اب بھی سپورٹ کی جاتی ہیں اور سیکھنے کے مقاصد کے لیے مفید ہیں۔

💡 مشورہ: آپ دونوں صفات کے لیے کلر نام (مثلاً "red"، "blue")، ہیکسا ڈیسیمل اقدار (مثلاً "#ff0000")، یا RGB اقدار (مثلاً "rgb(255,0,0)") استعمال کر سکتے ہیں۔

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

🎨 bgcolor اور text صفات کا استعمال

🎨 کلر کے مجموعے

bgcolor="#2c3e50" text="white"

گہرا بیک گراؤنڈ، سفید ٹیکسٹ

bgcolor="#f1c40f" text="#2c3e50"

پیلا بیک گراؤنڈ، گہرا ٹیکسٹ

bgcolor="red" text="white"

سرخ بیک گراؤنڈ، سفید ٹیکسٹ

bgcolor="green" text="white"

سبز بیک گراؤنڈ، سفید ٹیکسٹ

📝 کوڈ کی مثال

<body bgcolor="lightblue" text="darkblue"> <h1>میرے صفحہ پر خوش آمدید</h1> <p>یہ ٹیکسٹ ہلکے نیلے بیک گراؤنڈ پر گہرا نیلا ہے۔</p> </body>

📊 کلر نام بمقابلہ ہیکس اقدار

tomato

steelblue

seagreen

blueviolet

orangered

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

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

Notepad++ لانچ کریں۔
زبان کو HTML پر سیٹ کریں (Language → H → HTML)۔
نیچے دیا گیا آسان HTML کوڈ لکھیں:

<html> <head> <title>bgcolor and text Demo</title> </head>  <body bgcolor="lightblue" text="darkblue"> <h1>میرے رنگین صفحہ پر خوش آمدید</h1> <p>یہ صفحہ bgcolor اور text صفات کے استعمال کو ظاہر کرتا ہے۔ بیک گراؤنڈ ہلکا نیلا ہے اور ٹیکسٹ گہرا نیلا ہے۔</p>  <h2>مختلف کلر کے مجموعے</h2>  <p style="color: #e74c3c;">یہ ٹیکسٹ سرخ ہے (inline CSS کا استعمال)۔</p> <p style="color: #27ae60;">یہ ٹیکسٹ سبز ہے (inline CSS کا استعمال)۔</p> <p style="color: #8e44ad;">یہ ٹیکسٹ جامنی ہے (inline CSS کا استعمال)۔</p>  <h2>font ٹیگ کا استعمال</h2> <p><font color="red">یہ ٹیکسٹ <font> ٹیگ کا استعمال کرتے ہوئے سرخ ہے۔</font></p> <p><font color="#ff8c00">یہ ٹیکسٹ <font> ٹیگ کا استعمال کرتے ہوئے نارنجی ہے۔</font></p>  <h2>عام کلر نام</h2> <ul> <li><font color="red">سرخ</font></li> <li><font color="green">سبز</font></li> <li><font color="blue">نیلا</font></li> <li><font color="orange">نارنجی</font></li> <li><font color="purple">جامنی</font></li> <li><font color="teal">ٹیل</font></li> </ul>  <h2>عناصر پر CSS بیک گراؤنڈ کلر</h2> <p style="background-color: #fdedec; padding: 8px; border-radius: 5px;"> اس پیراگراف کا بیک گراؤنڈ ہلکا سرخ ہے۔ </p> <p style="background-color: #eafaf1; padding: 8px; border-radius: 5px;"> اس پیراگراف کا بیک گراؤنڈ ہلکا سبز ہے۔ </p> <p style="background-color: #ebf5fb; padding: 8px; border-radius: 5px;"> اس پیراگراف کا بیک گراؤنڈ ہلکا نیلا ہے۔ </p> </body> </html>

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

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

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

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

📊 قبول شدہ کلر اقدار

قدر کی قسم	مثال	وضاحت
کلر نام	`bgcolor="red"`	معیاری کلر نام (red، blue، green وغیرہ)
ہیکسا ڈیسیمل	`bgcolor="#ff0000"`	ہیکس کلر کوڈز (#RRGGBB)
RGB	`bgcolor="rgb(255,0,0)"`	RGB اقدار (ہر کلر کے لیے 0-255)
RGBA	`bgcolor="rgba(255,0,0,0.5)"`	الفا کے ساتھ RGB (شفافیت) — صرف CSS

📊 عام کلر نام

کلر نام	ہیکس قدر	کلر کا پیش منظر
black	#000000
white	#ffffff
red	#ff0000
green	#00ff00
blue	#0000ff
yellow	#ffff00
orange	#ffa500
purple	#800080
teal	#008080
lightblue	#add8e6

📊 CSS متبادل (جدید طریقہ)

<html> <head> <style> body { background-color: lightblue; color: darkblue; } </style> </head> <body> <h1>میرے صفحہ پر خوش آمدید</h1> <p>یہ صفات کی بجائے CSS کا استعمال کرتا ہے۔</p> </body> </html>

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

غلطی	یہ کیوں غلط ہے	صحیح طریقہ
HTML5 میں `bgcolor` اور `text` کا استعمال	متروک صفات	CSS `background-color` اور `color` استعمال کریں
صفات کی غلط ہجے (مثلاً "bgcolor" بمقابلہ "bgcolor")	صفت کام نہیں کرے گی	صحیح ہجے استعمال کریں: `bgcolor` اور `text`
اسپیس کے ساتھ کلر نام کا استعمال	غلط کلر قدر	ایک لفظی کلر نام یا ہیکس کوڈ استعمال کریں
`<body>` ٹیگ بند کرنا بھول جانا	غلط HTML	ہمیشہ `</body>` بند کریں
خراب کنٹراسٹ کا استعمال (مثلاً پیلے پر سفید ٹیکسٹ)	پڑھنا مشکل	اچھے کنٹراسٹ والے کلرز کا انتخاب کریں

📊 مشاہدات

bgcolor پورے صفحے کا بیک گراؤنڈ کلر سیٹ کرتا ہے۔
text صفحے پر تمام ٹیکسٹ کے لیے ڈیفالٹ ٹیکسٹ کلر سیٹ کرتا ہے۔
آپ کلر نام، ہیکس کوڈز، یا RGB اقدار استعمال کر سکتے ہیں۔
یہ صفات HTML5 میں متروک ہیں لیکن براؤزرز میں اب بھی کام کرتی ہیں۔
جدید تجویز کردہ طریقہ CSS کا استعمال ہے۔
انفرادی عناصر style یا <font> ٹیگ کا استعمال کرکے ڈیفالٹ ٹیکسٹ کلر کو اوور رائڈ کر سکتے ہیں۔

✅ نتیجہ

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

<body> ٹیگ میں bgcolor اور text صفات کا استعمال کیا۔
حسب ضرورت بیک گراؤنڈ اور ٹیکسٹ کلرز کے ساتھ ایک ویب صفحہ بنایا۔
مختلف کلر قدر کی اقسام کے بارے میں سیکھا۔
جدید ویب ڈیولپمنٹ کے لیے CSS متبادل کے بارے میں سیکھا۔
نتائج کو براؤزر میں دیکھا۔

📌 اہم: اگرچہ bgcolor اور text سیکھنے کے لیے مفید ہیں، یہ HTML5 میں متروک ہیں۔ نئے پروجیکٹس کے لیے، بہتر کنٹرول، دیکھ بھال، اور ویب معیارات کی پابندی کے لیے ہمیشہ CSS کو background-color اور color کے ساتھ استعمال کریں۔

💡 اگلے اقدامات: مختلف کلر کے مجموعوں کے ساتھ ایک صفحہ بنانے کی کوشش کریں۔ حسب ضرورت کلرز بنانے کے لیے ہیکس کوڈز کے ساتھ تجربہ کریں۔ اپنے صفحات کو مزید پڑھنے کے قابل بنانے کے لیے کلر کنٹراسٹ کے بارے میں سیکھیں۔ اپنے مستقبل کے پروجیکٹس میں تمام اسٹائلنگ کے لیے CSS کی طرف منتقل ہوں!

⬅ Back to Practical Notebooks

EZNotes

🎨 Practical 71: bgcolor and text attributes usage in a webpage

🎯 Aim

🛠️ What You Need

📖 Introduction

📊 Preview of the Output

🎨 Using bgcolor and text Attributes

📝 Step‑by‑Step: Creating the HTML Page

Step 1: Open Notepad++ and Write the Code

Step 2: Save the File

Step 3: Open in Browser

📊 Color Values Accepted

📊 Common Color Names

📊 CSS Alternative (Modern Method)

📊 Common Mistakes to Avoid

📊 Observations

✅ Result

🎯 مقصد

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

📖 تعارف

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

🎨 bgcolor اور text صفات کا استعمال

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

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

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

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

📊 قبول شدہ کلر اقدار

📊 عام کلر نام

📊 CSS متبادل (جدید طریقہ)

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

📊 مشاہدات

✅ نتیجہ