HTML में बैकग्राउंड कलर, टेक्स्ट कलर, और हेडिंग के उदाहरण बनाने के लिए हम style attribute या CSS का उपयोग कर सकते हैं। यहाँ पर दस उदाहरण दिए गए हैं:
1. सिंपल बैकग्राउंड और टेक्स्ट कलर सेट करना
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
</head>
<body style=”background-color: lightblue;”>
<h1 style=”color: navy;”>Hello, World!</h1>
<p style=”color: darkblue;”>This is a paragraph with a blue background.</p>
</body>
</html>
2. बैकग्राउंड में रेड कलर, हेडिंग और टेक्स्ट में वाइट कलर
<!DOCTYPE html>
<html>
<head>
<title>Example 2</title>
</head>
<body style=”background-color: red;”>
<h1 style=”color: white;”>Welcome to My Website</h1>
<p style=”color: white;”>This text is in white color.</p>
</body>
</html>
3. ग्रीन बैकग्राउंड, ब्लैक हेडिंग, और येलो टेक्स्ट
<!DOCTYPE html>
<html>
<head>
<title>Example 3</title>
</head>
<body style=”background-color: green;”>
<h1 style=”color: black;”>Green Background</h1>
<p style=”color: yellow;”>This paragraph text is yellow.</p>
</body>
</html>
4. ग्रेडिएंट बैकग्राउंड, वाइट हेडिंग और ब्लैक टेक्स्ट
<!DOCTYPE html>
<html>
<head>
<title>Example 4</title>
</head>
<body style=”background: linear-gradient(to right, pink, orange);”>
<h1 style=”color: white;”>Gradient Background</h1>
<p style=”color: black;”>Text on gradient background.</p>
</body>
</html>
5. बैकग्राउंड में ग्रे कलर और हेडिंग में ब्लू
<!DOCTYPE html>
<html>
<head>
<title>Example 5</title>
</head>
<body style=”background-color: lightgray;”>
<h1 style=”color: blue;”>Gray Background with Blue Heading</h1>
<p style=”color: black;”>Black text on gray background.</p>
</body>
</html>
6. ब्लैक बैकग्राउंड और रेड हेडिंग
<!DOCTYPE html>
<html>
<head>
<title>Example 6</title>
</head>
<body style=”background-color: black;”>
<h1 style=”color: red;”>Black Background, Red Heading</h1>
<p style=”color: white;”>White text on black background.</p>
</body>
</html>
7. येलो बैकग्राउंड और पर्पल हेडिंग
<!DOCTYPE html>
<html>
<head>
<title>Example 7</title>
</head>
<body style=”background-color: yellow;”>
<h1 style=”color: purple;”>Yellow Background with Purple Heading</h1>
<p style=”color: black;”>Black text on yellow background.</p>
</body>
</html>
8. ओरेंज बैकग्राउंड, वाइट हेडिंग और ब्राउन टेक्स्ट
<!DOCTYPE html>
<html>
<head>
<title>Example 8</title>
</head>
<body style=”background-color: orange;”>
<h1 style=”color: white;”>Orange Background</h1>
<p style=”color: brown;”>Brown text on orange background.</p>
</body>
</html>
9. बैकग्राउंड इमेज और टेक्स्ट कलर वाइट
<!DOCTYPE html>
<html>
<head>
<title>Example 9</title>
</head>
<body style=”background-image: url(‘background.jpg’); color: white;”>
<h1>Background Image</h1>
<p>White text on background image.</p>
</body>
</html>
10. सेंटर्ड हेडिंग और लाइट ग्रीन बैकग्राउंड
<!DOCTYPE html>
<html>
<head>
<title>Example 10</title>
</head>
<body style=”background-color: lightgreen; text-align: center;”>
<h1 style=”color: darkgreen;”>Centered Heading</h1>
<p style=”color: black;”>This text is centered with light green background.</p>
</body>
</html>
ये 10 HTML उदाहरण विभिन्न बैकग्राउंड और टेक्स्ट रंगों का उपयोग करके प्रदर्शित किए गए हैं।
