Friday, 21 February 2020

DMCA क्या है? ब्लॉग के content को चोरी होने से कैसे बचाएं?

dmca-kya-hai-hindi

दोस्तों जिस प्रकार ऑफलाइन दुनिया में किसी Brand या किसी की Creativity को चुराना गलत है, ठीक उसी तरह इस ऑनलाइन World में किसी के कंटेंट को चुराना गलत है! और यदि आप ऐसा करते हैं तो आप पर उचित कार्रवाई की जा सकती है।

जी हां आज हम बात करेंगे DMCA के बारे में, क्योंकि अधिकतर Bloggers या ऑनलाइन बिज़नेस Owners को DMCA Act के विषय पर कोई जानकारी नहीं होती।

यदि आपने कभी गौर किया हो तो कई वेबसाइट्स के web page में सबसे नीचे अर्थात Footer में DMCA प्रोटेक्टेड का Mark होता है! अब ऐसा केवल किसी-किसी वेबसाइट में क्यों होता है? और आप भी इसका कैसे इस्तेमाल कर सकते हैं! आज हम इसी विषय पर जानेंगे।

दोस्तो इस लेख में हम विस्तारपूर्वक जानेंगे कि यह DMCA क्या होता है? यह blog या वेबसाइट के लिए क्यों जरूरी है, इसका इस्तेमाल कैसे करे? और इसके उपयोग करने के क्या-क्या फायदे हैं!

ब्लॉग क्या है? इसके बारे में मैंने हमने पहले से ही डिटेल से बताया हुआ है लेकिन आज इस पोस्ट में हम जानेंगे की DMCA Kya hai? और ब्लॉग के content को चोरी होने से कैसे बचाएं?

तो DMCA के विषय पर बेहद सरल एवं सहज भाषा में पूरी जानकारी पाने के लिए इस लेख को अंत तक जरूर पढ़ें आइए बिना देरी किये हम जान लेते हैं यह


DMCA क्या है? What is DMCA in Hindi

DMCA अर्थात Digital Millennium Copyright Act यह एक कानून है! जिसे वर्ष 1998 में पूर्व अमेरिकी राष्ट्रपति बिल क्लिंटन द्वारा लागू किया गया था।

दोस्तों इस कानून को पारित करने का पीछे उनका उद्देश्य डिजिटल Products जैसे Video, Audio, Images तथा Text Content को चोरी होने से बचाना है।

दोस्तों इसका महत्व आपके ब्लॉग या वेबसाइट के लिए इसलिए बढ़ जाता है, क्योंकि आप नहीं चाहेंगे कि आपके द्वारा मेहनत से Create किया गया Content किसी अन्य ब्लॉगर या किसी व्यक्ति द्वारा उसका इस्तेमाल अपने निजी उद्देश्य के लिए किया जाए।

दोस्तों यदि कोई ऐसा करता है तो DMCA Act आपकी वेबसाइट के कंटेंट चोरी होने की स्थिति में उसकी रिपोर्ट करने में मदद करता है।

अतः DMCA वेबसाइट के कंटेंट को सुरक्षित रखता है, दोस्तों मान लिया जाए "आपने किसी विषय पर आर्टिकल लिखा और उस आर्टिकल को किसी दूसरे ब्लॉगर द्वारा कॉपी कर अपनी साइट पर Paste कर दिया जाता है"

तो इस स्थिति में आप DMCA कानून का उपयोग कर उस वेबसाइट के खिलाफ रिपोर्ट कर सकते हैं। तथा उस कंटेंट को दूसरी साइट से Remove करवा सकते हैं!

तो दोस्तों अब तक आप यह समझ चुके होंगे कि आखिर यह DMCA क्या होता है? आइये अब हम जानते हैं इसका अपनी साइट पर इस्तेमाल करने के क्या-क्या फायदे हैं।



DMCA के क्या फायदे हैं?

एक वेबसाइट Owner होने के नाते यह आपकी वेबसाइट के कंटेंट को कॉपी होने से बचाता है! तथा यदि कोई आपके कंटेंट का बिना आपकी अनुमति के दूसरी वेबसाइट पर उपयोग करता है, तो आप उसकी रिपोर्ट कर सकते हैं।

DMCA आपको उस वेबसाइट की अर्थात जिसने आपका कंटेंट चोरी किया है, उस वेबसाइट का title, Url इत्यादि अनेक जानकारी देने में मदद करता है।

DMCA Regularly आपकी साइट को मॉनिटर कर सकता हैं, तथा पता कर सकते हैं कि की आपकी साइट का कोई आर्टिकल कॉपी तो नहीं किया जा रहा है।

DMCA के जरिए जिस व्यक्ति द्वारा कंटेंट को चुराया गया है, उसे आप डायरेक्टली मैसेज कर इस बात की सूचना दे सकते हैं! कि आपने हमारा कंटेंट चोरी किया है तथा आप इसे immediately (जल्द) रिमूव करें।

कॉपी कंटेंट की पहचान करने की वजह से DMCA आपको Original कंटेंट की पहचान कराने में मदद करता है।

इसके अलावा यदि आपकी साइट पर DMCA एक्टिवेट है तो आपको इसका एक Badge मिलता है, जिसे आप अपनी वेबसाइट के प्रत्येक web page पर इस सर्टिफिकेट को देख सकते हैं।

तो दोस्तों उपरोक्त फायदों को जानने के बाद आप भली-भांति अंदाजा लगा सकते हैं! कि आपकी वेबसाइट के लिए DMCA प्रोटेक्शन कितना आवश्यक है!

और यह आपके Blog के लिए क्या-क्या कर सकता है! तो आइये आगे बढ़ते हैं तथा जानते है कि आप कैसे अपनी साइट में DMCA Badge लगा सकते हैं।

दोस्तों अब यहां आपके मन में सवाल आ सकता है कि यह DMCA badge आपकी साइट के लिए क्यों जरूरी है? 

DMCA badge आपकी साइट के कंटेंट की सिक्योरिटी के बारे में बताता है! DMCA बैज अन्य वेबसाइट ऑनर्स या किसी ऑनलाइन यूजर को warning (चेतावनी) देता है कि आपकी वेबसाइट का कंटेंट चोरी होने पर DMCA द्वारा रिपोर्ट की जा सकती है।

यदि आप अपनी वेबसाइट में DMCA Badge एक्टिवेट करते हैं, तो यह आपकी site में एक Icon के रूप में दिखाई देता है।

तो दोस्तों आइये जानते हैं कि आप अपनी site में DMCA Badge कैसे लगा सकते हैं।

अपनी वेबसाइट या ब्लॉग पर DMCA badge कैसे लगायें? 


DMCA Badge add करने के लिए सबसे पहले DMCA.com वेबसाइट पर जाएं।


dmca-home-page


उसके बाद यहां पर आपको Badges का एक ऑप्शन दिखाई देगा उस पर क्लिक कीजिए।

अगले Step में यदि आपने Signup नहीं किया है, तो अपना First name, Last Name ओर Email enter कर साइनअप कर दीजिए।

dmca-badges

दोस्तों सफलतापूर्वक साइन अप कर लेने के बाद अब यहां पर आपके सामने कई DMCA badge दिखाई दे रहे हैं, आप इनमें से किसी भी badge को Select कर सकते हैं।

अब आप देखेंगे कि साइट पर एक Code दिखाई देगा! उसको आपको अपनी वेबसाइट में Paste करना है।

dmca-badge-code

दोस्तों ध्यान रहे यह Badge आपको footer में दिखाई देता है तो आपको भी इसे अपनी वेबसाइट के footer में Add करना होगा।

यदि आपका blog ब्लॉगर पर है, तो आपको इस Code को Blogger के Html widget में ऐड करना होगा।

और यदि आपकी साइट WordPress प्लेटफार्म पर है, तो आप इसके लिए एक plugin इंस्टॉल कर सकते हैं,जिसका नाम DMCA plugin है।

इसके अलावा आपकी WordPress साइट की Themes में Header and footer Script का एक ऑप्शन होता है, तो आप उसके footer में इस Code को Paste कर badge Add कर सकते हैं।

तो जैसे ही आप अपने ब्लॉग में Add कर लें! उसके बाद आप DMCA badge पर क्लिक करके यह पता कर सकते हैं कि आपकी वेबसाइट को DMCA द्वारा protect किया गया है नहीं!

और यदि आपने फ्री DMCA protection लिया है तो आपको 30 दिन तक भी Protection Pending का इंतजार करना पड़ सकता है।

तब तक आप निश्चिंत रहें आपके ब्लॉग में DMCA सर्टिफिकेट Activate हो जाएगा।

और इसके अलावा DMCA सर्टिफिकेट को एक्टिवेट करने के दौरान कोई भी समस्या आती है तो आप हमेशा की तरह कमेंट में बता सकते हैं।



दोस्तों इस प्रकार आपने आज के इस लेख में जाना कि यह DMCA क्या होता है? यह आपकी वेबसाइट के लिए क्यों जरूरी है? और आप भी DMCA Badge को अपनी website में  कैसे Add कर सकते हैं! मुझे उम्मीद है यह जानकारी आपके लिए फायदेमंद साबित होगी।

यदि आपका DMCA Badge से संबंधित कोई सवाल है तो कमेंट बॉक्स में जरूर बताएं। साथ ही यदि आपको जानकारी अच्छी लगी है तो सभी Bloggers के साथ यह लेख सोशल मीडिया पर शेयर जरूर करें।

Guest Author Bio:

FutureTricks - A Hindi Tech Blog! here you can learn about Ethical Hacking, Social Media Tricks, Tech Hacks, Blogging, Make Money & More…

Author's Website: futuretricks.org


अगर आप भी WebinHindi पर guest post publish करना चाहते हैं तो हमसे संपर्क करें

Monday, 17 February 2020

Dark Web क्या है? इंटरनेट की अंधेरी दुनिया का रहस्य

Dark web in Hindi

इंटरनेट की एक अँधेरी दुनिया जिसके बारे में आम इंसानों को कुछ भी जानकारी नही होती, आज हम उसी के बारे में आपको बताने वाले हैं। हम बात कर रहे हैं डार्क वेब की जो की इन्टरनेट का एक ऐसा हिस्सा है जहाँ हम कभी जाते नही है। आज जानेंगे की आखिर डार्क वेब क्या है (What is dark web in Hindi) और यह कैसे काम करती है और यहाँ क्या-क्या होता है।



डार्क वेब क्या है? (What is dark web in Hindi?)

इसे Dark net भी कहते हैं, यह इन्टरनेट के वर्ल्ड वाइड वेब का ही एक हिस्सा है लेकिन  यह कोई छोटा सा हिस्सा नही है, इन्टरनेट का 96% हिस्सा डार्क वेब है लेकिन फिर भी सबको इस बारे में नही पता और इसके पीछे एक वजह यह भी है की हम वहां सीधे ब्राउज़र के जरिये नही पहुँच सकते।

डार्क वेब के सारे websites और contents encrypted यानि hidden होते हैं और ये गूगल जैसे सर्च इंजन से एक्सेस नही किये जा सकते।

दरअसल world wide web को हम तीन हिस्सों में बाँट सकते हैं:
  1. सरफेस वेब (Surface web)
  2. डीप वेब (Deep web)
  3. डार्क वेब (Dark web)
अब चलिए इन तीनो को थोडा विस्तार से समझते हैं।

Surface web क्या है?
  • आम तौर पर हम और आप रोजमर्रा की जिंदगी में इंटरनेट के जिस भाग का उपयोग करते हैं वह सरफेस वेब कहलाता है। 
  • हम जितने भी वेबसाइट गूगल, बिंग, याहू जैसे सर्च इंजन के द्वारा एक्सेस करते हैं वे सभी इसी हिस्से में आते हैं। 
  • आपको जानकर हैरानी होगी की पूरे इन्टरनेट का केवल 4% हिस्सा सरफेस वेब है। यानि इंटरनेट के मात्र 4% हिस्से का हम उपयोग करते हैं
  • ऐसे web pages जिन्हें कोई भी publicly access कर सकता है वेब इसी इन्टरनेट के इसी region में होते हैं।
  • इन site को open करने के लिए किसी विशेष software या configuration की जरुरत नही पड़ती और न ही किसी permission की आवश्यकता होती है। 
  • इसे हम Google chrome, Firefox, Opera जैसे ब्राउज़र से आसानी से access कर पाते हैं।
Deep web क्या है?
  • इन्टरनेट पर मौजूद ऐसे वेब पेज जिन्हें सर्च इंजन index नही करता यानि search engine की पहुँच से ये बाहर होते हैं और उसे एक्सेस करने के लिए हमें लॉग इन करना पड़ता है।
  • इन pages को बिना अनुमति के नही देखा जा सकता।
  • जैसे आप अपने जीमेल अकाउंट में बिना लॉग इन किये ईमेल नही पढ़ सकते, बिना अकाउंट बनाये आप फेसबुक पर अपने फ्रेंड की profile page को नही देख सकते। दरअसल ये सारे web page डीप वेब के अंदर ही आते हैं। 
  • इनके content को आप देख सकते हैं लेकिन उसके लिए आपके पास ID और password होने जरुरी हैं।
Dark web क्या है?
  • इसे हम साधारण ब्राउज़र से एक्सेस नही कर सकते।
  • और न ही हम गूगल के जरिये वहां तक पहुँच सकते हैं, हम किसी भी आम सर्च इंजन से इस एरिया में नही पहुँच सकते।
  • डार्क वेब में मौजूद websites के IP को tor encryption tool के जरिये एन्क्रिप्ट कर दिया जाता है यही वजह है की ये सर्च इंजन की नजर में नही आते।
  • इन छुपे हुए साइट्स तक पहुँचने के लिए एक विशेष प्रकार के ब्राउज़र जिसे Tor browser कहा जाता है का उपयोग किया जाता है।
  • इन sites तक वही लोग पहुँच सकते हैं जिनको इसके बारे में पता होता है।
  • ये अपराधियों और hackers का पसंदीदा जगह है जहाँ पर हर तरह के गैर कानूनी लेन-देन, ड्रग्स स्मगलिंग, पोर्नोग्राफी, हथियारों की खरीदी-बिक्री, मानव तस्करी, चोरी किये गये credit card details को बेचना जैसे अपराध होते हैं।




डार्क वेब की शुरुआत कैसे हुई -  History of Dark web in Hindi

डार्क वेब का इतिहास क्या है? अगर हम इस बारे में बात करें तो आप यह जानकर हैरान हो सकते हैं की दरअसल इस hidden web की शुरुआत लगभग इन्टरनेट के जन्म के समय से ही हो गयी थी। और तभी से इस ख़ुफ़िया नेटवर्क का उपयोग गैरकानूनी कामों के लिए किया जाता रहा है।

1970 के दशक में:
आपको ARPANET के बारे में जरुर पता होगा जो की internet से पहले बना था, दरअसल सन 1970 की दशक के शुरुआत में ही इस ARPANET नेटवर्क का उपयोग कर MIT के students को ड्रग्स बेचा गया था।

गौर करने वाली बात यह है की उस ज़माने में लोगों को इन्टरनेट के बारे में पता भी नही था और न ही ये publicly उपयोग के लिए उपलब्ध थे।

सन 2000 में:
डार्क वेब की असली शुरुआत सन 2000 में हुई जब Freenet launch हुआ जो की अभी भी अपनी service provide कर रहा है जिसके जरिये लोग अपनी पहचान छुपाकर एक-दुसरे से files share कर सकते हैं, फोरम पर chat कर सकते हैं और इसके अंदर वेबसाइट भी बना सकते हैं। इस नेटवर्क के अंदर लोगों को detect करना आसान नही होता।

2002 में:
डार्क वेब की दुनिया में एक बहुत बड़ी क्रन्ति तब आई जब 2002 में TOR यानि The Onion Router को रिलीज़ किया गया। यह एक प्रकार का browser है जिसके जरिये आप डार्क नेट के अंदर घुस सकते हैं।

आप इसे डार्क वेब का entry point समझ सकते हैं। dark net के websites को आप इसी TOR के जरिये access कर पाते हैं। यहाँ पर परत दर परत encryption होता है इसलिए यहाँ भी किसी की असली identity का पता लगाना मुश्किल होता है।

2009 में:
इससे पहले गैर कानूनी काम तो होते ही थे लेकिन पैसों का लेन-देन ख़ुफ़िया तरीके से करना आसान नही था क्योकि तब real cash का उपयोग होता था। लेकिन यह समस्या भी दूर हो गयी जब 2009 में Bitcoin नाम की cryptocurrency शुरू हो गयी। और आज डार्क नेट के black market में सारे काले कारनामे इसी bitcoin से खुले आम हो रहे हैं।

इस Dark net पर Online black market को रफ्तार देने का काम किया Silk road ने, जो की एक ऐसा platform बना जहाँ पर illegal तरीके से हर प्रकार के drugs बेचे जाते थे। लेकिन अब इसे बंद कर दिया गया है।

Dark web को कैसे access करें?

डार्क वेब को access करना उतना मुश्किल नही है जितना आप सोच रहे हैं। दरअसल यह बहुत ही आसान है लेकिन यहाँ अपने computer और data की सुरक्षा को लेकर थोड़ी परेशानी हो सकती है सुरक्षित तरीके से dark net को access करना थोडा मुश्किल है क्योंकि यहाँ कई सारी सावधानियां रखनी पड़तीं हैं।

चलिए जानते हैं आसान steps में की आखिर आप इसे कैसे access कर सकते हैं:

Step 1: VPN Software Install करें:
सबसे पहले आपको VPN install करना होगा यह बहुत ही जरुरी है। यह आपकी IP को छुपाने का काम करता है और encryption के जरिये आपको इन्टरनेट पर anonymous browsing करने की सुविधा देता है। 

लेकिन इस बात का ध्यान रखें की VPN के लिए किसी अच्छे software का चुनाव करें ताकि वह अच्छी तरह से काम कर सके।

Step 2: TOR browser Install करें:
Dark net को हम chrome जैसी साधारण web browser से open नही कर सकते इसके लिए। यहाँ पर websites .com .net जैसे extension में नही होते ये .onion extension में होते हैं जिसे आप TOR browser से ओपन कर सकते हैं।

यहाँ ध्यान रखें की इसे हमेशा TOR project की official website से ही download करें और इसे हमेशा update करके रखें।

Step 3: Virtual machine software का उपयोग करें:
वैसे तो आप इसके बिना भी डार्कनेट पर जा सकते हैं लेकिन अपनी सुरक्षा बढाने के लिए आप virtual operating system यानी disposable OS create कर लें और उसी में ये सारे काम करें। इस काम के लिए आप Virtual box, VMware, Hyper-V जैसे tools का उपयोग कर सकते हैं। 

ये सब configuration करने के बाद आप टोर ब्राउज़र में जाएँ और डार्क नेट पर प्रवेश करें। लेकिन यहाँ आपको साइट्स खोजने पड़ेंगे। वैसे तो यहाँ पर भी Google जैसे search engines होते हैं लेकिन डार्कवेब के ज्यादातर साइट्स indexed नही होते हैं इस लिए कई sites को आप इनकी मदद से नही ढूंढ सकते। फिर भी आप Hidden Wiki, Grams जैसे search engines का use कर सकते हैं। 

क्यों खतरनाक है डार्क वेब - इससे क्या नुकसान हो सकता है?

वैसे तो ज्यादातर technologies इंसान अपने फायदे के लिए बनाता है लेकिन उसका गलत तरीके से उपयोग करने वाले भी बहुत लोग होते हैं, जो उस टेक्नोलॉजी की खूबियों को ही उसकी कमजोरी बना देते हैं और फिर उससे नुकसान होने लगता है। डार्क वेब के साथ भी ऐसा ही है, इसके उपयोग से कई सारे खतरे हैं, आइये जानते हैं उनके बारे में:
  • Virus और Malware का खतरा: आपको यहाँ suspicious links मिल सकते हैं जिसपर click करते ही वायरस या मैलवेयर जैसी चीजें आपके system पर install हो सकती हैं।
  • फिशिंग और स्कैम का खतरा: आपको यहाँ ऐसे कई सारे वेबसाइट मिल जायेंगे जो दिखने में तो असली की तरह लगते हैं लेकिन वे clone sites हो सकते हैं जिससे आपको धोखा भी हो सकता है।
  • आपका डाटा चोरी हो सकता है:  अगर आप थोड़ी भी लापरवाही बरतते हैं तो आपके computer से डाटा access कर चुराया जा सकता है और इससे आपको भरी नुकसान हो सकता है। 
  • आपका वेबकैम हाईजैक हो सकता है: यानि hackers आपके डिवाइस के कैमरे को कुछ संदिग्ध programs install कर एक्सेस कर सकते हैं जिससे आपकी प्राइवेसी को खतरा हो सकता है।
  • कंटेंट जो आपको विचलित कर सकते हैं: यहाँ ऐसे साइट्स भी हैं जहाँ कुछ कंटेंट देखने में बहुत खरतनाक हो सकते हैं, चाइल्ड पोर्नोग्राफी, जानवरों की हत्या, क्रूरता पूर्वक घटनाओं के दृश्य आपको प्रभावित कर सकते हैं। 

क्या डार्क वेब के फायदे भी हैं? (Benefits of Dark Net in Hindi)

बिलकुल, जैसा की हमने बताया की ये टेक्नोलॉजी फायदे के लिए बनायी गयी थी और इसके कई सारे फायदे हैं जिसकी वजह से लोग इसका उपयोग करते हैं, तो चलिए जानते हैं उन फायदों के बारे में:

गुप्त तरीके से सर्फिंग करना (Anonymity): 
यहाँ आप अपनी पहचान छुपा कर डार्कनेट पर घूम सकते हैं और अपने काम कर सकते हैं। कई बार कुछ काम ऐसे होते हैं जिन्हें करने के लिए identity protection की जरुरत पड़ती है ऐसे में ये आपकी private information को छुपाने में आपकी मदद करता है।

अगर आप इन्टरनेट पर कुछ भी करते हैं तो इसकी जानकारी सिर्फ आपको नही होती बल्कि आप जिस platform या वेबसाइट का उपयोग कर रहे हैं उसको भी आपकी जानकारी होती है जैसे फेसबुक पर जब आप लॉग इन करते हैं तो फेसबुक को इस बारे में पता होता है और यही नही Facebook बंद करने के बाद आप की साईट पर जा रहे हैं यह भी फेसबुक track कर सकता है, यही चीजें Google भी करता है, हालाँकि, ये ऐसा इसलिए करते हैं ताकि आपके interest को पहचान कर आपको relevant advertisements दिखाया जा सके।

लेकिन डार्क वेब पर आप थोड़ी सावधानी बरतें तो आपको कोई भी track नही कर पायेगा और यह आपकी निजी जानकारी को बचाने और privacy बनाये रखने के लिए फायदेमंद है।

अभिव्यक्ति की आजादी (Freedom of speech):
हमारे देश में हर इन्सान को अपनी बात कहने की आजादी है लेकिन कई देशों में यदि किसी संस्था, सरकार या किसी राजनैतिक पार्टी के खिलाफ कुछ कहा जाये तो ये उनके लिए बहुत बड़ी मुसीबत बन सकती है और freedom fighters जैसे लोगों के लिए ये ख़तरनाक साबित हो सकता है। ऐसे में इसका उपयोग करना फायदेमंद हो सकता है।

Research और knowledge के लिए:
Doctors, scientists और रिसर्च स्टूडेंट्स के लिए यहाँ कई प्रकार के ऐसे study materials और literature मिल जाते हैं जो की साधारण वेब और सर्च इंजन पर नही मिलते है। कुछ रिसर्च जो पब्लिक डोमेन पर उपलब्ध नही होते वो भी यहाँ पाए जा सकते हैं।

Disclaimer

कृपया इस बात का ध्यान रखें की Dark web के बारे में जानकारियां हम केवल educational purpose के लिए दे रहे हैं। हम किसी को भी डार्क नेट पर जाकर गैर-कानूनी काम करने के लिए प्रोत्साहित नही करते हैं और WebinHindi इसके खिलाफ है। अगर आप इसका उपयोग करते हैं और आपको नुकसान होता है या आप किसी के साथ गलत करते हैं तो इसके जिम्मेदार आप स्वयं होंगे।



हमें उम्मीद है की आपको समझ आ गया होगा की डार्क वेब क्या होता है (What is dark web in Hindi), और इसे कैसे access किया जाता है, इसके साथ ही इसके क्या फायदे और नुकसान हैं ये भी आपको पता चल चुका होगा। आपको dark net के बारे में जानकारी कैसी लगी हमें जरुर बताएं।

Sunday, 2 February 2020

CSS3 से अपने Website के लिए Shapes कैसे Design करें

css-shapes-tutorial
Website में उपयोग होने वाले ज्यादातर shapes rectangle या square होते हैं जिस का use आपने भी किया होगा, लेकिन क्या आपको पता है हम इन common shapes के अलावा भी और कई तरह के shapes बना सकते हैं वो भी सिर्फ CSS द्वारा कुछ line के code लिख कर।

आज आप इस tutorial में CSS shapes बनाना सीखेंगे जिसमे से कुछ basic और कुछ advanced shapes भी हैं जिसे आप pure CSS से बना सकते हैं।

CSS Shapes का उपयोग करने के क्या फायदे हैं?

  • CSS shapes की सबसे ख़ास बात यह है की इसका उपयोग कर आप अपने web page को अच्छा तो बना ही सकते हैं इसके अलावा site पर space खर्च करने वाले unnecessary images का उपयोग करने से बच जायेंगे।
  • CSS shape को manage करना आसान है, जब चाहें इसके size, आकार, color आदि में बदलाव कर सकते हैं जबकि image के साथ यह संभव नहीं है।
  • CSS shapes का उपयोग करना इसलिए भी फायदेमंद है क्योंकि ये client side browser के द्वारा render होते हैं जिससे server bandwidth की बचत होती है और आपकी website की speed कम नही होती है।

Basic CSS Shapes Tutorial in Hindi

चलिए अब हम कुछ basic shapes design करना सीखते हैं। इन shapes को बनाना बहुत ही आसान है और ये आपके वेबसाइट के लिए काफी उपयोगी भी हैं।

CSS Square Shape


CSS square shape बहुत ही simple shape है जिसे आसानी से बनाया जा सकता है| इसके लिए हमें div की height और width बराबर set करनी होती है|

इसका HTML and CSS codes आप नीचे देख सकते हैं:
HTML
<div class="square"></div>

CSS
.square {
 width: 100px;
 height: 100px;
 background: gray;
}

 CSS Rectangle Shape


Rectangle बनाने के लिए इसकी width की value को height से ज्यादा रखना होता है| इसका code आप नीचे देख सकते हैं:

HTML
<div class="rectangle"></div>


CSS
.rectangle {
 width: 200px;
 height: 100px;
 background: gray;
}

CSS Circle Shape

CSS में circle shape design करने के लिए div की height-width set करनी होती है और इसकी border radius को इसके height और width से 50% यानी की आधी रखनी होती है|

इसका HTML और CSS code नीचे दिया गया है:

HTML
<div class=”circle”></div>

CSS
.circle {
width: 100px;
height: 100px;
background: gray;
border-radius:50%;
}

CSS Oval Shape


Oval shape की width उसकी height से ज्यादा होती है और इसकी भी border-radius circle की तरह 50% होती है| इसका code आप नीचे देख सकते हैं:

HTML
<div class=”oval”></div>

CSS
.oval {
width: 200px;
height: 100px;
background: gray;
border-radius: 50%;
}

CSS Triangle Shape

Triangle shape को कुछ अलग तरीके से बनाया जाता है, इसमें height और width को 0 (zero) रखा जाता है क्योंकि यहाँ सारा काम border से किया जाता है|

left और right border को transparent रखा जाता है जबकि border-bottom की width ज्यादा रखी जाती है और उसमें  background-color set किया जाता है|

इसका code आप नीचे देख सकते हैं:

HTML
<div class=”triangle”></div>

CSS
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gray;
}

इसी प्रकार यदि आप ऐसे triangle को design करना चाहते हैं जो की नीचे की तरफ point करे (down triangle), तो इसके लिए simply border-bottom को border-top से replace कर दें|

Complex shapes

आपने basic CSS shapes design करना सीख लिया अब कुछ advanced CSS shapes design करना सीखेंगे|

CSS Parallelogram Shape


Parallelogram बनाने के लिए transform property का use किया जाता है और इससे  20 degree angle पर skew किया जाता है|

आप नीचे दिए गये code को run करके इस shape की बनावट को समझ सकते हैं:

HTML
<div class=”parallelogram”></div>

CSS
.parallelogram {
width: 200px;
height: 100px;
background:#ccc;
transform:skew(20deg);
margin:25px;
}

CSS Star (6-points) Shape


आपने अपने बचपन में star बनाने का तरीका सीखा होगा जिसमे हम एक के ऊपर एक triangles बनाते थे जिससे वह star की तरह दिखने लगता था, हम CSS में same method का use कर 6 points वाला star बना सकते हैं|

six-point star बनाने के लिए दो triangles की जरूरत पड़ती है जिसमे से एक top की ओर और दूसरा bottom की ओर point करता है|

दोनों triangles को position property का use करके एक के ऊपर एक रखा जाता है|

इसका example code आप नीचे देख सकते हैं:

HTML
<div class=”star6”></div>

CSS
.star6 {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid grey;
position: relative;
}

.star6:after {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid grey;
 position: absolute;
 content: "";
 top: 30px;
 left: -50px;
}

CSS Star (5 point) Shape


Five points वाले star को बनाने के लिए हमें तीन triangles की जरूरत पड़ती है जिन्हें एक के ऊपर एक रखा जाता है और उनमे से एक को 35 degree, दुसरे को -35 degree और तीसरे को -70 degree पर rotate किया जाता है|

इसका एक example code नीचे दिया गया है जिसे देख कर आप इस design को आसानी से समझ सकते हैं :

HTML
<div class=”star5”></div>

CSS
.star5 {
width: 0;
height: 0;
margin: 50px 0;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid grey;
border-left: 100px solid transparent;
transform: rotate(35deg);
}

.star5:before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid grey;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
transform: rotate(-35deg);
}

.star5:after {
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
border-right: 100px solid transparent;
border-bottom: 70px solid grey;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}

CSS Talk Bubble Shape


Talk bubble या speech bubble बनाने के लिए आपको एक rectangle या square और एक triangle shape की जरूरत पड़ेगी|
इस shape को बनाने के लिए एक example code नीचे दिया गया है:

HTML
<div class=”talk-bubble”></div>

CSS
.talk-bubble {
margin:30% 40%;
width: 120px;
height: 80px;
background:grey;
position: absolute;
border-radius: 10px;
}

.talk-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid grey;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}

CSS Egg Shape

अंडाकार बनाने के लिए oval जैसा ही shape बनाया जाता है बस इसकी height width से थोड़ी ज्यादा होती है और border-radius property का उपयोग किया जाता है|

इसका HTML और CSS code नीचे दिया गया है:

HTML
<div class=”talk-bubble”></div>

CSS
.egg {

  margin: 30% auto;

  display: block;

  width: 126px;

  height: 180px;

  background-color: grey;

  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

CSS Heart Shape


Heat shape यानि दिल का आकार बनाने के लिए elements को rotate किया जाता है और transform-origin property से इसमें transform होने वाले position को change किया जाता है|

इसका code आप नीचे देख सकते हैं:

HTML
<div class=”talk-bubble”></div>

CSS
.heart {
margin: 30% auto;
position: relative;
width: 100px;
height: 90px;
}

.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: grey;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}

.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

तो आज आपने इस article में CSS shapes बनाना सीखा जो की website design करने में बहुत ही उपयोगी साबित होगा|
अगर आपको CSS shapes design करने में कोई परेशानी हो तो आप नीचे comment box में अपना सवाल पूछ सकते हैं|

Sunday, 19 January 2020

सिर्फ 20 मिनट में सीखें HTML हिंदी में - HTML Tutorial in Hindi

Learn HTML in 20 Minute in Hindi- WebInHindi

Learn HTML in Hindi: अगर आप Web Designer या Developer बनना चाहते है या खुद की वेबसाइट बनाना चाहते हैं तब आपको HTML सीखना जरूरी है।

लेकिन इसके अलावा अगर आप कोई Businessman हैं और आपके पास पहले से ही अपनी Company की Website है जिसमें Regular Updates की जरुरत पडती है तो भी Basic HTML सीखना आपके लिये फ़ायदेमंद हो सकता है।

इससे आप खुद अपनी Website में Minor Updates कर सकेंगे और इस काम के लिये किसी Designer को पैसे देने से बच जायेंगे।

आज आप इस HTML tutorial को पढकर अगले 20 Minute में HTML का उपयोग करके एक Simple Webpage बनाना सीख सकते हैं। इसे सीखना बहुत ही आसान है बस आप नीचे दिये गये Steps को Follow करते जायें।

Learn HTML in Hindi -  20 Minutes Tutorial

अभी आप HTML की Basic जानकारी हासिल करेंगे जो कि एक Simple Page Design करने के लिये पर्याप्त है, लेकिन आगे हम आपको इस Blog में Web Design की Advanced knowledge भी देंगे तो आप हमारे साथ जुडे रहने के लिये हमारे Blog को अभी Subscribe कर लें।


HTML क्या है? What is HTML in Hindi
  • HTML (Hyper Text Markup Language) एक भाषा है जिसके जरिये हम Web-Browser को समझाते हैं कि हमारे Webpage के Information ( text, images आदि) को User के Screen पर कैसे Display किया जाये।
  • हमारे पेज का Layout कैसा होगा ये भी हम HTML के Code से ही Browser को बताते हैं।
  • बिना HTML Code के कोई भी वेबपेज Design नही किया जा सकता इस समय जिस पेज को आप अपनी Screen पर देख रहें है इसे भी बनाने के लिये HTML Language का Use किया गया है।
  • HTML File का Extension .html होता है।

HTML Tools
HTML में Code लिखने और Run करने के लिये कुछ Basic Tools की जरूरत होती है जो लगभग सारे Computers में पहले से ही Installed होते हैं |

इसके लिये mainly दो प्रकार के टूल्स की जरूरत पडती है:
  1. Text Editor (जैसे Notepad, Notepad++, Dreamweaver, Coffee Cup आदि)
  2. Web Browser (जैसे Internet Explorer, Google Chrome, Firefox, Safari, Opera आदि)
Text Editor हम Use करेंगे Code लिखने के लिये और Browser में हम बनाये गये HTML File को Run करेंगे।

अगर आपके पास Windows System है तो Notepad और Internet Explorer पहले से ही आपके कम्प्यूटर में Installed होंगे।

HTML Document Structure
अब हम एक html पेज बनायेंगे इसके लिये नीचे कुछ जरूरी Code दिये गए जिसे आप copy करके notepad में paste कर लें और save as करके किसी Folder में save करलें।

ध्यान रहे फ़ाइल को save करते समय save as पर जायें और file के नाम के आगे .html लगायें।

<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
<h1>This is heading</h1>
Hello World!!!
</body>
</html>
अब save किये गये फ़ाइल को Browser मे open करें जो कि कुछ इस तरह दिखाई देगा
html-example-hindi
अब चलिये इस कोड को समझते हैं:
  • एक HTML Page कई सारे Tags से मिलकर बना होता है, और सारे tags उस पेज के किसी न किसी element को दर्शाते हैं जैसे paragraph, image, table आदि।
  • लगभग सारे Tags के opening और closing होते हैं। opening tag कुछ इस तरह होता है: <tag_name> और closing tag में / लगा होता है जैसे: </tag_name>
  • जैसा कि आप ऊपर कोड मे देख सकते हैं सबसे पहले <html> टैग होता है जो html page के शुरुआत को दर्शाता है और Last में </html> लिखा हुआ है जो पेज के अन्त को बताता है।

HTML Page Sections
एक html पेज के mainly दो भाग होते हैं:
  1. Head Section: इस सेक्शन में पेज के बारे में Informations लिखे जाते हैं जो web browser और search engine के काम का होता है। इस section मे mainly तीन type की जानकारियां होती हैं: keywords, description जो कि Google जैसे search engines के काम आता है और तीसरा title जो कि वेबपेज का टाइटल होता है और Browser के title bar में display होता है।
  2. Body Section: यह main content वाला part होता है यहां वो सारी जानकारियां लिखीं जातीं हैं जिसे हम अपने पेज में दिखाना चाहते हैं जैसे: text, image, video आदि।

Background और Text में Color add करना
अपने Webpage को और Attractive बनाने के लिये हम background color, text color और images use कर सकते हैं।

आईये जानते हैं की HTML में background color कैसे डाला जाता है
तो चलिये सबसे पहले हम अपने page का बैकग्राउंड कलर change करते हैं।

ऐसा करने के लिये जो coding हमने पहले की थी उसे फ़िर से notepad में open करते हैं और body tag में एक bgcolor नाम का attribute जोड देते है और उसकी value को blue कर देते हैं जिससे पूरे पेज का background blue हो जायेगा।

Code कुछ इस प्रकार से होगा:


<html>
<head>
<title>My First HTML Document</title>
</head>
<body bgcolor="blue">
<h1>This is heading</h1>
Hello World!!!
</body>
</html>

अब इसे save करें और browser में open करें, कुछ इस प्रकार दिखाई देगा:
heading example
अब हम text का कलर change करते हैं इसके लिये font tag use करेंगे और color attribute में white लिखेंगे। जैसे:
<font color="white">Hello World!!!</font>
अब ये कुछ इस प्रकार से दिखाई देगा:

change font color example

यहां पर हमें font tag use करना होगा नही तो पूरे पेज के सारे text का color white हो जायेगा।

अगर हम अलग-अलग text में different colors डालना चाहते हैं तो हमें अलग-अलग font tag use करने पडेंगे। जैसे:

<font color="white">This is white color text</font>
<font color="yellow">This is yellow color text</font>
<font color="blue">This is blue color text</font>

Image add करना
Visitor के लिये अपने Webpage को और आकर्षक बनाने के लिये हम Images/pictures का भी इस्तेमाल कर सकते हैं, इसके लिये img tag का use करेंगे

सबसे पहले जिस folder में हमने अपने html page को save किया था उसी folder में एक और फ़ोल्डर बनायें जिसे images नाम दें और इस फ़ोल्डर में कोई भी एक image सेव करें जिसे पेज में दिखाना चाहते हैं।

अब इमेज डालने के लिये कोड कुछ इस प्रकार लिखें:
<img src="images/myimage.jpg">
ऊपर कोड में मैने images/myimage.jpg लिखा है जो बताता है कि हमारे इमेज/चित्र का नाम myimage.jpg है जो images नाम के फ़ोल्डर में है।

Note: यहां पर image के name और उसके format पर ध्यान दें, इमेज का नाम और format जानने के लिये इमेज की properties check करें।

यहां मैने जो इमेज लिया है उसका नाम myimage है जो jpg format मे है, आपके इमेज का नाम और format अलग हो सकता है।

अब वेबपेज को ब्राउसर में ओपन करते हैं, जो कुछ ऐसा दिखाई देगा:
add image
हम picture कि size भी change कर सकते हैं जिसके लिये height और width attribute का इस्तेमाल करेंगे।
<img src="images/myimage.jpg" height="100px" width="100px">
Height और width बदलने के बाद हमारा पेज कुछ ऐसा दिखाई देगा।
change image size
Link create करना
Link या Hyperlink का उपयोग एक पेज को दूसरे पेज से जोडने के लिये किया जाता है।

सबसे पहले हमें एक HTML page चाहिये जिसे हम अपने पेज से लिंक कर सकें, तो आप एक और पेज बना लें या पहले जो हमने पेज बनाया था उसे copy कर के उसी folder में दूसरे नाम से save कर लें।
Link बनाने के लिये Code कुछ इस प्रकार से लिखें:
<a href="अपने page का नाम">Text जिसे आप user को show करना चाहते हैं</a> 

उदहारण:
<a href="contact.html">Contact us</a>

अगर आप किसी website को link करना चाहते हैं तो उसके लिये code कुछ ऐसे लिखें:
<a href="http://www.website.com"> Text जिसे आप user को show करना चाहते हैं </a>

उदहारण:
<a href="http://www.webinhindi.com">Learn web design in Hindi</a>

Image Link: जैसा की आपने किसी website में देखा होगा जिसमें कुछ Buttons होते हैं जिस पर click करने से कोई दूसरा पेज open होता है इसी तरह हम किसी image के ऊपर भी link create कर सकते हैं
Image link create करने के लिये code कुछ इस तरह से लिखें:
<a href="page.html"><img src="images/button.jpg"></img></a>
Example के लिये हम एक Read More नाम का बटन अपने पेज़ पर लगाते है:
<a href="page.html"><img src="images/Read_more_button.png"></img></a>
हमारा पेज कुछ इस तरह दिखाई देगा:
hyperlink example
अब जैसे ही हम Read More वाले बटन पर click करेंगे तो page.html नाम का दूसरा पेज ओपन होगा।

Text Formatting
यह सबसे Basic लेकिन जरूरी part है मगर ये थोडा frustrating भी हो सकता है। अगर आप साथ में practice करते जायें तो ये आपको interesting लग सकता है।

इस भाग में हम simple text formatting जैसे कि नये line में sentence कैसे लिखे, text को left, right या center align कैसे करें आदि सीखेंगे|

सबसे पहले आप नीचे दिये गये English paragraph को copy कर के अपने HTML document में Paste करें और पेज को browser में run करें और देखें क्या result आता है। (आप इसके बदले में कोई दूसरा random text भी use कर सकते हैं लेकिन ध्यान रहे उसमें कुछ space डालना ना भूलें जैसा कि नीचे paragraph में हमने डाला है)
“This is a sample paragraph of text. Nothing important here just typing some words to the example of HTML formatting. In this article you are learning basics of HTML page designing in Hindi language.


In webinhindi.com we will cover all the topics related to web design and development in Hindi language.

If you find this article helpful then please bookmark our blog, like our Facebook page and keep visiting.


End of my sample paragraph!”
जब आप पेज Browser में open करेंगे तो कुछ इस प्रकार से दिखाई देगा

text-formating-example

आपने notice किया होगा कि हमने प्रत्येक sentence के बाद space छोडा था लेकिन browser में वो spaces  दिखाई नही दे रहे हैं और सारे sentences एक साथ एक ही paragraph मे merge हो गये हैं।
इसे fix करने के लिये हमें नीचे दिये गये कुछ tags use करने होंगे:
  1. <p> : इसका उपयोग हम तब करते हैं जब हमें कोई नया sentence लिखना होता है।
  2. <br> : Line break, नया लाईन शुरू करने के लिये use किया जाता है।
अब हम इन दोनो टैग्स का उपयोग कर नीचे फ़िर से पहले वाले पैराग्राफ़ को लिखेगें, इसे copy कर फ़िर से अपने document में paste कर लें।


<p>“This is a sample paragraph of text. <br> Nothing important here just typing some words to the example of HTML formatting.</p> <p>In this article you are learning basics of HTML page designing in Hindi language. </p>
<p> In webinhindi.com we will cover all the topics related to web design and development in Hindi language.<br> 
<p>If you find this article helpful then please bookmark our blog, like our Facebook page and keep visiting.
End of my sample paragraph!”</p>
अब आपका पेज कुछ इस प्रकार दिखाई देगा
p and br tag exampleअब आप <p> और <br> tags के स्थान को बदल कर कुछ experiment कर के देखें की output कैसा आता है।
अब हम text या image को align करना सीखेंगे, इसके लिये हम नीचे दिये कुछ टैग्स का उपयोग करेंगे:
  1.  <center>Text जिसको center align करना है </center>
  2. <p align =left> Text जिसको left align करना है </align> 
  3. <p align =right> Text जिसको right side में दिखाना है </align>
अब हम इन टैग्स को पहले वाले paragraph में apply करते है। ये देखिये मेरे में output क्या आता है:
text and image alignment

एक बार आप नीचे पूरा कोड देख ले:

<html>
<head>
<title>My First HTML Document</title>
</head>
<body bgcolor="#1B99CF">
<center><font color="#fff">Hello World!!!</font></center>
<center>
<h1>This is heading</h1>
</center>
<center><img height="100px" src="images/myimage.jpg" width="100px"></center>
<center><a href="page1.html"><img height="50px" src="images/button.png" width="100px"></a></center>
<center>
<p>“This is a sample paragraph of text.<br>
Nothing important here just typing some words to the example of HTML formatting.</p>
</center>
<p align="left">In this article you are learning basics of HTML page designing in Hindi language.</p>
<p align="right">If you find this article helpful then please bookmark our blog, like our Facebook page and keep visiting.</p>
<p>In webtechadda.com we will cover all the topics related to web design and development in Hindi language.<br>
End of my sample paragraph!”</p>
</body>
</html>
Text जिसकी size change करनी है</font>: इस <font> tag को हम पहले भी use कर चुके हैं बस इस बार उसमें हम size attribute जोड देंगे और इसकी value 1-7 हो सकती (जहां 1 सबसे छोटा और 7 सबसे बडी size होगी)
font size 
    2.<b>Text जिसको bold में दिखाना है</b>   
    3.<i>Text जिसको italic करना है</i>
    4.<u>Text जिसमे underline डालना है</u>

bold-italic-underline
HTML में Table कैसे बनाये?
HTML में टेबल बहुत ही useful होता है इससे न केवल हम data को अच्छे से present कर सकते हैं बल्कि हम table का use करके पूरे website का layout design कर सकते है

तो चलिये देखते हैं कि हम अपने पेज में table कैसे डाल सकते हैं।

Table बनाने के लिये 3 जरूरी tags का use किया जाता है:
  1. <table > :Table
  2. <tr> : Table Row
  3. <td> : Table Data
अब नीचे दिये code को copy कर लें और run करके देखें:

<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

जो कुछ ऐसा दिखाई देगा:
simple table
 अब चलिये कोड को समझते हैं:
  • सबसे पहले हमने <table> tag use किया border="1" लिखा जिससे border on हो जायेगा जिसकी size 1 होगी।
  • <tr> से हम एक नया row बनाते हैं|
  • <tr> के अन्दर हम <td> लिखते हैं, <td> से एक नया column बनता है। हमको कोई data लिखना होता है तो हम हमेंशा <td> tag के अंदर लिखेंगे।
  • हमने एक <tr> के अंदर दो <td> लिखा इसका मतलब एक row के अंदर 2 columns बनेंगे। 

Colspan and Rowspan:

अब नीचे कुछ Tables दिये हैं, देखेंगे कि हम उसे किस तरह बना सकते हैं:

colspan
ये टेबल पहले से कुछ अलग है, इसमें पहले row में सिर्फ़ एक ही column है ऐसी स्थिती में हमें “colspan” attribute use करना पडता है।
  • Colspan एक column की property है जिससे हम किसी एक column को दो या दो से अधिक column के बराबर span या फ़ैला सकते हैं।
  • जैसा कि आप ऊपर देख सकते हैं first वाले row में सिर्फ़ एक cell है लेकिन वो 2 cells के बराबर है, ऐसा हमने <td> में colspan="2" attribute use करके बनाया है। नीचे आप पूरा कोड देख सकते है:

<table border="1" width="200px" height="200px"> 
<tr align="center"> 
<td colspan="2">Cell 1</td> 
</tr> 
<tr align="center"> 
<td>Cell 3</td> 
<td>Cell 4</td> 
</tr> 
</table>

अब हम rowspan का example देखेंगे:
rowspan
जैसा कि आप देख सकते हैं हमने एक cell को vertically span करके 2 cells के बराबर बनाया है तो इसके लिये हमने <td> में rowspan="2" attribute का उपयोग किया है।

नीचे आप पूरा कोड देख सकते हैं:

<table border=1 width="200px" height="200px">
<tr align="center">
<td rowspan="2">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr align="center">
<td>Cell 3</td>
</tr>
</table>
Note: अगर आप cell को horizontally stretch करना चाहते हैं तो <td> में colspan का use करें और vertical stretch के लिये rowspan attribute लगायें।

HTML में Form कैसे बनाये?
Web forms के जरिये आप अपने web page के users से information ले सकते हैं। HTML form के जरिये आप Registration, login, contact form आदि बना सकते हैं

Note: HTML से form की सिर्फ़ design की जा सकती है। एक functional form बनाने के लिये हमें कोई server-side scripting (जैसे php, Asp.net आदि) की जरूरत पडेगी जिसे हम बाद में इसी blog में cover करेंगे।

Form काम कैसे करता है:

  • हर form मे एक submit button होता है, जब भी कोई user इस बटन को click करता है तो उसके द्वारा भरा गया सारा information दूसरे पेज में send हो जाता है।
  • हमें सारा data कहां भेजना है ये हम पहले से ही form बनाते समय specify कर देते हैं
  • जिस page पर data send होता है उसमें हमें एक program लिखना पडता है जिससे आने वाले सारे data को हम receive कर सकें। इस program को PHP या कोई अन्य server-side भाषा में लिखा जाता है जिसके बारे में हम बाद में जानेंगे।

Form कैसे बनायें:

  • <form> tag से सारे forms start होते हैं जिसे हम html के body में कहीं भी लिख सकते हैं।
  • Form tag में दो main attributes, method और action होते हैं <form method="post" action="register-exe.php">
     
  • Method attribute की value “get” या “post” हो सकती है। By default value get होती है।
  • Get method से भेजा गया information secured नही होता और form के सारे data browser के address bar में दिखाई दे सकते हैं। sensitive information जैसे की password आदि get method से नही भेजना चाहिये। 
  • Post method secured होता है, send किया हुआ कोई भी data browser में show नही होता
  • Action attribute में हम उस वेबपेज का address लिखते हैं जहां हमें data send करना होता है। 
सबसे पहले आप नीचे दिया गया कोड copy करें और एक नये html page मे paste कर run करें:

<html> <head> <title>Registration Page</title> </head> <body bgcolor="#00CCCC"> <h3>Registration Form</h3> <form action="" method="post">Enter Name: <input name="name" type="text"><br> <br> Enter Email: <input name="email" type="text"><br> <br> Gender: <input name="gender" type="radio" value="Male">Male <input name="gender" type="radio" value="female">Female<br> <br> City: <select name="city"> <option>Delhi</option> <option>Mumbai</option> <option>Kolkata</option> <option>Pune</option> <option>Hydrabad</option> </select><br> <br> Address: <textarea name="address"></textarea> <br> <br> <input type="submit" value="Register"> <input type="reset" value="Clear"></form> </body> </html>
Output कुछ इस तरह दिखाई देगा:
simple-html-form-design
उपर हमने एक registration form बनाया है जिसमें name और email के लिये text box, gender के लिये radio button, city के लिये dropdown box और address के लिये textarea use किया है।

चलिये अब इन HTML codes को समझते हैं:
  • हमने form tag के action attribute को blank छोड दिया है क्योंकि अभी हमें data दूसरे पेज में send नहीं करना है।
  • Text-box: name और email enter कराने के लिये दो text-box बनाया गया है, इसके लिये <input> tag use किया जिसमें type में हमने text डाला।
  • Radio button: male, female के लिये हमने दो radio button बनाये, यहां ध्यान देने वाली है की एक बार में दोनो में से कोई एक radio button active होना चाहिये, हम male और female दोनो एक साथ select नही कर सकते नही तो मामला गडबड हो सकता है। इसलिये हमे दोनो radio buttons के name को same रखना होगा
  • Dropdown या Combo box: इसे हमने city के लिये use किया है। <select> tag के अंदर हमने 5 <option> लिखे हैं जिसमें 5 शहरों के नाम है।
  • Text-area: address के लिये हमें एक बडा box बनाना होता है जिसमें हम multiple lines लिख सकते हैं। इसे <textarea> tag के जरिये बना सकते हैं।
  • Submit button: form को submit करने के लिये button बनाया जिसे <input> tag से बना सकते हैं जिसमे type="submit" होना चाहिये। value attribute के जरिये button में दिखने वाले text को बदल भी सकते हैं जैसा की हमने ऊपर button में register लिखा हुआ है।
  • Reset या Clear button: अंत में form fields को reset करने के लिये एक और <input> tag लिया जिसमें type="reset" रखा।
इस article (HTML tutorial in Hindi) में हमने कोशिश किया है की HTML के सारे basic topics को कवर किया जाये, हो सकता है यह पोस्ट आपको थोड़ी लम्बी लगी हो लेकिन अगर आप इसे step-by-step तरीके से practice करते जाएँ तो आप सिर्फ 20 मिनट में HTML सीख सकते हैं|

आगे पढ़ें:

अब आप भी एक web page design करके देखें और हमें बतायें, हो सके तो अपने वेबपेज का screenshot नीचे कमेन्ट बॉक्स में डालें और हां यह post आपको कैसा लगा, आपके मन में इससे जुड़े कोई सवाल हों तो जरूर बतायें। WebInHindi को और बेहतर बनाने के लिये भी आप सुझाव दे सकते हैं।

Friday, 3 January 2020

IP एड्रेस क्या है? What is IP Address in Hindi?

ip-address-kya-hai

क्या आपको पता है आपके स्मार्टफोन, टैबलेट, कंप्यूटर या लैपटॉप, जिस भी डिवाइस से आप इंटरनेट चलाते हैं उन सभी का अपना-अपना एक internet address है जिसे आईपी एड्रेस भी कहते हैं।

अब अगर आपके दिमाग में यह सवाल आ रहा हो की आखिर ये आईपी एड्रेस क्या होता है? या फिर आप इस सवाल का जवाब ढूंढते हुए यहाँ तक पहुंचे हैं, तो आप बिलकुल सही जगह पर आये हैं।

आज हम आईपी एड्रेस के बारे में जानकारी दे रहे हैं जिन्हें जानना आपके लिए जरुरी है ताकि भविष्य में यदि आप इस शब्द को कहीं पढ़ें या सुने तो आपको समझ आ सके की आखिर किस बारे में बात हो रही है।

IP एड्रेस क्या है? What is IP Address in Hindi?

हर एक डिवाइस जो इन्टरनेट से जुड़ा हुआ है जैसे आपका स्मार्टफोन, कंप्यूटर, लैपटॉप आदि, इन सभी के अपने-अपने आईपी एड्रेस होते हैं।

जरा सोचिये...

जब आप अपने किसी दोस्त को ईमेल भेजते हैं तो मेल सर्वर को यह कैसे पता चलता है की करोड़ों-अरबों computers में से आपके दोस्त का कंप्यूटर कौन सा है?

यह संभव हो पाता है IP की वजह से।

दरअसल आईपी एड्रेस इन्टरनेट से connected हर एक device के लिए एक identification number की तरह काम करता है।

इन्ही एड्रेस के जरिये इंटरनेट पर devices एक दूसरे से डाटा का आदान-प्रदान (communication) कर पाते हैं।

ठीक इसी तरह से वेबसाइट विजिट करने के लिए भी IP address की जरुरत पड़ती है

जब हम किसी वेबसाइट को अपने मोबाइल या किसी भी डिवाइस से विजिट करते हैं तो वहां भी IP address का उपयोग होता है।

ऐसा इसलिए क्योंकि वेबसाइट के सारे कंटेंट सर्वर पर स्टोर रहते हैं जो की अपनेआप में एक कंप्यूटर डिवाइस है और जैसा की हमने बताया की इन्टरनेट पर जुड़े हर कंप्यूटर का एक आईपी एड्रेस होता है ऐसे में वेबसाइट के किसी भी पेज को या कंटेंट को देखने के लिए सर्वर की आईपी की जरुरत पड़ती है।

हमारे मोबाइल और वेबसाइट के सर्वर के बीच IP address के जरिये ही communication होता है।

IP Version 4 और IP Version 6 क्या है?

आईपी ​​पते का दो संस्करण (versions) हैं:
  • IPv4 Address (संस्करण 4)
  • IPv6 Address (संस्करण 6)
IPv4 Address:  यहां एक उदाहरण दिया गया है कि आईपी वर्शन 4 एड्रेस कैसा दिख सकता है: 

66.172.211.186

 IPv4 एड्रेस में चार संख्याओं का समूह होता है, जिनमें से प्रत्येक में एक से तीन अंक हो सकते हैं, प्रत्येक अंकों के ग्रुप को बिंदु (.) के द्वारा अलग किया जाता है। हर group में 0 से 255 तक के नंबर हो सकती हैं। 

इन्हीं संख्याओं की वजह से ही पूरा इन्टरनेट चलता है और सारे कंप्यूटर और स्मार्टफोन एक दूसरे से कनेक्ट हो पाते हैं।

आईपी वर्शन 4 की एक limit है, यह लगभग 4 अरब 30 करोड़ unique IP address दे सकता है

और जैसा की आपको पता है समय के साथ internet devices की संख्या लगातार बढती जा रही है ऐसे में जाहिर सी बात है आज नही तो कल ऐसी स्थिति आनी ही थी की आईपी एड्रेस की कमी हो जाए। और इसीलिए IPv6 का जन्म हुआ।

IPv6 Address: इस वर्शन के एड्रेस कुछ इस प्रकार दिखाई देते हैं:

2001:0db8:85a3:0000:0000:8a2e:0370:7334

इसमें 8 ग्रुप होते हैं, और प्रत्येक में 4 hexadecimal digits होते हैं हर ग्रुप को colon (:) के द्वारा अलग किया जाता है।

आईपी वर्शन 6 एड्रेस को कुछ इस तरह से डिजाईन किया गया है की यह कभी भी खत्म नही होगा।

आईपी एड्रेस कितने प्रकार के होते हैं? (Types of IP address in Hindi)

ये मुख्य रूप से दो प्रकार के होते हैं:

1. Private IP Address: ये एक ही नेटवर्क के अंदर जुड़े हुए devices के लिए उपयोग किए जाते हैं, जैसे एक home network में जुड़े कंप्यूटर, वाईफाई कैमरा, वायरलेस प्रिंटर आदि के द्वारा प्राइवेट आईपी का उपयोग किया जाता है। प्राइवेट आईपी एड्रेस को राउटर द्वारा सेट किया जा सकता है।

2. Public IP Address: अपने नेटवर्क से बाहर के डिवाइस से कम्यूनिकेट करना हो तो पब्लिक आईपी एड्रेस का उपयोग किया जाता है। इन्टरनेट के जरिये दुनिया के किसी भी डिवाइस से संपर्क स्थापित किया जा सकता है और इस प्रकार के connection के लिए public ip address का उपयोग होता है। इसे ISP (Internet Service Provider) के द्वारा set किया जाता है।

Private और Public IP address भी दो प्रकार के हो सकते हैं: static या dynamic, आईये सरल भाषा में समझते हैं की आखिर यह है क्या:
  • Static IP Address: नाम से पता चल रहा है की इस प्रकार का एड्रेस अपनेआप नही बदलता है इसे manually change किया जाता है। 
  • Dynamic IP Address:  यह DHCP server के द्वारा automatically configured होता है। यह temporary IP address होता है जो की नेटवर्क से जुड़े devices के लिए सेट किया जाता है।
कई बार कुछ device DHCP को support नही करते हैं ऐसे में उनके लिए static आईपी का उपयोग होता है जिसे manually set किया जाता है।

अपना आईपी एड्रेस कैसे जाने? IP address कैसे पता करें?

आप बड़ी आसानी से अपने स्मार्टफोन, टेबलेट या कंप्यूटर की आईपी पता कर सकते हैं प्राइवेट और पब्लिक आईपी एड्रेस पता करने के अलग-अलग तरीके होते हैं। आइये जानते हैं इन तरीकों के बारे में:

Public IP Address कैसे पता करें?
इसे पता करना बहुत ही आसान है इसके लिए आप WhatsMyIP.org जैसी वेबसाइट पर जा सकते हैं। आप गूगल पर "what is my ip" लिखकर सर्च करें:

mera-ip-address-kya-hai


प्राइवेट आईपी एड्रेस कैसे पता करें?
अपने कंप्यूटर पर इसे command prompt पर ipconfig लिखकर search करें आपको सारी जानकारी मिल जाएगी:

ip-address-kaise-check-kare


आईपी एड्रेस का क्या उपयोग है? (Use of IP address in Hindi)

इन जानकारियों को पढने के बाद अब हो सकता है आपके दिमाग में यह सवाल आ रहा हो की आखिर आईपी एड्रेस का क्या उपयोग है?  

तो हम आपको बता दें की इसका उपयोग डिवाइस की identity के रूप में होता है और साथ ही इसी इलेक्ट्रॉनिक पते के जरिये इन्टरनेट पर communication होता है और सूचनाएं इन्ही पतों के जरिये एक जगह से दूसरे जगह पहुँचती हैं। इस वक्त आप हमारी इस वेबसाइट को भी आईपी की मदद से ही देख पा रहे हैं।

इसके अलावा IP address से device location का भी पता लगाया जा सकता है। इसके जरिये tracking भी की जा सकती है।


उम्मीद है आप ये जानकारियाँ पढ़कर समझ गये होंगे की आखिर IP address क्या है और इसका क्या उपयोग है। अगर जानकारी पसंद आये तो अपने दोस्तों के साथ जरुर शेयर करें।

Monday, 9 December 2019

Blogspot या Blogger क्या है? इससे फ्री ब्लॉग कैसे बनाये?

Blogger Kya hai

Blogger क्या है? यह सवाल अक्सर ब्लॉगिंग शुरू करते समय लोगों के दिमाग में आता है। लोग ब्लॉग बनाने से पहले गूगल पर सर्च करते हैं की "Free में ब्लॉग कैसे बनायें" , और फिर उनको पता चलता है Blogger या Blogspot की वेबसाइट के बारे में।

आज से कई साल पहले मैंने भी ब्लॉगिंग की शुरुआत Blogger से ही की थी और आज भी मेरे कई सारे ब्लॉग इसी blogging platform पर मौजूद हैं।

तो आज मै आपको भी Blogger के बारे में बताने जा रहा हूँ ताकि आप भी इस जानकारी का लाभ ले सकें।



Blogspot या Blogger क्या है? Blogspot meaning in Hindi

यह Google का एक blog publishing website है जिसे आप blogger.com या blogspot. com पर जा कर access कर सकते हैं। इस वेबसाइट में आप अपने गूगल के अकाउंट से लॉग इन कर सकते हैं। लॉग इन करने के बाद आप यहाँ मुफ्त में ब्लॉग बना सकते हैं। 

जब आप ब्लॉग बनाते हैं तो शुरुआत में आपको अपने ब्लॉग का एक नाम रखना पड़ता है। आप अपने ब्लॉग को publish करने के बाद blogspot. com के sub domain के द्वारा access कर पाएंगे। 

जैसे यदि आपके ब्लॉग का नाम myblog है तो आप इसे myblog.blogspot. com पर जाकर देख सकते हैं। लेकिन अगर आप चाहें तो खुद का डोमेन यानी custom domain (जैसे myblog. com) खरीद कर इससे जोड़ सकते हैं।

एक बार ब्लॉग बन जाने के बाद आप इसपर जितने चाहें उतने articles post कर सकते हैं। आप अपने आर्टिकल में text, images, videos, links आदि डाल सकते हैं।


Blogger के  क्या फायदे हैं?

  • आप यहाँ से बिना पैसे खर्च किये फ्री में ब्लॉग बना सकते हैं।
  • आपको अपने ब्लॉग के लिए अलग से होस्टिंग स्पेस लेने की जरुरत नही है।
  • अचानक traffic बढ़ने पर भी कोई खतरा नही रहता।
  • Server up-time हमेशा 99.99% रहती है और कभी कम नही होती। 
  • बिना कोडिंग सीखे काम किया जा सकता है।
  • अगर कोडिंग आती है तो आप खुद का custom template design तैयार कर सकते हैं।
  • Custom domain से ब्लॉग को connect कर सकते हैं और इसके लिए भी चार्ज नही देने पड़ते।
  • Adsense से ads लगा कर पैसे कमा सकते हैं।
  • Google Analytics से अपने ब्लॉग पर आने वाली traffic को analyse कर सकते हैं।
  • Webmaster tool का भी उपयोग कर सकते हैं।

Blogger में क्या-क्या limitations हैं?

  • आप PDF, Word, Zip files आदि को upload नही कर सकते।
  • आगर आपका कोई कंटेंट Blogger content policy का उल्लंघन करता है तो वह ब्लॉगर के द्वारा आपसे पूछे बगैर डिलीट भी हो सकता है।
  • Plugins या widgets की संख्या कम है।
  • Theme के customization में कई सारे limitations हैं।
  • URL structure पर आपका पूरा कण्ट्रोल नही रहता।
  • अगर आप blogspot sub-domain का उपयोग कर रहे हैं तो सर्च इंजन पर रैंक करना आसान नही होगा।
  • SEO के लिए कोई विशेष सुविधाएँ नही है।




Blogger में ब्लॉग कैसे बनाये?

अब चलिए बात करते हैं की ब्लॉगर यानि ब्लागस्पाट में ब्लॉग कैसे बनाये। ये काम बहुत ही आसान है आप सिर्फ 5 मिनट में एक साधारण ब्लॉग बना सकते हैं। इसके लिए निचे step-by-step tutorial दिया गया है जिसे follow करके आप कुछ ही मिनटों में एक basic blog तैयार कर सकते हैं।

Step 1: Blogger.com पर जाकर अपने जीमेल या गूगल अकाउंट के यूजरनाम और पासवर्ड से लॉग इन करें।

create-blogger-blog-step1

Step 2: लॉग इन करने के बाद आपको कुछ ऐसा स्क्रीन नजर आएगा जिसमे आप "Create new blog" button पर click करें।

create-new-blog-in-blogger-in-hindi

Step 3: अगले स्टेप में आपको आपके ब्लॉग का एक अच्छा नाम और एड्रेस बनाना होगा इसके अलावा blog के लिए एक theme भी चुनना पड़ेगा। 

यहाँ पर ध्यान रखें की यदि address डालने पर "Sorry, this blog address is not available." error आये तो इसका मतलब है की उस एड्रेस से दूसरा ब्लॉग पहले से बन चुका है। ऐसी स्थिति में कोई दूसरा एड्रेस बदल लें।

step3

Step 4: अब आपका ब्लॉग बन चुका है। इसे आप "View blog" में जाकर देख सकते हैं। अभी  आपके ब्लॉग में कोई भी कंटेंट या आर्टिकल पोस्ट नही किया गया है, इसके लिए आप "New post" बटन में क्लिक करके नया पोस्ट लिख सकते हैं।

blogger-me-blog-kaise-banaye-step-4

Step 5: ब्लॉगर पर पोस्ट कैसे लिखें? "New post" button पर क्लिक करने के बाद एक नया पेज open होगा जहाँ से आप अपना पहला पोस्ट लिख पाएंगे।

Create first post

अब आपने इन 5 steps को follow करके अपने लिए एक नया बेसिक ब्लॉग बना लिया है। इसमें अब आप कई सारे posts publish कर सकते हैं। 

तो ये थे कुछ basic steps ब्लॉग बनाने के, लेकिन इससे आगे भी आप कई सारे काम कर सकते हैं जैसे अपने ब्लॉग के डिजाईन यानि थीम को बदलना, basic settings में changes करना, pages create करना और widgets add करना आदि। 

Blogger blog का Theme कैसे बदलें?

ब्लॉगर में ब्लॉग की थीम का चुनाव करने के लिए आपके पास दो विकल्प होते हैं:
  1. Blogger default theme
  2. Custom themes
ब्लॉगर में पहले से कुछ default themes दिए गये होते हैं जिनका उपयोग आप कर सकते हैं। इसके लिए "Theme" में जाएँ और theme के list में से अपनी पसंद की थीम को चुने।

change-blogger-theme

अगर आपको ये themes/templates पसंद नही आ रहे हैं तो कोई बात नही, आप custom themes का उपयोग कर सकते हैं। इसके लिए आप इन्टरनेट से theme download करना होगा। आप free blogger templates search करके किसी अन्य वेबसाइट से मुफ्त में templates download कर सकते हैं। 

ब्लॉगर पर custom template/theme कैसे लगायें?

इसके लिए "Theme" में जाएँ वहां पर आपको "My theme" section में right side में तीन dots दिखेंगे उसपर क्लिक करें। एक मेनू open होगा जहाँ से आप पहले "Backup" पर क्लिक करके अपने थीम की बैकअप ले लेवें। इसके बाद "Restore" पर क्लिक करें और download किये गये template की XML file को upload कर दें।

change-blogger-custom-template

आपका custom theme upload हो गया है और अब आप ब्लॉग पर जाकर इस डिजाईन को देख सकते हैं। 

आगे पढ़ें:

Final Words:

अगर आप ब्लॉगर पर ब्लॉग बना रहे हैं तो आप कोई custom domain जरुर ले लें इससे आपका blog professional लगेगा और इसके कई और फायदे भी हैं। अब हमें उम्मीद है की आपको यह पढ़कर समझ आ गया होगा की Blogger क्या है और इससे फ्री ब्लॉग कैसे बनाये। अगर इससे जुड़े कोई सवाल पूछना चाहते हैं तो आप निचे कमेंट कर सकते हैं।

और पढ़ें: