हमने एक साधारण सा लेआउट चुना जिसमें एक हेडर था, एक मेन्यूबार, एक साइडबार, एक पोस्ट बाक्स तथा एक फुटर था ।
इस पोस्ट में हम उक्त लेआउट को एचटीएमएल के माध्यम से बनाना व सीएसएस के माध्यम से डिजाइन करना सीखेंगे । हमने जिस लेआउट को चुना है वह आप निम्न चित्र में देख सकते हैं ।
इसे बनाने के लिये बस थोडा सा एचटीएमएल कोड तथा सीएसएस कोड डालना होगा ।
आइये इसे करके देखते हैं -
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
यह एचटीएमएल पेज का अनिवार्य कोड है जो हर वेबसाइट में लिखना ही होता है । इसे नोटपैड पर कापी करके सेव एज विकल्प से index.html नाम से अपने डेस्कटाप पर सेव कर लें । अब इस कोड में <body> </body> टैग के बीच में निम्न कोड कापी पेस्ट करें -
<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>
इसके बाद हम अपने इन ब्लाक्स को डिजाइन करेंगे । उसके लिये हमें निम्न सीएसएस स्टाइल कोड को <head></head> टैग के अन्दर कहीं भी कापी पेस्ट करना है ।
सीएसएस स्टाइल कोड
<style>
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%;}
</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%;}
#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%;}
</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