LEARN WEB DESIGNING IN HINDI

Posts

Showing posts from February, 2015

टेबल (TABLE)

टेबल का प्रयोग वेबपेज में विभिन्‍न प्रकार से किया जाता है । टेबल का प्रयोग सारणी बनाने, सूची बनाने या फिर पेज को डिजाइन करने के लिये भी किया जाता है । अर्थात् कुछ मामलों में पेज के लेआउट को बनाने में भी टेबल की मदद ली जा सकती है । टेबल बनाने के लिये सबसे पहले टेबल ओपिनिंग टैग को प्रारम्‍भ करते हैं । फिर इसके अन्‍तर्गत रो, कालम और सेल बनाये जाते हैं । यह बहुत ही आसान सी प्रक्रिया है । माना कि हमें तीन कॉलम और दो रो की एक टेबल बनानी है । इसे इस त‍रह बनायेंगे । - <!Doctype html> <html> <head></head> <body> <table border="1"> ओपिनिंग टैग शुरू <tr> पहली टेबल रो शुरू <td></td> पहली रो का पहला सेल <td></td> दूसरा सेल <td></td> तीसरा सेल </tr> पहली रो बन्‍द <tr> दूसरी टेबल रो शुरू <td></td> दूसरी रो का पहला सेल <td></td> दूसरा सेल <td></td> तीसरा सेल </tr> दूसरी रो बन्‍द </table> टेबल बन्‍द टैग </body> &

हाइपरलिंक (hyperlink) ||

हाइपरलिंक बनाना बहुत ही आसान है । हाइपरलिंक बनाने के लिये <a> टैग का प्रयोग किया जाता है । साथ ही लिंक का सोर्स और खुलने के लिये टारगेट भी जोडा जाता है । <a href=" http://www.sjweb.in/ " target="_blank">SJWEB Services</a> इस हाइपरलिंक को ध्‍यान से देखें । इसमें सबसे पहले <a ओपिनिंग टैग है जिसके अन्‍दर एक href= टैग जो आपके लिंक के सोर्स को परिभाषित करता है । इसके तुरंत बाद डबल इनवर्टेड कामा " के अन्‍दर आपका लिंक कुछ इस तरह है - " http://www.sjweb.in/ " । ध्‍यान रहे आपका लिंक इनवर्टेड कामा के अन्‍दर ही होना चाहिये अन्‍यथा आपका हाइपरलिंक काम नहीं करेगा । इसके बाद एक टारगेट टैग है जो ब्‍लैंक पर सेट है - target="_blank " टारगेट ब्‍लैंक पर सेट होने से आपका लिंक ब्राउजर में अलग पेज पर खुलेगा । अर्थात् आपका पहला पेज खुला ही रहेगा साथ में एक नये टैब में आपकी लिंक खुल जायेगी । इसके बाद <a ओपनिंग टैग को बन्‍द कर दिया है । इसके बाद आपके लिंक अथवा पेज का नाम है - SJWEB Services जो व्‍युवर्स को दिखाई

नाव (NAV)

नाव से तात्‍पर्य नेविगेशन से है । इस विकल्‍प का काम भी काफी हद तक नेविगेट करने का ही है । हम एक पेज से दूसरे पेज पर नेविगेट करने के लिये जिस नेविगेशन मीनू का प्रयोग करते हैं वह इसी एलीमेण्‍ट के द्वारा बनाया जाता है । इसका प्रयोग बहुत ही आसान है । इसे समझने का प्रयत्‍न करते हैं । माना कि हमें एक वेबपेज पर 5 पेज लगाने हैं (home, project, about us, contact us, help) अब इसे लगाने के लिये सबसे पहले हम नाव ओपिनिंग टैग शुरू करते हैं फिर अपने सारे पेज के हाइपरलिंक डालते हैं और फिर नाव टैग बन्‍द कर देते हैं । थोडी सी सीएसएस स्‍टाइलिंग हो जाए बस । आपका नेविगेशन मीनू तैयार । अब इसे करके देखते हैं । <nav> नाव ओपिनिंग टैग शुरू । <a href="home.html">Home</a> होम हाइपलिंक <a href="project.html">Project</a> प्रोजेक्‍ट हाइप‍रलिंक <a href="about.html">About Us</a> अबाउट हाइपरलिंक <a href="contact.html">Contact Us</a> कान्‍टैक्‍ट हाइपरलिंक <a href="help.html">Help<

सीएसएस स्‍टाइल (CSS Style)।।

सीएसएस स्‍टाइलशीट एचटीएमएल पेज को वांछित रूप से डिजाइन करने के लिये बनाई गई है । इसका प्रयोग सरल और आकर्षक है । इसके प्रयोग से आप बडी आसानी से अपने पेज को सुन्‍दर बना पाते हैं । इसका प्रयोग तीन तरह से किया जाता है । 1- बाहर के सीएसएस स्‍टाइल डाक्‍यूमेण्‍ट को लिंक करके । 2- हेड सेक्‍शन के स्‍टाइल टैग के अन्‍दर । 3- सीधे वांछित एलीमेण्‍ट के अन्‍दर । अब इन तीनों का प्रयोग समझेंगे । बाहरी सीएसएस सीट को लिंक करना इसके लिये पहले हम अपने स्‍टाइल कोडिंग को एक अलग सीएसएस डाक्‍यूमेण्‍ट में सेव कर लेते हैं । फिर इसे एचटीएमएल पेज के हेड सेक्‍शन में लिंक कर देते हैं । लिंक करने के लिये लिंक टैग का ही प्रयोग किया जाता है । <!DOCTYPE HTML> <html> <head> <link rel='stylesheet' href=" sjweb.css " /> </head> <body> <div id="content"> This is a div </div> </body> </html> आपका sjweb.css डाक्‍यूमेण्‍ट संक्षेप में कुछ इस तरह हो सकता है । body { background:yellow;

ID & CLASS SELECTOR (आईडी व क्‍लास सेलेक्‍टर) II

आईडी और क्‍लास ये एचटीएमएल में अन्‍य भाषाओं (सीएसएस, जावास्क्रिप्‍ट आदि) के प्रवेश के मार्ग के रूप में प्रयोग किये जाते हैं । आईडी और क्‍लास के आश्रित होकर ही हमारे एचटीएमएल पेज को स्‍टाइल किया जाता है । इसका उदाहरण हम पीछे देख चुके हैं, यहाँ हम इनको भली प्रकार से समझने का प्रयत्‍न करेंगे । <!doctype html> <head> </head> <body> <div id="box" > This is a box. </div> <div id="post" class="box" > This is a box. </div> <p class="box">This is a paragraph </p> </body> </html> उपर्युक्‍त कोडिंग में हमने बॉडी सेक्‍शन में एक डीआईवी बनाया जिसको हमने ''बाक्‍स'' आईडी प्रदान की है । दूसरी डीआईवी जिसे हमने पोस्‍ट आईडी तथा बाक्‍स क्‍लास प्रदान किया है तथा तीसरा पैराग्राफ जिसे हमने क्‍लास बाक्‍स प्रदान किया है । इसके पहले कि इसमें स्‍टाइल प्रयोग किया जाये यह बताना आवश्‍यक होता है कि आईडी को चिन्हित करने के लिये आईडी नाम के आगे हैश

DIV (डीआईवी)

डीआईवी एचटीएमएल का एक महत्‍वपूर्ण एलीमेण्‍ट है । इस एलीमेण्‍ट के द्वारा वेबपेज में डिवीजन (विभाग) बनाये जाते हैं । हालांकि डिवीजन करने का काम टेबल के द्वारा भी किया जा सकता है किन्‍तु टेबल का प्रयोग डिवीजन बनाने के लिये करना बिलकुल ही अनप्रोफेशनल है । डिवीजन बनाने के लिये ही डीआईवी एलीमेण्‍ट की संरचना की गई है । माना कि हमें पेज में (बॉडी टैग के अन्‍तर्गत) हेडर, मीनू, पोस्‍टबाक्‍स, साइडबार, तथा फूटर की संरचना करनी है । अब इसके लिये हमें 6 डीआईवी बनाने पडेंगे । पहली डीआईवी हेडर, दूसरी मीनू, तीसरी डीआईवी दो डीआईवी को अपने अंदर समेटेगी, चौथी डीआईवी पोस्‍ट, पांचवी साइडबार तथा छठीं डीआईवी फूटर का काम करेगी । इस निम्‍न चित्र द्वारा समझा जा सकता है । इन छहों डीआईवी को स्‍टाइल करने मात्र से ही हमारा पेज सामान्‍य अवस्‍था में आ जाता है, माने कि हमारा वेब टेम्‍प्‍लेट तैयार हो जाता है हमें बस उसपर कान्‍टेन्‍ट (चित्र, फ्लैश, हेडिंग, पोस्‍ट, लिंक आदि) लगाना शेष रहता है । अब इस चित्र के लिये की जाने वाली कोडिंग पर ध्‍यान देंगे । प्रयोग : <!-- बॉडी ट

कमेण्‍ट ।।

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

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

पिछले पाठ में हमने एक वेब टेम्‍प्‍लेट का लेआउट बनाना सीखा । अब हम उस वेबटेम्‍प्‍लेट की कोडिंग को आसान करना व DIV एलीमेण्‍ट का सम्‍पूर्ण प्रयोग करना सीखेंगे । DIV एलीमेण्‍ट वेबसाइट के लेआउट का प्राणतत्‍व है अर्थात् यदि आप एक वेबटेम्‍प्‍लेट को कई विभागों में बाँटना चाहते हैं तो DIV एलीमेण्‍ट आपके लिये वरदान है । पिछले पाठ में बनाये गये वेबटेम्‍प्‍लेट की कोडिंग निम्‍न थी । <!doctype html> <html> HEAD SECTION <head> <title>My First Web Page </title> </head> BODY SECTION <body style="background:yellow;">  <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>  <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; backgrou

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

पिछली लेख में हमने जाना कि एक वेबपेज में क्‍या-क्‍या होना चाहिये । इस लेख में हम उन सभी विभागों को बनाना सीखेंगे । एचटीएमएल वेबपेज को दो तरीके से बनाया जा सकता है । पहला तरीका है टेबल का प्रयोग करके तथा दूसरा तरीका DIV एलीमेण्‍ट का प्रयोग करके । टेबल द्वारा वेबपेज बनाना तो आसान है किन्‍तु इसको बाद में एडिट करना टेढी खीर है । इसीलिये दूसरा तरीका अर्थात् DIV द्वारा वेबपेज बनाना ज्‍यादा सही है । सही मायने में वेबपेज DIV द्वारा ही बनाया जाना चाहिये । प्रोफेशनल डेवलपर कभी भी टेबल द्वारा वेबपेज डिजाइन नहीं करते हैं । केवल आवश्‍यक स्‍थानों पर ही टेबल का प्रयोग करते हैं । यहॉं हम एक साधारण सा पेज DIV एलीमेण्‍ट की सहायता से बनायेंगे । इस पेज की कोडिंग को आप कापी करके अपने नोटपैड पर पेस्‍ट करके index.html नाम से सेव करके अपने वेबपेज पर रन करा सकते हैं । आपको वेबपेज का प्रारूप दिख जायेगा । कोड निम्‍नवत है - <!doctype html> HEAD SECTION <head> <title>My First Web Page </title> </head> BODY SECTION <body style="backg

एचटीएमएल बॉडी सेक्‍सन ।।

एचटीएमएल शरीर विभाग या बॉडी सेक्‍सन वह विभाग है जो वेबपेज के रूप में दिखता है । हम वेबपेज पर जो कुछ भी देखते हैं वह सबकुछ एचटीएमएल का बॉडी सेक्‍शन ही होता है । अत: अब हम इस सेक्‍शन पर एक सामान्‍य निगाह डालेंगे । एचटीएमएल का बॉडी सेक्‍शन - यह सेक्‍शन सबसे महत्‍वपूर्ण सेक्‍शन होता है । इसके अन्‍तर्गत पूरा वेबपेज ही आ जाता है । इस तरह से कहा जा सकता है कि वास्‍तव में वेबपूज तो एचटीएमएल का बॉडी सेक्‍शन ही है । इस सेक्‍शन की बनावट पर निगाह डालने से पहले अपने मस्तिष्‍क में एक वेबसाइट का चित्रण करें और सोंचें कि एक सामान्‍य वेबसाइट में क्‍या क्‍या चीजें हो सकती हैं । हेडर (जिसपर नाम इत्‍यादि लिखा जाता है) । मीनू (जिसपर अलग अलग पेज पर जाने के लिये टैब होते हैं ) कान्‍टेन्‍ट सेक्‍सन (जिसपर आपके पेज के सारे कान्‍टेन्‍ट रहते हैं ।) आवश्‍यकता लगे तो कान्‍टेन्‍ट के बगल एक अन्‍य सेक्‍शन भी (साइडबार) दिया जा सकता है । फुटर (जिसपर कि आपके आल राइट रिजर्वड या कि पेज का सूचनासंक्षेप दिया जाता है) इसके अलावा भी बहुत सारी अन्‍य चीजें भी हो सकती हैं किन्‍तु सामान्‍य तौर पर ए

ए‍चटीएमएल हेड सेक्‍सन (मेटा, लिंक, स्क्रिप्‍ट, स्‍टाइल, बेस, टाइटिल) परिचय ।

अबतक हमने एचटीएमएल का उपयोग, उसकी सामान्‍य संरचना तथा हेड टैग के अन्‍तर्गत कौन सी चीजों को रखा जाता है के बारे में पढा । पिछले लेख में हमने हेड सेक्‍सन के अन्‍तर्गत रखी जाने वाली 6 चीजों के बारे में जाना । अब हम इन छहों एलीमेन्‍ट्स के बारे में विस्‍तार से जानेंगे । <meta name="description" content="Free html tutorial in hindi" > मेटा टैग हेड सेक्‍सन का एक महत्‍वपूर्ण भाग है जो पेज का विभिन्‍न दृष्टिकोण से परिचय प्रदान करता है । इसके अन्‍तर्गत निम्‍न कार्य व व्‍यवहार किये जाते हैं - keywords - यह मेटासेट गूगल जैसे सर्च इंजन्स के सर्च करने के लिये आपके वेबसाइट के कान्‍टेन्‍ट (विषय) को डिफाइन करता है । जैसे यदि आपकी वेबसाइट एचटीएमएल सिखाने के लिये है तो आपका मेटा टैग डिस्क्रिप्‍शन होगा कीवर्ड तथा कान्‍टेन्‍ट होगा एचटीएमएल इन हिन्‍दी । description - डिस्क्रिप्‍शन मेटासेट आपके पृष्‍ठ का पूरा परिचय है जो सर्चइन्‍जन्‍स पर दिखता है । याद रहे कीवर्ड मेटाडेटा को पढकर सर्चइन्‍जन आपके पेज को दिखाता है किन्‍तु पेज दिखाते समय जो डिस

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

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

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

पिछले पाठ में हमने एचटीएमएल का एक प्रारूप देखा । यहाँ पर उस प्रारूप की व्‍याख्‍या की जायेगी । इस अध्‍याय को लिखते समय हम यह मानकर चल रहे हैं कि वेबडिजाइनिंग सीखने की इच्‍छा रखने वाले को सामान्‍य कम्‍प्‍यूटर ज्ञान जैसे कि कम्‍प्‍यूटर की कोई फाइल या फोल्‍डर खोलना, बन्‍द करना, किसी प्रोग्राम को खोलना, नया फोल्‍डर बनाना, किसी फाइल को खोलना, उसपर काम करना, उसे सेव करना तथा डिलीट करना आदि । इसलिये हम इन सभी बातों को बताने की अपेक्षा सीधे एचटीएमएल की तरफ चलते हैं । एचटीएमएल का फुलफार्म - HTML = Hyper Text Markup Language एचटीएमएल संरचना - पिछले पाठ में हमने निम्‍न कोडिंग का प्रयोग किया था । <!DOCTYPE HTML> <html> <head> <title>My First Html Page</title> </head> <body> Hello World </body> </html> अब इस कोडिंग की पूरी व्‍याख्‍या यहाँ प्रस्‍तुत की जा रही है ताकि आप एचटीएमएल को पूरी तरह समझ सकें । यह ध्‍यान रखें कि एचटीएमएल वेबपेज बनाने का सर्वप्रथम सोपान है, बिना इसके सीखे आप वेबपेज नही बना सकते हैं । <!DOCTYPE

एचटीएमएल सीखें - हिन्‍दी में ।।

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