Skip to main content

DIV एलीमेण्‍ट ।।

By


   पिछले पाठ में हमने एक वेब टेम्‍प्‍लेट का लेआउट बनाना सीखा । अब हम उस वेबटेम्‍प्‍लेट की कोडिंग को आसान करना व DIV एलीमेण्‍ट का सम्‍पूर्ण प्रयोग करना सीखेंगे । DIV एलीमेण्‍ट वेबसाइट के लेआउट का प्राणतत्‍व है अर्थात् यदि आप एक वेबटेम्‍प्‍लेट को कई विभागों में बाँटना चाहते हैं तो DIV एलीमेण्‍ट आपके लिये वरदान है ।

पिछले पाठ में बनाये गये वेबटेम्‍प्‍लेट की कोडिंग निम्‍न थी ।


<!doctype html>
<html>
HEAD SECTION
<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>
</html>

       अब पहले हम इसे छोटा करना सीखेंगे इसके बाद ठीक से इसकी एक-एक टैग व कोडिंग को समझेंगे ।
कोडिंग को संक्षिप्‍त करने के लिये हमें हेड सेक्‍शन का ध्‍यान करना होगा । हमने पिछले पाठों में हेड सेक्‍शन को पढा था । हेड सेक्‍शन के अन्‍तर्गत हम क्‍या क्‍या कर सकते हैं इसे भी जाना था । अब हम हेड सेक्‍शन के अन्‍तर्गत <style></style> टैग का प्रयोग करके इस कोडिंग को छोटा करेंगे ।
यदि आपने हेड सेक्‍शन को ध्‍यान से पढा होगा तो आपको याद होगा कि <style></style> एलीमेण्‍ट का प्रयोग CSS स्‍टाइल कोडिंग को पेज में एक ही स्‍थान पर रखने के लिये किया जाता है । यह एक ही स्‍थान पर स्थित होकर पूरे पेज के स्‍टाइल को प्रबन्धित करता है ।
 
प्रयोग : 

<!doctype html>
<html>
<head>
<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>
<!--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>

    इस कोडिंग का परिणाम भी ठीक वही होगा जो पिछली कोडिंग का था । इस कोडिंग में हमने सारे स्‍टाइल कोडिंग को स्‍टाइल टैग के अन्‍दर इकट्ठा कर दिया जिससे अब पेज कुछ कम जटिल लगने लगा । इस कोडिंग को कापी करके आप अपने नोटपैड पर इनडेक्‍स.एचटीएमएल नाम से सेव करके रन कराएँगे तो परिणाम वही प्राप्‍त होगा जो उपर वाली कोडिंग में प्राप्‍त होता है ।

अब इस कोड को समझते हैं ।

<!doctype html>   - एचटीएमएल 5 परिचय टैग
<html>  - एचटीएमएल टैग शुरू

<head>  - ओपिनिंग हेड टैग की शुरुआत
<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> - बाडी टैग शुरु

<!--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> - एचटीएमएल टैग बन्‍द

इस कोडिंग में इमने कुछ नयी चीजें की हैं जो निम्‍नलिखित हैं ।

  1. कमेण्‍ट
  2. डीआईवी
  3. आईडी
  4. सीएसएस स्‍टाइल
  5. नाव
  6. हाइपरलिंक 
इन उपर्युक्‍त छहों के बारे में अगले लेख में यथावश्‍यक विस्‍तार से जानेंगे ।

Labels:

Comments

Post a Comment

Popular posts from this blog

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

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

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

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