Websites के categories के अनुसार उसका background भी बदलना जरुरी होता है | आपने देखा होगा कि कई websites का background अलग-अलग colors में होता है  | Background color website को attractive भी बनाता है |इस lesson मे HTML में Background Color Change कैसे किया जा सकता है यह बताएंगे। साथ मे यह भी बताएंगे की CSS मदद से Background Color Change कैसे होता है|

HTML का default background color white होता है, लेकिन इसे अपने इच्छानुसार बदला जा सकता है |

Color (not colour) background के लिए HTML में bgcolor attribute का इस्तेमाल किया जाता है, लेकिन इस attribute को HTML5 से हटा दिया गया है | लेकिन अभी भी ये सभी browser पर work करता है | फिर भी इसे इस्तेमाल ना करना ही अच्छा है , क्योंकि ये किसी भी वक्त Browser से हटाया जा सकता है | इसके जगह पर Style attribute का इस्तेमाल करना सही है | Style attribute को CSS(Cascading Style Sheets) कहा जाता है |

Background color को change करने के लिए Bgcolor या style attribute को Body Tag के अंदर लिखा जाता है, उसके बाद जो भी color भरना है उसका नाम लिखा जाता है , जैसे की red, green, blue या कोई भी color जिसे आप इस्तेमाल करना चाहते हैं |

HTML Code

<body bgcolor=”yellow”>

CSS Code

<body style=”background-color:red”>

नीचे लिखे गए Code को अपने Notepad में Type करे या पहले से बने हुए HTML फाइल को Notepad मे Open करके उसमे जरूरी बदलाव करें |

Note : किसी भी HTML file को Notepad मे open करने के लिए उस file पे right click करके open with मे click करे फिर Notepad मे क्लिक करे | इससे आप का file Notepad मे open हो जाएगा और आप उसे edit कर पाएंगे |

HTML file को नोटपेड में कैसे खोले

HTML के मदद से Background Color change करना

Code

<html>
<head>
<title>gseasytech.com</title>
</head>
<body bgcolor=”yellow”>
<p>HTML stands for Hypertext Markup Language. It allows the user to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications.</p>
</body>
</html>

इस file को bgcolor.html नाम से save करें और browser मे open करें, तो आपके फाइल का आउटपुट निचे दिए आउटपुट जैसे दिखेगा | अगर आप पहले से बने हुए file पर edit कर रहे हैं, तब save के बदले save as पर click करे |

Display

html

CSS के मदद से Background Color change करना

Code

<html>
<head>
<title>gseasytech.com</title>
</head>
<body style=”background-color:red”>
<p>HTML stands for Hypertext Markup Language. It allows the user to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications.</p>
</body>
</html>

इस file को backgroundcolor.html नाम से save करें और browser मे open करें, तो आपके फाइल का आउटपुट निचे दिए आउटपुट जैसे दिखेगा| अगर आप पहले से बने हुए file पर edit कर रहे हैं, तब save के बदले save as पर click करे |

Display

HTML में Background Color Change

Color Code का इस्तेमाल

अगर आप कुछ basic colors इस्तेमाल करना चाहते हैं जैसे red, green, blue इत्यादि , तब आप color का नाम लिख सकते हैं | परन्तु हर color के बहुत सारे shades होते हैं, जिन सबका अलग से नाम देना संभव नही होता है | इसलिए HTML मे perfect color को चुनने के लिए color code का इस्तेमाल किया जाता है |

बहुत सारे ऐसे websites है जहाँ से आप color code प्राप्त कर सकते हैं | https://htmlcolorcodes.com/color-picker/ एक ऐसा ही website है जहाँ आप किसी भी color का code प्राप्त कर सकते हैं | यहाँ तीन तरह के color code मिलते है, HEX, RGB और HSL. इनमे से HEX और RGB color code website के लिए बेहतर होता है |

Color Code copy कैसे करें

नीचे दिए Website link को click कीजिए |

https://htmlcolorcodes.com/color-picker/

Color picker मे mouse से click करके अपने पसंद का color चुने | Color चुनते ही ऊपर उस color का code दिखेगा | उसमे आप को HSC code को select करके copy करना है, और उसे अपने HTML file मे रंग के नाम के जगह paste करना है |

HTML

Code

<html>
<head>
<title>gseasytech.com</title>
</head>
<body style=background-color:#FDB388″>
<p>HTML stands for Hypertext Markup Language. It allows the user to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications.</p>
</body>
</html>

Display

HTML में Background Color Change

अगर आपको सीखने मे किसी प्रकार की समस्या हो या कोई टॉपिक समझ मे न आए तो नीचे कमेन्ट कर के अपना सवाल पूछ सकते हैं |

कृप्या पोस्ट को दोस्तों के साथ फ़ेसबुक और व्हाट्सअप मे शेयर करें |

PreviousIndex PageNext

Trending Topics

Posted in HTML

About Sangita

Leave a Comment