Skip to main content

अपनी वेबसाइट के डिवीजन्‍स का बार्डर बनायें मनचाहा ।।


     इस पोस्‍ट में हम अपने वेबसाइट के विभिन्‍न डिवीजन्‍स के बार्डर को मनचाहे तरीके से सेट करना सीखेंगे ।

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

     हमारा बेस कोड निम्‍न है - 


<!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>

इस कोड का परिणाम निम्‍न है -

अब हम इस टेम्‍प्‍लेट के सभी बार्डर्स को अलग-अलग रंगों और तरीकों से सेट करेंगे। सबसे पहले हम यह देखेंगे कि कौन से ब्‍लाक के बार्डर के लिये कौन सी कोडिंग की गई है - 

<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>

हम देख सकते हैं कि अभी हमने सभी डिवीजन्‍स पर एक साथ ही बार्डर सेट किये हैं । किसी भी डिवीजन पर व्‍यक्तिगत रूप से बार्डर सेट नहीं किया गया है । अगर हमें सभी डिवीजन्‍स पर अलग अलग बार्डर सेट करना है तो हमें हर डिवीजन पर व्‍यक्तिगत रूप से बार्डर कोड डालना पडेगा । तथा सभी डिवीजन्‍स पर एकसाथ डाला गया कोड रिमूव करना पडेगा । आइये इसे करके देखते हैं - 

<style>
body{margin:0; padding:0; text-align:center;}
#container{width:100%;}
#header{height: 150px; width:100%; background:linear-gradient(red, yellow); border:1px solid green;}
#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange); border:1px solid green; }

#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white); border:1px solid green;}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange); border:1px solid green;}

#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black);
border:1px solid green;}

</style>

उपर्युक्‍त कोड में से हमने div{border:1px solid green;} कोड को हटाकर सभी डिवीजन्‍स में व्‍यक्तिगत रूप से border:1px solid green; कोड डाल दिया । इस परिवर्तन से हमारे टेम्‍प्‍लेट पर कोई फर्क नहीं पडेगा । किन्‍तु अब हम जो करने जा रहे हैं उससे हमारे टेम्‍प्‍लेट में उल्‍लेखनीय परिवर्तन होगा ।

    अब हम हर डिवीजन के बार्डर कोड की मोटाई और रंग को बदलेंगे । आइये करके देखें - 

<style>
body{margin:0; padding:0; text-align:center;}
#container{width:100%;}


#header{height: 150px; width:100%; background:linear-gradient(red, yellow);}
#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange);  border:2px groove purple; border-left:0px; border-right:0px; }

#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white); border:2px groove red; border-top:0px; border-bottom:0px;}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange); border:2px groove red; border-top:0px; border-bottom:0px; }

#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black);
border:2px groove green; border-left:0px; border-right:0px;}

</style>

उक्‍त स्‍टाइल कोड में हमने मात्र कुछ बदलाव किये हैं । आइये इन्‍हें समझते हैं । 
  • हमने हेडर डिवीजन के बार्डर को पूरी तरह खतम कर दिया है । इसकी आवश्‍यकता नहीं थी क्‍यूँकि इसके तीन तरफ बार्डर दिखाई नहीं देता और नीचे का बार्डर मेन्‍यू डिवीजन के बार्डर से टकरा सकता है।
  • हमने मेन्‍यू डिवीजन के बार्डर की मोटाई 2 पिक्‍सल सेट की तथा रंग पर्पल कर दिया । 
  • क्‍यूँकि मेन्‍यू सेक्‍शन का दाहिना और बांया बार्डर दिखना नहीं है इसलिये हमने दाहिने और बांये बार्डर की मोटाई को शून्‍य कर दिया । 
  • हमने साइडबार बार्डर की मोटाई 2 पिक्‍सल की तथा रंग लाल कर दिया । 
  • साइडबार का ऊपरी तथा निचला बार्डर अनावश्‍यक होने के कारण शून्‍य पिक्‍सल कर दिया । 
  • पोस्‍ट बार्डर को भी ठीक साइडबार बार्डर की तरह सेट कर दिया । 
  • फुटर बार्डर की मोटाई दो पिक्‍सल तथा रंग हरा कर दिया ।
  • फुटर डिवीजन का दाहिना तथा बांया बार्डर हटाने के लिये उसकी मोटाई को शून्‍य पिक्‍सल कर दिया ।
आइये अब इसका परिणाम देखते हैं । 




        आप देख सकते हैं कि आपके वेबसाइट के प्रत्‍येक डिवीजन का बार्डर बेहद हिसाब से सेट हो गया है । इसमें आप सभी बार्डर्स की मोटाई को और भी बढा सकते हैं । बस आपको प्रत्‍येक कोड में पिक्‍सल बढा देने हैं । इसके रंग को भी मनचाहा बदला जा सकता है ।

      इस पोस्‍ट में हमने अपने वेबसाइट के बार्डर को मनपसन्‍द रूप से सेट करना सीखा । आगे हम वेबसाइट के अन्‍दर लिखे टेक्‍स्‍ट को डिजाइन करना सीखेंगे । 

     इस पोस्‍ट के विषय में कोई भी शंका हो तो पूछ सकते हैं । 

पूरा कोड नीचे दिया गया है, इसे अपने नोटपैड पर कॉपी पेस्‍ट करके परिणाम देख सकते हैं ।

<!doctype html>
<html>
<head>
<title>My New Html Page </title>
 
<style>
body{margin:0; padding:0; text-align:center;}
#container{width:100%;} 

#header{height: 150px; width:100%; background:linear-gradient(red, yellow);}
#menu{height: 50px; width: 100%; background:linear-gradient(pink, orange);  border:2px groove purple; border-left:0px; border-right:0px; }

#sidebar{height: 350px; width:25%; background:linear-gradient(gray, white); border:2px groove red; border-top:0px; border-bottom:0px;}
#post{height: 350px; width: 70%; background:linear-gradient(orange, yellow, orange); border:2px groove red; border-top:0px; border-bottom:0px; }

#sidebar, #post{vertical-align:top; display:inline-block;}
#footer{height: 50px; width: 100%; background:linear-gradient(green, black); border:2px groove green; border-left:0px; border-right:0px;}

</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>

Comments

Post a Comment

Popular posts from this blog

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

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

एचटीएमएल सीखें - हिन्‍दी में ।।

मित्रों       वेबसाइट डिजाइनिंग सीखने के शुरुआती दिनों में ज्‍यादा तकलीफ इसी लिये हुई कि कई सारी चीजें अंग्रेजी में समझ में आती ही नही थीं । फिर घर से दूर जाकर सीखने के लिये समय का अभाव भी था । इन्‍ही बातों को ध्‍यान में रखते हुए मेरे जैसे बाकी लोगों को ये समस्‍या न आने पाये, इसके लिये ही हिन्‍दी में में यह ट्यूटोरियल ब्‍लाग प्रारम्‍भ किया जा रहा है ।      इस ब्लाग पर सबसे पहले एचटीएमएल जो कि वेबसाइट बनाने के लिये सर्वप्रथम व अनिवार्य डिजाइनिंग भाषा है को सिखाया जायेगा । जिससे कि आप सभी कुछ सामान्‍य व आवश्‍यक चीजों को जान सकें । आवश्‍यकता -  एचटीएमएल सीखने के लिये प्राथमिक आवश्‍यकता मात्र एक कम्‍प्‍यूटर सिस्‍टम जिसमें कि एक इण्‍टरनेट ब्राउजर तथा एक टेक्‍स्‍ट एडिटर (उदा. नोटपैड) हो की है । यदि आपके पास विन्‍डोज सिस्‍टम है तो इसमें इण्‍टरनेट एक्‍सप्‍लोरर इण्‍टरनेट ब्राउजर   तथा नोटपैड पहले से ही होता है । अन्‍य इण्‍टरनेट ब्राउजर्स में मोजिला का फायरफॉक्‍स, गूगल क्रोम, सफारी आदि कई हैं । इनमें से जो भी चाहें प्रयोग कर सकते हैं । यदि फायरफाक्‍स का प्रयोग करें तो अधिक आसानी

एचटीएमएल हेड सेक्‍सन (शीर्ष विभाग) ।।

     पिछले पाठ में हमने एचटीएमएल पृृष्‍ठ की सामान्‍य संरचना पढी । इस पाठ में हम वेब पेज के निर्माण में लगने वाली मूलभूत कोडिंग के विषय में जानेंगे ।      प्राय: सभी एचटीएमएल शिक्षक एक एक विषय को पकडकर एचटीएमएल कोडिंग सिखाते हैं जो निश्‍चय ही एक अत्‍यन्‍त महत्‍वपूर्ण व बेहतर तरीका है । किन्‍तु यह तरीका उन लोगों के लिये कम कारगर है जो कम समय में ज्‍यादा सीखना चाहते हैं । इसलिये यहाँ पर सिखाने का तरीका '' सरल से जटिल '' की आेर पर आधारित है  ।     आज के पाठ में हम एचटीएमएल के हेड सेक्‍सन में की जाने वाली महत्‍वपूर्ण कोडिंग सीखेंगे । एचटीएमएल हेड सेक्‍सन (शीर्ष विभाग) -      एचटीएमएल का हेड सेक्‍सन वह विभाग है जो हमें वेबपेज के रूप में तो नहीं दिखता है किन्‍तु वेबपेज के दिखने में जिसकी महत्‍वपूर्ण भूमिका रहती है  । इस सेक्‍सन के अन्‍तर्गत की गई कोडिंग्‍स आपके वेबपेज को स्‍टाइल करने के‍ लिये, वेब पेज में स्क्रिप्‍ट डालने के लिये,वेबसाइट की डिसक्रिप्‍शन तथा भाषा आदि बताने के लिये प्रयुक्‍त होती है । हेड सेक्‍सन के अन्‍तर्गत निम्‍न टैग प्रयुक्‍त किये जाते हैं  ।