Skip to main content

अपने वेबसाइट के बैकग्राउण्ड को विभिन्न रंगों से कैसे सजाएँ ??

By SANSKRITJAGAT

पिछली पोस्ट में हमने अपने वेबसाइट को कुछ सीएसएस कोड्स के द्वारा डिजाइन करना व रंग भरना बताया । अपनी वेबसाइट को सुन्दर और आकर्षक बनाने की श्रृंखला में हम आज अपनी वेबसाइट में डायनॉमिक रंग भरना सीखेंगे ।
पिछली पोस्ट को पढने के लिये निम्न लिंक पर जाएं ।

अपनी वेबसाइट को आकर्षक कैसे बनायें ??

पहले तो हम अपने अब तक किये गये कोड को एक दृष्टि में देखेंगे । जिससे हमें समझ में आ जाए कि हमारे कोड में कितनी स्टाइल हुई है और अब हमें आगे क्या करना है । आज के इस पाठ में हम अपने हर एक डिवीजन में कई रंगों को मिलाकर और भी सुन्दर रंग भरना सीखेंगे ।  हमारा अबतक का कोड निम्न है –

<!doctype html>
<html>
<head>
<title>My New Html Page </title>
<style>
body{margin:0; padding:0; text-align:center;}
div{border:1px solid green;}
#container{width:100%;}
#header{height: 150px; width:100%; background:red;}
#menu{height: 50px; width: 100%; background:pink;}
#sidebar{height: 350px; width:25%; background:gray;}
#post{height: 350px; width: 70%; background:yellow;}
#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:green;}
</style>
</head>

<body>
<div id="container">
<div id="header">SJweb Development Service</div>
<div id="menu"> Menu Bar </div>
<div id="sidebar">Left Sidebar</div>
<div id="post">Post Area</div>
<div id="footer">Footer</div>
</div>
</body>
</html> 

इस कोड का रिजल्ट भी हमने देखा ।
 अब हम इसमें कुछ रंगों के मिश्रण से इसके बैकग्राउंड को बदलेंगे । और इसके लिये हमें मात्र कुछ बदलाव करना होगा । उपयुक्त कोड में लाल रंग से जो कोड लिखे गये हैं वो ही इस पूरे टेम्प्लेट के बैकग्राउण्ड के रंग हैं । अब इनमें हम थोडा सा परिवर्तन करेंगे । 
 इसमें हम background: ; की जगह background:linear-gradient() ; का प्रयोग करेंगे । 
आइये इसे करके देखते हैं । 

<style>
body{margin:0; padding:0; text-align:center;}
div{border:1px solid green;}
#container{width:100%;}
#header{height: 150px; width:100%; background:red;}
#menu{height: 50px; width: 100%; background:pink;}
#sidebar{height: 350px; width:25%; background:gray;}
#post{height: 350px; width: 70%; background:yellow;}
#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:green;}
</style>
 
इस कोड को परिवर्तित करके हम निम्न की भांति कर देते हैं । 
 
<style>
body{margin:0; padding:0; text-align:center;}
div{border:1px solid green;}
#container{width:100%;}
#header{height: 150px; width:100%; background:linear-gradient(red, yellow);}
#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange);}
#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white);}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange);}
#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black);}
</style>

अब हम इसका परिणाम देखते हैं – 
अब ये परिणाम आप को पहले के परिणाम से बेहतरीन दिखाई पड रहा होगा । इसमें हमने मात्र कुछ बदलाव किया है । सामान्य रंगों की जगह हमने इसमें ग्रेडिएण्ट्स का प्रयोग किया है और इससे हमारे टेम्प्लेट की सुन्दरता कई गुना बढ गई । 
आगे हम अपने टेम्प्लेट में नेविगेशन मीनू एड करेंगे और कुछ अन्य आकर्षक बदलाव करके देखेंगे । 

 पूरा कोड निम्न है –

<!doctype html>
<html>
<head>
<title>My New Html Page </title>
<style>
body{margin:0; padding:0; text-align:center;}
div{border:1px solid green;}
#container{width:100%;}
#header{height: 150px; width:100%; background:linear-gradient(red, yellow);}
#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange);}
#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white);}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange);}
#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black);}
</style>
</head>

<body>
<div id="container">
<div id="header">SJweb Development Service</div>
<div id="menu"> Menu Bar </div>
<div id="sidebar">Left Sidebar</div>
<div id="post">Post Area</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

 कोई भी शंका हो तो कृपया टिप्पणीमंजूषा में पूंछें । 

Labels:

Comments

Post a Comment

Popular posts from this blog

सीएसएस का प्रयोग (How to Use CSS)

By
     सीएसएस का प्रयोग अत्‍यन्‍त सरल है । सीएसएस का प्रयोग आपका बहुत सारा समय व आपकी बहुत सारी मेहनत बचाने के साथ ही साथ आपके पेज को बेहतरीन सुन्‍दरता प्रदान करता है । इसके प्रयोग की तीन विधियाँ हैं । ये तीनों ही विधियाँ प्रयोज्य हैं अर्थात् इनमें से किसी भी विधि का प्रयोग आपको वांछित परिणाम प्रदान कर सकता है । सीएसएस प्रयोग विधि सीएसएस का प्रयोग निम्‍नलिखित तीन विधियों से किया जा सकता है । सीएसएस को एक अलग सीएसएस फाइल में लिखकर उसे एचटीएमएल पेज से लिंक करना । सीएसएस को एचटीएमएल पेज के हेड सेक्‍सन के अन्‍तर्गत स्‍टाइल टैग के अन्‍दर लिखना । सीएसएस को किसी भी टैग या एलीमेण्‍ट के अन्‍दर सीधे लिखना । सीएसएस का बाह्य प्रयोग -       सीएसएस को बाहर से लिंक करना सबसे बेहतरीन तरीका है । इस तरीके से आपकी कोडिंग फाइल बहुत बोझिल और बडी होने से बच जाती है । यदि हमें एक बहुत सारे ब्‍लाक्‍स का पेज बनाना है और हम हर ब्‍लाक को अलग अलग रंगों व तरीकों से सजाते हैं तो निश्चित ही हमारे पेज की कोडिंग फाइल बहुत बडी हो जायेगी जिसे सुधार कर...
2 comments
Read more

एचटीएमएल संरचना ।

By
पिछले पाठ में हमने एचटीएमएल का एक प्रारूप देखा । यहाँ पर उस प्रारूप की व्‍याख्‍या की जायेगी । इस अध्‍याय को लिखते समय हम यह मानकर चल रहे हैं कि वेबडिजाइनिंग सीखने की इच्‍छा रखने वाले को सामान्‍य कम्‍प्‍यूटर ज्ञान जैसे कि कम्‍प्‍यूटर की कोई फाइल या फोल्‍डर खोलना, बन्‍द करना, किसी प्रोग्राम को खोलना, नया फोल्‍डर बनाना, किसी फाइल को खोलना, उसपर काम करना, उसे सेव करना तथा डिलीट करना आदि । इसलिये हम इन सभी बातों को बताने की अपेक्षा सीधे एचटीएमएल की तरफ चलते हैं । एचटीएमएल का फुलफार्म - HTML = Hyper Text Markup Language एचटीएमएल संरचना - पिछले पाठ में हमने निम्‍न कोडिंग का प्रयोग किया था । <!DOCTYPE HTML> <html> <head> <title>My First Html Page</title> </head> <body> Hello World </body> </html> अब इस कोडिंग की पूरी व्‍याख्‍या यहाँ प्रस्‍तुत की जा रही है ताकि आप एचटीएमएल को पूरी तरह समझ सकें । यह ध्‍यान रखें कि एचटीएमएल वेबपेज बनाने का सर्वप्रथम सोपान है, बिना इसके सीखे आप वेबपेज नही बना सकते हैं । <!DOCTYPE ...
7 comments
Read more

एजाक्‍स तकनीकि - एजाक्‍स सीखें हिन्‍दी में ।

By
एजाक्‍स कोई स्‍वतन्‍त्र तकनीकि नहीं अपितु अन्‍तर्सम्‍बन्धित तकनीकों का वर्ग है । एजाक्‍स के अन्‍तर्गत मुख्‍य रूप से निम्‍न तकनीकि (भाषाएं) रखी जा सकती हैं । एचटीएमएल सीएसएस एक्‍सएमएल जेएसऑन जावास्क्रिप्‍ट XMLHttpRequest आब्‍जेक्‍ट की प्रापर्टीज  - onReadyStateChange - जब भी रेडीस्‍टेट बदलता है तो इसे कॉल किया जाता है । इसे synchronous requests के साथ प्रयोग नहीं करना चाहिए । readyState - यह विभिन्‍न कार्यों को सम्‍पादित करने के लिये प्रयुक्‍त होता है । इसे सोपान क्रम में UNOPENED, OPENED, HEADERS_RECEIVED, LOADING, DONE तरह रखा जा सकता है । reponseText - रिस्‍पान्‍स को टेक्‍स्‍ट के रूप में प्रकट करता है । responseXML - रिस्‍पान्‍स को एक्‍सएमएल के रूप में प्रकट करता है । XMLHttpRequest आब्‍जेक्‍ट के महत्‍वपूर्ण मेथड - void open(method, URL) - अनुरोध को गेट अथवा पोस्‍ट मेथड के आधार पर दिये हुए यूआरएल को भेजता है । void open(method, URL, async) - उपयुक्‍त की ही भॉंति इसका भी कार्य है केवल asynchronous है या नहीं इसका विवरण भी देता है । void open(method, ...
17 comments
Read more