LEARN WEB DESIGNING IN HINDI

पिछली पोस्‍ट में हमने अपने वेबसाइट के टेक्‍स्‍ट को विभिन्‍न स्‍टाइल में करना सीखा । कुछ और स्‍टाइलकोड यहाँ दिये जा रहे हैं जिनकी कभी कभार आवश्‍यकता पड ही जाती है । किन्‍तु जब इनकी आवश्‍यकता पडती है तो फिर इनका महत्‍व समझ में आता है । ये निम्‍नलिखित हैं - अक्षरों के लिखने की दिशा परिवर्तन । अक्षरों के बीच में जगह बढाना या घटाना । पंक्तियों के बीच में जगह बढाना या घटाना । शब्‍दों के बीच में जगह बढाना या घटाना । शब्‍दों को किसी निश्चित सीमा में लपेटना । अक्षरों की छाया बनाना । अक्षरों का दिशा परिवर्तन (टेक्‍स्‍ट डायरेक्‍शन)   p{direction:rtl; unicode-bidi:bidi-override;} परिणाम - अक्षरों के बीच जगह (लेटर स्‍पेसिंग) p{letter-spacing:5px;} p{letter-spacing:-3px;} परिणाम - पंक्तियों की बीच जगह (लाइन स्‍पेसिंग) p{line-height:150%;} p{line-height:50%;} परिणाम - शब्‍दों के बीच जगह (वर्ड स्‍पेसिंग) p{word-spacing:30px;} परिणाम - शब्‍दों को किसी निश्चित सीमा में न लपेटना (वर्ड रैपिंग) p{white-space:nowrap;} परिणाम - अक्षरों की छाया बना

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

आप सभी  को नवसंवत्‍सर 2072, युगाब्‍द 5117 तथा वासन्‍ती नवरात्र प्रारम्‍भ की  हार्दिक शुभकामनाएँ।।  ईश्‍वर आपके लिये इस नव वर्ष को सुखदायक, शान्तिदायक, कल्‍याणप्रद, प्रगतिदायक व आनन्‍ददायक बनाये । ।। नववर्ष मंगलमय हो ।।

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

        सीएसएस सेलेक्‍टर वे डिफाइन्‍ड कोड होते हैं जिनके सहारे हमारी स्‍टाइल हमारे एचटीएमएल पेज पर अप्‍लाई होती है । तात्‍पर्य यह है कि वे प्रीडिफाइन्‍ड या डिफाइन्‍ड एचटीएमएल कोड जिनका प्रयोग करके हमारा सीएसएस कोड हमारे एचटीएमएल पेज को स्‍टाइल करता है उन्‍हे सेलेक्‍टर्स कहते हैं । उदाहरण - h1{color:red;} p{color:green; font-family:Times New Roman; font-size:20px;}         इन दोनों ही कोड्स में h1 और p हमारे कोड के लिये प्रीडिफाइन्‍ड सेलेक्‍टर्स के रूप में काम करते हैं । इन के सामने कर्ली ब्रेकट में लिखे गये सीएसएस कोड इन ब्‍लाक्‍स को स्‍टाइल करता है ।         एचटीएमएल के सभी ब्‍लाककोड, हाइपरलिंक आदि अपने आप में सीएसएस के लिये सेलेक्‍टर का काम करते हैं । आप इन उपर्युक्‍त कोड को इन सभी ब्‍लाक्‍स पर अप्‍लाई कर सकते हैं । उदाहरण - h2{color:red;} h3{color:red;} h4{color:red;} h5{color:red;} h6{color:red;} span{color:red;} a{color:red;} p{color:red;} div{color:red;} table{color:red;}         इनके अतिरिक्‍त हम किसी विशेष ब्‍लाक या हाइपरलिंक की आईडी या क्‍लास बन

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

        सीएसएस क्‍या होता है व इसका प्रयोग क्‍यूँ किया जाता है इस विषय में हमने पर्याप्‍त जान लिया । सीएसएस के प्रयोग का तरीका क्‍या होता है यह भी हमने पीछे समझ लिया किन्‍तु सबसे महत्‍वपूर्ण बात अभी भी समझनी बाकी है । सीएसएस के कोड कैसे लिखे जाते हैं व इन्‍हे एचटीएमएल के साथ कैसे संयुक्‍त किया जाता है । अब हम इसी बात पर चर्चा करेंगे ।  यह एक महत्‍वपूर्ण ही नहीं बल्कि अनिवार्य बिन्‍दु है क्‍यूँकि इसके बिना हम कोडिंग कर ही नहीं सकते हैं ।       सीएसएस का प्रयोग एचटीएमएल में सेलेक्‍टर्स के सहारे किया जाता है । ये सेलेक्‍टर आईडी, क्‍लास या ब्‍लाक कुछ भी हो सकते हैं ।       यदि हमें किसी ब्‍लाक पर सीएसएस का प्रयोग करना है तो सबसे पहले हमें उस ब्‍लाक को सेलेक्‍टर का स्‍वरूप देना होगा । सेलेक्‍टर बनाने के लिये या तो हम उस ब्‍लाक की आईडी निर्धारित करें, या क्‍लास निर्धारित करें अथवा सीधे उस ब्‍लाक के प्रकार को ही सेलेक्‍टर बनाकर प्रयोग कर लें । उदाहरण - p {color:green; font-size:20px;}       यहाँ पर पैराग्राफ को सेलेक्‍टर बनाकर उससे सीएसएस को जोडा गया है । इस कोडिंग

      पीछे हमने देखा कि किस तरह हम अपने सीएसएस स्टाइलशीट को बाहर से अपने एचटीएमएल पेज में लिंक कर सकते हैं । <link rel="stylesheet" href="style.css" />     सीएसएस डाक्‍यूमेण्‍ट को लिंक करने के लिये इस कोड को एचटीएमएल पेज के हेड सेक्‍शन में लिखते हैं । आइये इस कोड को ठीक तरह से समझते हैं । <link - लिंक टैग का प्रारम्‍भ rel= - लिंक का रिलेशन (रिस्‍ता या प्रकार) दर्शाता है । ( ये लिखना महत्‍वपूर्ण है अन्‍यथा कोड काम नहीं करेगा )। "stylesheet" - लिंक का प्रकार स्‍टाइलशीट (ये ब्राउजर को बताता है कि लिंक किया गया पेज एक स्‍टाइलशीट पेज है) href= - सोर्स को डिफाइन करता है । "style.css" - ये आपका वास्‍तविक स्‍टाइलशीट डाक्‍यूमेण्‍ट है जो आपके डेस्‍कटाप या किसी फोल्‍डर में स्‍टाइल.सीएसएस नाम से सुरक्षित किया गया है । /> - लिंक को क्‍लोज करता है । आगे इसके विषय में और भी विस्‍तार से जानेंगे । 2 - सीएसएस का एचटीएमएल हेड सेक्‍शन में प्रयोग -       सीएसएस स्‍टाइलकोडिंग को एचटीएमएल पेज के अन्‍दर हेड सेक्‍श

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

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

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

     एचटीएमएल इनटाइटीज वे प्रतीक चिन्‍ह होते हैं जो एचटीएमएल पेज में विभिन्‍न रूपों में प्रयुक्‍त होते हैं, अनेकों बार प्रयुक्‍त होते हैं । जैसे – (<) लेस दैन ब्रेकट, (>) ग्रेटर दैन ब्रेकट, (&) एण्‍ड चिन्‍ह आदि ।      इनका प्रयोग विभिन्‍न प्रकार से एचटीएमएल या अन्‍य प्रोग्रामिंग भाषाओं में किया जाता है । जब इनका प्रयोग एचटीएमएल कोड के रूप में किया जाता है तो इनका वास्‍तविक स्‍वरूप ही लिखा जाता है किन्‍तु जब इनको एक अक्षर के रूप में लिखा जाता है तो इनका वास्‍तविक स्‍वरूप प्रोग्रामिंग भाषाओं को भ्रमित करने लगता है कि यह ओपिनिंग या क्‍लोजिंग टैग तो नहीं है । उदाहरण -   <html>, <h1>, <p> आदि एचटीएमएल कोड हैं जिनमें एंगल ब्रेकट लगा हुआ है । इसे समझने में ब्राउजर को कोई दिक्‍कत नहीं होती है । किन्‍तु जब हम 11<15, या 15>5 लिखते हैं तो हम बताना चाहते हैं कि 11 पन्‍द्रह से कम है, और 15 अंक 5 से अधिक है । किन्‍तु ब्राउजर इसे भी एचटीएमएल कोड के रूप में लेता है जिससे आपका कोड काम नहीं करता या गलतियाँ प्रकट करता है । ऐसी स्थिति में एचटीएमएल

     अब तक हमने लगभग पूरे एचटीएमएल को समझ लिया है । अब कुछ बारीक बातें । हेड सेक्‍सन के अन्‍तर्गत आने वाले मेटा टैग के द्वारा हम बहुत कुछ कर सकते हैं । इसके अतिरि‍क्‍त भी हेड टैग के अन्‍तर्गत ही हम पेज रिडायरेक्‍ट विकल्‍प भी प्रयोग करते हैं । आइये इन्‍हे समझते हैं - <meta name="" content="" />     एक मेटा टैग का आरम्‍भ कोना ब्रेकट के साथ मेटा लिखकर होता है । इसके तुरंत बाद मात्र एक स्‍पेस छोडकर मेटा का नाम (नेम) लिखा जाता है । इस नेम के अन्‍तर्गत हम मेटा के प्रयोग की पहचान बताते हैं । इसके बाद कान्‍टेन्‍ट लिखा जाता है जिसके द्वारा हम मेटा के कार्य को प्रस्‍तुत करते हैं । उदाहरण - <html> <head> <meta name="author" content="Sir Dr- Vivekanand Pandey" /> </head> <body> <h1>Learn Complete Use of Meta Tag</h1> </body> </html>      इस उदाहरण में हमने इस पेज के लेखक का मेटा सेट किया है । यह पेज को बतायेगा कि उसका लिखने वाला कौन है । इसके लिये हमने मेटा टैग का प्रार

    एचटीएमएल आईफ्रेम एक ऐसा फ्रेम है जिसके अन्‍दर आप किसी भी बाहरी पेज को अपने पेज पर दिखा सकते हैं । अर्थात् यदि आपको किसी बाहरी वेबसाइट को अपने पेज पर दिखाना हो या कि उसका कुछ अंश अपने पेज पर दिखाना हो तो आप आईफ्रेम का प्रयोग कर सकते हैं । इससे आपके पेज पर वह बाहरी पेज एक फ्रेम के अन्‍दर खुलेगा । उदाहरण -       उपयुक्‍त उदाहरण में हम देख सकते हैं कि एक बाहरी पेज एक आईफ्रेम के अन्‍दर खुला हुआ है । इसके लिये हमें अधिक प्रयत्‍न की जरूरत नहीं पडती है । बस एक छोटी सी कोडिंग करनी होती है। इसे ध्‍यान से देखें -   <iframe src="http://www.sjweb.in/"></iframe> अब इसे ठीक से समझते हैं   <iframe - आईफ्रेम ओपिनिंग टैग शुरू । src= ओपिनिंग टैग के अन्‍दर सोर्स टैग "http://www.sjweb.in/"-लिंक जिसे आईफ्रेम के अन्‍दर दिखाना है । > - ओपिनिंग टैग बन्‍द </iframe> - क्‍लोजिंग टैग बन्‍द अब इसमें कुछ और चीजें करके देखते हैं । आईफ्रेम की वाइड्थ और हाइट सेट करना - <iframe src="http://www.sjweb.in/" width="300px" height=

एचटीएमएल में शब्‍दों की सजावट के लिये निम्‍नलिखित विकल्‍प प्रयोग होते हैं । बोल्‍ड टेक्‍स्‍ट - टेक्‍स्‍ट् मोटा करना स्‍ट्रान्‍ग टेक्‍स्‍ट - टेक्‍स्‍ट् मोटा करना इटैलिक टेक्‍स्‍ट - टेक्‍स्‍ट् तिरछा करना इम्‍फैसाइज्‍्ड टेक्‍स्‍ट - टेक्‍स्‍ट् तिरछा करना मार्क्ड टेक्‍स्‍ट - टेक्‍स्‍ट् मार्क करना स्‍माल टेक्‍स्‍ट - टेक्‍स्‍ट् छोटा करना डिलीटेड टेक्‍स्‍ट - टेक्‍स्‍ट् डिलीट दिखाना इनसर्टेड टेक्‍स्‍ट - नया टेक्‍स्‍ट इनसर्टेड दिखाना सबस्क्रिप्‍ट टेक्‍स्‍ट - टेक्‍स्‍ट के नीचे टेक्‍स्‍ट या नम्‍बर दिखाना सुपरस्क्रिप्‍ट टेक्‍स्‍ट - टेक्‍स्‍ट के उपर टेक्‍स्‍ट या नम्‍बर दिखाना अन्‍डरलाइन्‍ड टेक्‍स्‍ट - टेक्‍स्‍ट अन्‍डरलाइन करना   उदाहरण - <p>This is a Normal Text</p> <p>This is a<b> bold </b> text</p> <p>This is a <strong> strong </strong> text</p> <p>This is a Normal Text</p> <p>This is an<i> italic </i> text</p> <p>This is an <em> emphasized

     अबतक हमने प्राय: एचटीएमएल पेज बनाने के लिये सम्‍पूर्ण प्राथमिक ज्ञान प्राप्‍त कर लिया है । किन्‍तु पेज के अन्‍दर कैसे लिखा जाय यह नहीं देखा । अब हम पेज के अन्‍दर अपना लेखन कैसे स्‍थापित करें व शीर्षक कैसे लगायें यह जानेंगे ।      यूँ तो एचटीएमएल पेज में आप कहीं भी कुछ भी स्‍वतन्‍त्र रूप से लिख सकते हैं, इसके लिये आपको किसी विशेष टैग की आवश्‍यकता नहीं पडती है, किन्‍तु लिखने के लिये विशेष रूप से हेडिंग्‍स और पैराग्राफ बनाये गये हैं । आइये इनके विषय में ठीक से जानते हैं । हेडिंग्‍स -       हेडिंग्‍स अर्थात् शीर्षक । शीर्षकों को लिखने के लिये एचटीएमएल में छ: विकल्‍प दिये गये हैं । इन सभी छ: विकल्‍पों को <h> टैग के साथ प्रस्‍तुत किया जाता है । इन्‍हें देखें - <h1>पहला शीर्षक </h1> <h2>दूसरा शीर्षक </h2> <h3>तीसरा शीर्षक </h3> <h4>चौथा शीर्षक </h4> <h5>पाँचवां शीर्षक</h5> <h6>छठां शीर्षक </h6> इनके परिणाम कुछ यूँ दिखाई देते हैं । पहला शीर्षक दूसरा शीर्षक तीसरा शीर्षक