Skip to main content

DIV एलीमेण्‍ट का प्रयोग करके वेब टेम्‍प्‍लेट बनाना ।

By


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

कोड निम्‍नवत है -

<!doctype 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>
 इस कोडिंग का रिजल्‍ट इस तरह होगा ।



यह कोडिंग दिखने में काफी लम्‍बी इसलिये है क्‍यूँकि इसमें स्‍टाइल्स का प्रयोग सीधे एलीमेण्‍ट्स में किया गया है । यह जितना कठिन लग रहा है वास्‍तव में उसका एक प्रतिशत भी कठिन नहीं है । अगले अध्‍याय में हम इसे आसान करके बनाना सीखेंगे । और आप देखेंगे कि कैसे इस पेज पर दिखने वाली कोडिंग को संक्षिप्‍त करके मात्र कुछ पंक्तियों तक सीमित कर दिया जाता है ।
Labels:

Comments

Post a Comment

Popular posts from this blog

एजाक्‍स तकनीकि - एजाक्‍स सीखें हिन्‍दी में ।

By
एजाक्‍स कोई स्‍वतन्‍त्र तकनीकि नहीं अपितु अन्‍तर्सम्‍बन्धित तकनीकों का वर्ग है । एजाक्‍स के अन्‍तर्गत मुख्‍य रूप से निम्‍न तकनीकि (भाषाएं) रखी जा सकती हैं । एचटीएमएल सीएसएस एक्‍सएमएल जेएसऑन जावास्क्रिप्‍ट XMLHttpRequest आब्‍जेक्‍ट की प्रापर्टीज  - onReadyStateChange - जब भी रेडीस्‍टेट बदलता है तो इसे कॉल किया जाता है । इसे synchronous requests के साथ प्रयोग नहीं करना चाहिए । readyState - यह विभिन्‍न कार्यों को सम्‍पादित करने के लिये प्रयुक्‍त होता है । इसे सोपान क्रम में UNOPENED, OPENED, HEADERS_RECEIVED, LOADING, DONE तरह रखा जा सकता है । reponseText - रिस्‍पान्‍स को टेक्‍स्‍ट के रूप में प्रकट करता है । responseXML - रिस्‍पान्‍स को एक्‍सएमएल के रूप में प्रकट करता है । XMLHttpRequest आब्‍जेक्‍ट के महत्‍वपूर्ण मेथड - void open(method, URL) - अनुरोध को गेट अथवा पोस्‍ट मेथड के आधार पर दिये हुए यूआरएल को भेजता है । void open(method, URL, async) - उपयुक्‍त की ही भॉंति इसका भी कार्य है केवल asynchronous है या नहीं इसका विवरण भी देता है । void open(method, ...
27 comments
Read more

एचटीएमएल सीखें हिन्‍दी में (Learn Html in Hindi)

By
मित्रों     अबतक हमने एचटीएमएल के विभिन्‍न विभागों को सीखा । लगभग सम्‍पूर्ण एचटीएमएल ट्यूटोरियल जो कि एक शुरुआती छात्र के लिये आवश्‍यक है यहाँ पर प्रस्‍तुत किया गया है । इससे अधिक व नवीनतम अपडेट्स के विषय में जानने के लिये एचटीएमएल की मूल वेबसाइट पर जा सकते हैं । जहाँ आप सम्‍पूर्ण एचटीएमएल इसकी समस्‍त बारीकियों सहित जान पायेंगे । किन्‍तु यहाँ जितना प्रस्‍तुत किया गया है वह एक अच्‍छे वेब डेवलपर के लिये पर्याप्‍त है ।  यहाँं अबतक प्रस्‍तुत सम्‍पूर्ण एचटीएमएल ट्यूटोरियल को एकसाथ प्रस्‍तुत कर रहे हैं । जिसके लिये आपको बार-खोजना न पडे । एचटीएमएल सीखें - हिन्‍दी में ।।   एचटीएमएल संरचना । एचटीएमएल हेड सेक्‍सन (शीर्ष विभाग) ।।   ए‍चटीएमएल हेड सेक्‍सन (मेटा, लिंक, स्क्रिप्‍ट, स्‍टाइल, बेस, टाइटिल) परिचय ।   एचटीएमएल बॉडी सेक्‍सन ।। DIV एलीमेण्‍ट का प्रयोग करके वेब टेम्‍प्‍लेट बनाना DIV एलीमेण्‍ट ।।   कमेण्‍ट ।।   DIV (डीआईवी)   ID & CLASS SELECTOR (आईडी व क्‍लास सेलेक्‍टर) II   सीएसएस स्‍टाइल (CSS Style)।। ...
14 comments
Read more

सीएसएस का प्रयोग (How to Use CSS)

By
     सीएसएस का प्रयोग अत्‍यन्‍त सरल है । सीएसएस का प्रयोग आपका बहुत सारा समय व आपकी बहुत सारी मेहनत बचाने के साथ ही साथ आपके पेज को बेहतरीन सुन्‍दरता प्रदान करता है । इसके प्रयोग की तीन विधियाँ हैं । ये तीनों ही विधियाँ प्रयोज्य हैं अर्थात् इनमें से किसी भी विधि का प्रयोग आपको वांछित परिणाम प्रदान कर सकता है । सीएसएस प्रयोग विधि सीएसएस का प्रयोग निम्‍नलिखित तीन विधियों से किया जा सकता है । सीएसएस को एक अलग सीएसएस फाइल में लिखकर उसे एचटीएमएल पेज से लिंक करना । सीएसएस को एचटीएमएल पेज के हेड सेक्‍सन के अन्‍तर्गत स्‍टाइल टैग के अन्‍दर लिखना । सीएसएस को किसी भी टैग या एलीमेण्‍ट के अन्‍दर सीधे लिखना । सीएसएस का बाह्य प्रयोग -       सीएसएस को बाहर से लिंक करना सबसे बेहतरीन तरीका है । इस तरीके से आपकी कोडिंग फाइल बहुत बोझिल और बडी होने से बच जाती है । यदि हमें एक बहुत सारे ब्‍लाक्‍स का पेज बनाना है और हम हर ब्‍लाक को अलग अलग रंगों व तरीकों से सजाते हैं तो निश्चित ही हमारे पेज की कोडिंग फाइल बहुत बडी हो जायेगी जिसे सुधार कर...
3 comments
Read more