सबसे पहले हम पिछले कोड को विस्तृत रूप से समझेंगे । फिर आगे बढेंगे ।
हमारा कोड था -
इस कोड ब्लाक में दो मुख्य सेक्शन हैं ।
1-हेड सेक्शन (<head></head>)
2- बॉडी सेक्शन (<body></body>)
इन दोनो सेक्शन में से <body></body> सेक्शन के बीच लिखे कोड ही हमारे वेबपेज पर दिखाई देते हैं । और इन डिवीजन्स को <head></head> सेक्शन के बीच में स्टाइल कोड से डिजाइन किया गया है । डिजाइन कोड्स (सीएसएस कोड्स) को आप <style></style> सेक्शन के बीच में प्राप्त कर सकते हैं ।
पहले हम बाडी सेक्शन के भीतर के कोड्स को समझेंगे ।
<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{margin:0; padding:0; text-align:center;}
---- यह कोड वेबसाइट के पूरे पेज की मार्जिन, पैडिंग व टेक्स्ट एलाइन सेट करता है ।
div{border:1px solid green;}
---- सह कोड सभी डिवीजन पर समान रूप से लागू होता है । इस कोड से सभी डिवीजन के बार्डर को एक पिक्सल मोटा और हरे रंग में किया गया है ।
#container{width:100%;}
---- इस कोड से कन्टेनर डिवीजन की चौडाई को सौ फीसद पर सेट किया गया है ।
#header{height: 150px; width:100%;}
---- इस कोड से हेडर की चौडाई और ऊंचाई सेट की गई है ।
#menu{height: 50px; width: 100%;}
---- इस कोड से मेन्यू डिवीजन की चौडाई व ऊंचाई सेट की गई है ।
#sidebar{height: 350px; width:25%;}
---- इस कोड से साइडबार डिवीजन की चौडाई व ऊंचाई सेट की गई है ।
#post{height: 350px; width: 70%;}
---- इस कोड से पोस्ट डिवीजन की चौडाई व ऊंचाई सेट की गई है ।
#sidebar, #post{vertical-align:top; display:inline-block;}
---- इस कोड से साइडबार और पोस्ट डिवीजन्स को एकसाथ ऊपरी भाग पर शिफ्ट किया जाता है ।
#footer{height: 50px; 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;}
अब हमारा पेज कुछ ऐसा दिखाई देगा ।
इसे खुद करके देखें । बस नीचे दिये गये कोड को अपने कम्प्यूटर के नोटपैड पर कापी पेस्ट करें और फिर उसे index.html नाम से डेस्कटाप पर सेव कर दें । फिर डेस्कटाप पर जाकर इनडेक्स आइकन पर डबल क्लिक करें । आपका पेज वेब ब्राउजर पर खुल जाएगा ।
कोड -
<!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>
<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>
आगे और भी सरल तरीके से हम अपना पूरा पेज बस कुछ मिनटों में डिजाइन करना सीखेंगे ।
Comments
Post a Comment