पिछले पाठ में हमने एक वेब टेम्प्लेट का लेआउट बनाना सीखा । अब हम उस वेबटेम्प्लेट की कोडिंग को आसान करना व DIV एलीमेण्ट का सम्पूर्ण प्रयोग करना सीखेंगे । DIV एलीमेण्ट वेबसाइट के लेआउट का प्राणतत्व है अर्थात् यदि आप एक वेबटेम्प्लेट को कई विभागों में बाँटना चाहते हैं तो DIV एलीमेण्ट आपके लिये वरदान है ।
पिछले पाठ में बनाये गये वेबटेम्प्लेट की कोडिंग निम्न थी ।
<!doctype html>
<html>
</html>
<html>
HEAD SECTION
<head>
<title>My First Web Page </title>
</head>
<title>My First Web Page </title>
</head>
BODY SECTION
<body style="background:yellow;">
<!--header-->
<div style="width:900px; height:200px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white;" >
</div>
<!--menu-->
<div style="width:880px; height:35px; margin:auto; padding:10px; border:2px solid green; font-family:Times New Roman; font-size:30px; text-align:center; background:white;" >
<nav><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Home</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page2</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page3</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page4</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page5</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page6</a></nav>
</div>
<div style="width:900px; height:600px; margin:auto;">
<!--left divison -->
<div style="width:700px; height:600px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white; float:left;">
</div>
<!-- right divison -->
<div style="width:190px; height:600px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white; float:right;" >
</div>
</div>
<!--footer -->
<div style="width:900px; height:50px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white;" >
</div>
</body><!--header-->
<div style="width:900px; height:200px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white;" >
</div>
<!--menu-->
<div style="width:880px; height:35px; margin:auto; padding:10px; border:2px solid green; font-family:Times New Roman; font-size:30px; text-align:center; background:white;" >
<nav><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Home</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page2</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page3</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page4</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page5</a><a style="margin:5px; padding:3px; border:1px solid red;" href="#">Page6</a></nav>
</div>
<div style="width:900px; height:600px; margin:auto;">
<!--left divison -->
<div style="width:700px; height:600px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white; float:left;">
</div>
<!-- right divison -->
<div style="width:190px; height:600px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white; float:right;" >
</div>
</div>
<!--footer -->
<div style="width:900px; height:50px; margin:auto; border:2px solid green; font-family:Times New Roman; font-size:40px; text-align:center; background:white;" >
</div>
</html>
अब पहले हम इसे छोटा करना सीखेंगे इसके बाद ठीक से इसकी एक-एक टैग व कोडिंग को समझेंगे ।
कोडिंग को संक्षिप्त करने के लिये हमें हेड सेक्शन का ध्यान करना होगा । हमने पिछले पाठों में हेड सेक्शन को पढा था । हेड सेक्शन के अन्तर्गत हम क्या क्या कर सकते हैं इसे भी जाना था । अब हम हेड सेक्शन के अन्तर्गत <style></style> टैग का प्रयोग करके इस कोडिंग को छोटा करेंगे ।
यदि आपने हेड सेक्शन को ध्यान से पढा होगा तो आपको याद होगा कि <style></style> एलीमेण्ट का प्रयोग CSS स्टाइल कोडिंग को पेज में एक ही स्थान पर रखने के लिये किया जाता है । यह एक ही स्थान पर स्थित होकर पूरे पेज के स्टाइल को प्रबन्धित करता है ।
प्रयोग :
<!doctype html>
<html>
<html>
<head>
<title>My First Web Page </title>
<title>My First Web Page </title>
<style>
body{background:yellow;}
#header
{width:900px; height:200px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center;
background:white; }
#menu
{width:880px; height:35px;
margin:auto; padding:10px;
border:2px solid green;
font-family:Times New Roman;
font-size:30px; text-align:center;
background:white;}
nav a
{margin:5px; padding:3px; border:1px solid red; }
#content
{width:900px; height:600px; margin:auto; }
#leftbox
{width:700px; height:600px;
margin:auto; border:2px solid green;
font-family:Times New Roman; font-size:40px;
text-align:center; background:white; float:left;}
#rightbox
{width:190px; height:600px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center;
background:white; float:right;}
#footer
{width:900px; height:50px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center; background:white;}
</style>
</head>body{background:yellow;}
#header
{width:900px; height:200px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center;
background:white; }
#menu
{width:880px; height:35px;
margin:auto; padding:10px;
border:2px solid green;
font-family:Times New Roman;
font-size:30px; text-align:center;
background:white;}
nav a
{margin:5px; padding:3px; border:1px solid red; }
#content
{width:900px; height:600px; margin:auto; }
#leftbox
{width:700px; height:600px;
margin:auto; border:2px solid green;
font-family:Times New Roman; font-size:40px;
text-align:center; background:white; float:left;}
#rightbox
{width:190px; height:600px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center;
background:white; float:right;}
#footer
{width:900px; height:50px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center; background:white;}
</style>
<body>
<!--header-->
<div id="header" ></div>
<!--menu-->
<div id="menu" >
<nav><a href="#">Home</a>
<a href="#">Page1</a><a href="#">Page2</a>
<a href="#">Page3</a><a href="#">Page4</a>
<a href="#">Page5</a></nav>
</div>
<div id="content">
<!--left divison -->
<div id="leftbox" ></div>
<!-- right divison -->
<div id="rightbox" ></div>
</div>
<!--footer -->
<div id="footer"></div>
</body>
</html><!--header-->
<div id="header" ></div>
<!--menu-->
<div id="menu" >
<nav><a href="#">Home</a>
<a href="#">Page1</a><a href="#">Page2</a>
<a href="#">Page3</a><a href="#">Page4</a>
<a href="#">Page5</a></nav>
</div>
<div id="content">
<!--left divison -->
<div id="leftbox" ></div>
<!-- right divison -->
<div id="rightbox" ></div>
</div>
<!--footer -->
<div id="footer"></div>
</body>
इस कोडिंग का परिणाम भी ठीक वही होगा जो पिछली कोडिंग का था । इस कोडिंग में हमने सारे स्टाइल कोडिंग को स्टाइल टैग के अन्दर इकट्ठा कर दिया जिससे अब पेज कुछ कम जटिल लगने लगा । इस कोडिंग को कापी करके आप अपने नोटपैड पर इनडेक्स.एचटीएमएल नाम से सेव करके रन कराएँगे तो परिणाम वही प्राप्त होगा जो उपर वाली कोडिंग में प्राप्त होता है ।
अब इस कोड को समझते हैं ।
<!doctype html> - एचटीएमएल 5 परिचय टैग
<html> - एचटीएमएल टैग शुरू
<html> - एचटीएमएल टैग शुरू
<head> - ओपिनिंग हेड टैग की शुरुआत
<title>My First Web Page </title> - पेज का टाइटिल
<title>My First Web Page </title> - पेज का टाइटिल
<style> - ओपिनिंग स्टाइल टैग की शुरुआत
body{background:yellow;} पूरे पेज का बैकग्राउंड परिवर्तन (पीला)
#header – हेडर सेक्शन को हेडर आईडी बनाकर उसका स्टाइल परिवर्तन
{width:900px; height:200px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center;
background:white; }
#menu - मीनू सेक्शन को मीनू आईडी बनाकर उसका स्टाइल परिवर्तन
{width:880px; height:35px;
margin:auto; padding:10px;
border:2px solid green;
font-family:Times New Roman;
font-size:30px; text-align:center;
background:white;}
nav a मीनू टैब को स्टाइल करना
{margin:5px; padding:3px; border:1px solid red; }
#content कान्टेन्ट सेक्शन को कान्टेन्ट आईडी बनाकर उसका स्टाइल परिवर्तन
{width:900px; height:600px; margin:auto; }
#leftbox - लेफ्टबाक्स सेक्शन को लेफ्टबाक्स आईडी बनाकर उसका स्टाइल परिवर्तन
{width:700px; height:600px;
margin:auto; border:2px solid green;
font-family:Times New Roman; font-size:40px;
text-align:center; background:white; float:left;}
#rightbox - राइटबाक्स सेक्शन को राइटबाक्स आईडी बनाकर उसका स्टाइल परिवर्तन
{width:190px; height:600px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center;
background:white; float:right;}
#footer - फूटर सेक्शन को फूटर आईडी बनाकर उसका स्टाइल परिवर्तन
{width:900px; height:50px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center; background:white;}
</style> - स्टाइल टैग क्लोज (बन्द)
</head> - हेड टैग बन्द
body{background:yellow;} पूरे पेज का बैकग्राउंड परिवर्तन (पीला)
#header – हेडर सेक्शन को हेडर आईडी बनाकर उसका स्टाइल परिवर्तन
{width:900px; height:200px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center;
background:white; }
#menu - मीनू सेक्शन को मीनू आईडी बनाकर उसका स्टाइल परिवर्तन
{width:880px; height:35px;
margin:auto; padding:10px;
border:2px solid green;
font-family:Times New Roman;
font-size:30px; text-align:center;
background:white;}
nav a मीनू टैब को स्टाइल करना
{margin:5px; padding:3px; border:1px solid red; }
#content कान्टेन्ट सेक्शन को कान्टेन्ट आईडी बनाकर उसका स्टाइल परिवर्तन
{width:900px; height:600px; margin:auto; }
#leftbox - लेफ्टबाक्स सेक्शन को लेफ्टबाक्स आईडी बनाकर उसका स्टाइल परिवर्तन
{width:700px; height:600px;
margin:auto; border:2px solid green;
font-family:Times New Roman; font-size:40px;
text-align:center; background:white; float:left;}
#rightbox - राइटबाक्स सेक्शन को राइटबाक्स आईडी बनाकर उसका स्टाइल परिवर्तन
{width:190px; height:600px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center;
background:white; float:right;}
#footer - फूटर सेक्शन को फूटर आईडी बनाकर उसका स्टाइल परिवर्तन
{width:900px; height:50px;
margin:auto; border:2px solid green;
font-family:Times New Roman;
font-size:40px; text-align:center; background:white;}
</style> - स्टाइल टैग क्लोज (बन्द)
<body> - बाडी टैग शुरु
<!--header—> - कमेण्ट
<div id="header" > - हेडर डीआईवी में हेडर आईडी निर्माण
</div> हेडर डीआवी टैग बन्द
<!--menu—> - कमेण्ट
<div id="menu" > मीनू डीआईवी में मीनू आईडी निर्माण
<nav> - नाव टैग का प्रारम्भ
<a href="#">Home</a> - मीनू को होम टैब लिंक
<a href="#">Page1</a><a href="#">Page2</a>
<a href="#">Page3</a><a href="#">Page4</a>
<a href="#">Page5</a> - क्रम से सभी पेज लिंक करना ।
</nav> - नाव टैग बन्द
</div> - मीनू डीआईवी बन्द
<div id="content"> - कान्टेन्ट डीआईवी शुरू व कान्टेन्ट आईडीनिर्माण
<!--left divison –> कमेण्ट
<div id="leftbox" > - लेफ्टबाक्स डीआईवी शुरू व लेफ्टबाक्स आईडी निर्माण
</div> लेफ्टबाक्स डीआईवी बन्द
<!-- right divison –> कमेण्ट
<div id="rightbox" > - राइटबाक्स डीआईवी शुरू व राइटबाक्स आईडीनिर्माण
</div> - राइटबाक्स डीआईवी बन्द
</div> - कान्टेन्ट डीआईवी बन्द
<!--footer —> कमेण्ट
<div id="footer"> - फूटर डीआईवी शुरु व फूटर आईडी निर्माण
</div> - फूटर डीआईवी बन्द
</body> - बाडी टैग बन्द
</html> - एचटीएमएल टैग बन्द <!--header—> - कमेण्ट
<div id="header" > - हेडर डीआईवी में हेडर आईडी निर्माण
</div> हेडर डीआवी टैग बन्द
<!--menu—> - कमेण्ट
<div id="menu" > मीनू डीआईवी में मीनू आईडी निर्माण
<nav> - नाव टैग का प्रारम्भ
<a href="#">Home</a> - मीनू को होम टैब लिंक
<a href="#">Page1</a><a href="#">Page2</a>
<a href="#">Page3</a><a href="#">Page4</a>
<a href="#">Page5</a> - क्रम से सभी पेज लिंक करना ।
</nav> - नाव टैग बन्द
</div> - मीनू डीआईवी बन्द
<div id="content"> - कान्टेन्ट डीआईवी शुरू व कान्टेन्ट आईडीनिर्माण
<!--left divison –> कमेण्ट
<div id="leftbox" > - लेफ्टबाक्स डीआईवी शुरू व लेफ्टबाक्स आईडी निर्माण
</div> लेफ्टबाक्स डीआईवी बन्द
<!-- right divison –> कमेण्ट
<div id="rightbox" > - राइटबाक्स डीआईवी शुरू व राइटबाक्स आईडीनिर्माण
</div> - राइटबाक्स डीआईवी बन्द
</div> - कान्टेन्ट डीआईवी बन्द
<!--footer —> कमेण्ट
<div id="footer"> - फूटर डीआईवी शुरु व फूटर आईडी निर्माण
</div> - फूटर डीआईवी बन्द
</body> - बाडी टैग बन्द
इस कोडिंग में इमने कुछ नयी चीजें की हैं जो निम्नलिखित हैं ।
- कमेण्ट
- डीआईवी
- आईडी
- सीएसएस स्टाइल
- नाव
- हाइपरलिंक
Comments
Post a Comment