Monday, 11 May 2020

HTML क्या है? इसे कैसे सीखें? | What is HTML in Hindi?

html-kya-hai-what-is-html-in-hindi

HTML का full form Hypertext Markup Language है। यह एक प्रकार की कंप्यूटर भाषा है जिसका उपयोग web page के structure को define करने के लिए किया जाता है।

वर्ल्ड वाइड वेब का अविष्कार होने के एक साल बाद ही एचटीएमएल का उपयोग होना शुरू हो गया था। आज इसे लगभग 30 साल हो चुके हैं और इस दौरान इसके कई versions आ चुके हैं और आज भी इसका उपयोग हो रहा है। इन्टरनेट पर मौजूद लगभग सारे वेबसाइट के pages एचटीएमएल से बने हुए हैं। 

हमने आज इस आर्टिकल में इसके बारे में विस्तार से चर्चा की है, तो चलिए जानते हैं की HTML किसे कहते है? और इसका कैसे उपयोग किया जाता है?

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

यह एक markup language है जिसका उपयोग वेब पेज और web application के कंटेंट के लिए structure यानि ढांचा तैयार करने के लिए किया जाता है। किसी पेज में heading, paragraph, image, links आदि कौन सी जगह पर होंगे यह HTML कोड से ही निर्धारित किया जाता है। इससे डॉक्यूमेंट को सही तरह से व्यवस्थित करने में मदद मिलती है।

क्या HTML प्रोग्रामिंग लैंग्वेज है?  इस सवाल को लेकर कई लोगों के बीच बहस छिड़ी रहती है लेकिन ज्यादातर लोगों का मानना है की यह programming language की श्रेणी में नही आता। इसके पीछे कारण यह है की जिस प्रकार से की हम किसी अन्य प्रोग्रामिंग लैंग्वेज में dynamic functionality create कर पाते हैं वैसा HTML से नही कर सकते। यह एक मार्कअप लैंग्वेज है और इससे हम logical programs नही बना सकते।

एचटीएमएल का इतिहास - History of HTML in Hindi

  • सन 1989 में Tim Berners-Lee ने वर्ल्ड वाइड वेब यानि WWW का आविष्कार किया और इसके साथ ही उन्होंने Internet-based hypertext system पर काम करना शुरू कर दिया था। 
  • सन 1990, Tim Berners-Lee ने HTML का आविष्कार किया इसके साथ ही वेब ब्राउज़र और सर्वर सॉफ्टवेयर को बनाया। 
  • 1991 में इन्टरनेट में पहली बार एचटीएमएल के बारे में HTML Tags नाम का एक डॉक्यूमेंट रिलीज़ किया जिसमे लगभग 18 html elements के बारे में बताया गया था।
  • 1993 में HTML 1.0 release हुआ जिसे जानकारी साझा करने के लिए उपयोग किया जाता था इसे वेब ब्राउज़र में ओपन करके पढ़ा जा सकता था।
  • 1995 HTML 2.0 पब्लिश हुआ जिसे HTML1.0 को improve करके बनाया गया था।
  • 1997 में इसका अलग वर्शन HTML 3.0 आया जो की W3C के द्वारा बनाया गया और standardized किया गया था।
  • 1997 के अंत में HTML 4.0 लांच हुआ जिसे फिर से minor edits करके 1998 में रिलीज़ किया गया था।
  • 1998 में HTML 4.01 आया जो की बहुत ही successful version था और लगभग हर जगह उपयोग होने लगा।
  • 2014 में HTML 5 आया जो की अभी तक चल रहा है, इसमें कई सारे नये टैग्स को शामिल किया गया है।

HTML Tags क्या है?

HTML tags एक प्रकार के keywords हैं जो की वेब पेज के कंटेंट को पहचानने और उन्हें सही फॉर्मेट में दिखाने में वेब ब्राउज़र की मदद करता है। जब वेब पेज ब्राउज़र में पहुचता है तो ब्राउज़र उसे ऊपर से नीचे स्कैन करता है और इन टैग्स की मदद से कंटेंट को समझकर उसे render करता है।  
  • सारे टैग < > के अंदर लिखे जाते हैं, जैसे: <tag>
  • टैग्स के तीन हिस्से होते हैं: opening tag, content, closing tag 
  • ओपनिंग टैग कुछ इस तरह होते हैं: <tag>
  • वहीँ क्लोजिंग टैग में ब्रैकेट के अंदर स्लैश का उपयोग किया जाता है जैसे: </tag>
  • इन दोनों के बीच में हमें अपने content को रखना होता है
  • कुछ टैग्स ऐसे भी होते हैं जिनके closing tag नही होते
  • अलग-अलग प्रकार के कंटेंट के लिए अलग-अलग प्रकार के टैग्स उपयोग किये जाते हैं
  • आप एक वेब पेज में जितने चाहें उतने टैग्स अपनी जरुरत के अनुसार उपयोग कर सकते हैं
 अब हम आपको एचटीएमएल टैग्स के कुछ उदाहरण देने वाले हैं:
<h1> Heading </h1>
<p> Paragraph </p>
<b> Bold </b>
<i> Italic </i>
<u> underline </u>

ये कुछ basic tags के example हैं, हमने एचटीएमएल सिखाने के लिए विस्तार से अलग आर्टिकल लिखा है जिसमे आप और भी टैग्स के बारे में पढ़ सकते हैं।


Basic Structure of HTML in Hindi

हर वेब पेज में एचटीएमएल का उपयोग होता है, और हर जगह इसके कोड का basic structure लगभग एक जैसा होता है। कोडिंग करने से पहले आपको इस बारे में जानकारी होनी जरुरी है। 
हर HTML document के मुख्यतः तीन हिस्से होते हैं:
  1. DTD (Document Type Declaration): <!DOCTYPE>
  2. Main container : <html>
  3. Head section: <head>
  4. Body section: <body>
पूरे पेज का स्ट्रक्चर कुछ इस प्रकार दिखाई देता है:

structure of html

आइये अब इन्हें समझते हैं:

DTD (Document Type Declaration): एचटीएमएल पेज के सबसे शुरुआत में हमें डॉक्यूमेंट का टाइप बताना होता है ताकि ब्राउज़र को यह पता चल सके की यह किस प्रकार का फाइल है और वह उसके अनुसार उसे प्रोसेस कर सके। इसके लिए <!DOCTYPE> एलिमेंट का उपयोग किया जाता है। HTML 5 version में यह बहुत ही आसान है, इसे कुछ इस प्रकार से लिखा जाता है:

<!DOCTYPE html>

यह कोड आपको कैसे लिखना है यह निर्भर करता है की आप कौन से वर्शन का एचटीएमएल उपयोग कर रहे हैं और आपके फाइल का टाइप क्या है।

Main container: HTML element: DTD के बाद में हमें एक कंटेनर बनाना होता है जिसमे DTD को छोड़कर डॉक्यूमेंट के सारे कंटेंट रखे जाते हैं। इसके लिए <html> टैग का उपयोग किया जाता है।

Head section: Main container के अंदर हमें <head> tag का उपयोग कर एक हेड सेक्शन बनाना होता है। इसके अंदर हम उस वेब पेज के बारे में जानकारी लिखते हैं। यहाँ पर लिखी गयी जानकारी ब्राउज़र पर दिखाई नही देती। इस सेक्शन में पांच प्रकार की चीजें लिखी जाती हैं:
  1. Document का Title : वेब पेज का टाइटल लिखने के लिए <title> टैग का उपयोग होता है।
  2. Style declaration: <style> elements से हम CSS के codes लिख सकते हैं
  3. Client side Scripts: Functionality provide करने के लिए jQuery, जावास्क्रिप्ट आदि के कोड head section में लिखे जा सकते हैं इसके लिए <script> टैग use होता है।
  4. Meta elements: कुछ custom attributes के लिए <meta> का उपयोग होता है।
  5. Link elements: किसी external files या डॉक्यूमेंट को लिंक करने के लिए <link> का use किया जाता है।
Body Section: यह डॉक्यूमेंट का वो हिस्सा है जहाँ आप अपने वो सारे contents डालते हैं जिन्हें आप अपने यूजर दिखाना चाहते हैं जैसे: headings, paragraphs, images, bullet lists आदि। 

HTML कैसे काम करता है?

किसी वेबसाइट के सारे html फाइल्स वेब सर्वर में मौजूद रहते हैं जब आप अपने कंप्यूटर या मोबाइल के वेब ब्राउज़र (जैसे: गूगल क्रोम, मोज़िला फायरफॉक्स, इन्टरनेट एक्स्प्लोरर आदि) से उस वेबसाइट के किसी पेज को एड्रेस डालकर खोलते हैं तो वह एचटीएमएल फाइल सर्वर से आपके कंप्यूटर में आता है और आपके ब्राउज़र में पहुँचता है।

HTML file का extension .html या .htm होता है जिसे ब्राउज़र उपर से निचे बाएं से दायें स्कैन करता है और उसके अंदर मौजूद html elements और tags को पहचानने की कोशिश करता है और पूरे पेज के स्ट्रक्चर को समझता है। एलेमेंट्स के अनुसार यह निर्णय लेता है उस कंटेट को किस तरह से अपने यूजर के स्क्रीन पर दिखाया जाय।



एचटीएमएल के फायदे (Advantages of HTML)

चलिए अब हम html से होने वाले लाभ के बारे में जानते हैं:
  • इसे सीखना आसान है।
  • सभी वेब ब्राउज़र पर चलता है।
  • यह ओपन-सोर्स और बिलकुल फ्री है।
  • यह बहुत ही light-weight है।
  • यह search engine friendly है।
  • कोड का रिजल्ट हम तुरंत देख सकते हैं।
  • इसके कोड को एडिट करना बहुत ही आसान है।
  • कोडिंग करने के लिए हमें अलग से किसी सॉफ्टवेयर की जरुरत नही है इसके लिए हम किसी भी टेक्स्ट एडिटर का उपयोग कर सकते हैं।
  • इसके सारे standards W3C द्वारा निर्धारित किये जाते हैं।
  • इसे सर्वर साइड स्क्रिप्ट जैसे PHP आदि के साथ मिक्स किया जा सकता है।

एचटीएमएल में क्या कमियां हैं?

इसके कई सारे फायदे हैं लेकिन साथ इसमें कुछ limitations भी हैं जिसके बारे में निचे आप पढ़ सकते हैं:
  • इसेसे हम केवल static और plain web page बना सकते हैं, dynamic functionality के लिए आप JavaScript programming, PHP, ASP आदि का उपयोग कर सकते हैं।
  • हमें सारे पेज को अलग-अलग बनाने पड़ते हैं क्योकि हम इसमें लॉजिकल टास्क perform नही कर सकते।
  • केवल HTML से हम अपने वेब पेज को अच्छे डिजाईन नही कर सकते, इसके लिए CSS का उपयोग करना पड़ता है।
  • Interactive web pages नही बना सकते।
  • ब्राउज़र नये वर्शन को बहुत ही धीरे से एडाप्ट कर पाते हैं।
  • कुछ टैग्स ऐसे होते हैं जिसका रिजल्ट हमें अलग-अलग ब्राउज़र पर अलग दिखाई दे सकता है।
  • अगर ब्राउज़र पुराने हैं तो वे एचटीएमएल के नये टैग्स को समझ नही पाते हैं और उसे रेंडर नही कर पाते।

एचटीएमएल कैसे सीखें? How to Learn HTML in Hindi?

एचटीएमएल सीखना बहुत ही आसान है आजकल तो छोटे-छोटे बच्चे स्कूल में इसे सीख जाते हैं। अगर कोई व्यक्ति चाहे तो एचटीएमएल में कोडिंग कैसे किया जाता है इसे सिर्फ 20 मिनट में सीख सकता है।

हमने एचटीएमएल सिखाने के लिए एक 20 मिनट का HTML Tutorial बनाया है जिसे आप पढ़ सकते हैं और उसे प्रैक्टिस कर सकते हैं।

सीखने के लिए क्या करें:
  • HTML Tutorial को एक बार अच्छे से पढ़ें 
  • किसी कोड एडिटर में इन कोड्स को लिखकर देखें 
  • खुद का वेब पेज बनायें और अलग-अलग tags का उपयोग करें
  • किसी html site जैसे स्कूल या कॉलेज की static website को देखें और समझें 
  • उस वेबसाइट की तरह अलग-अलग वेबपेज बनायें और सबमे अलग-अलग कंटेंट डालें
  • अब इन pages को आपस में लिंक करें
अगर आप इस तरह से प्रैक्टिस करते हैं तो बड़ी आसानी से HTML सीख जायेंगे और आपको टैग्स याद रखने की जरुरत नही पड़ेगी।

हमें उम्मीद है की आपको यह आर्टिकल (HTML kya hai?) पसंद आया होगा। इस बारे में आप अपने सवाल या विचार निचे कमेंट में जरुर रखें।

Monday, 27 April 2020

Blogger में Custom Domain कैसे Add करें? Godaddy डोमेन को ब्लॉगर से कैसे जोड़ें?

blogger me godaddy domain kaise add kare



क्या आप Blogger ब्लॉग से .blogspot.com को हटा कर अपनी मनपसंद domain name का उपयोग करना चाहते हैं? 

क्या आप जानना चाहते हैं की Blogger पर custom domain कैसे add करें? 

क्या आप अपने ब्लॉग को blogger पर hosting करना चाहते हैं?

अगर आपका जवाब हाँ है तो यह आर्टिकल आपके बहुत काम की है और आपको इसे जरुर पढना चाहिए।

इससे पहले हमने आपको यह बताया था की Blogger में ब्लॉग कैसे बनायें, अगर आप free में ब्लॉग बनाना चाहते हैं तो आप उस आर्टिकल को जरुर पढ़ें। Blogger या Blogspot दरअसल गूगल का एक blogging platform है जहाँ से आप मुफ्त में अपना ब्लॉग बना सकते हैं। लेकिन इसमें कुछ limitations भी होते हैं और इसमें सबसे बड़ी कमी यह है की आपको यहाँ Top level domain नही मिलता, आपको sub domain से काम चलाना पड़ता है।

मान कर चलिए की आप एक ऐसा ब्लॉग बनाना चाहते हैं जिसका एड्रेस हो yourname.com तो आपको ऐसा एड्रेस या डोमेन ब्लॉगर पर नही मिलेगा, हाँ आप yourname.blogspot.com नाम से ब्लॉग बना सकते हैं और इसे ही sub domain कहते हैं। 

Sub domain वाले blog बिलकुल भी professional नही लगते, इसके address को देखकर ही पता चल जाता है की यह फ्री वाला वेबसाइट है और इससे आपका impression ख़राब हो सकता है। 

लेकिन क्या इस समस्या से निपटा जा सकता है?

हाँ बिलकुल, आप custom domain के जरिये अपने फ्री वेबसाइट या ब्लॉग को एक बढ़िया address दे सकते हैं। आप किसी भी domain provider से एक डोमेन खरीद सकते हैं और उस डोमेन को ब्लॉगर से जोड़ सकते हैं। यहाँ हमने step by step तरीके से इस बारे में पूरी जानकारी दी हैं।

Blogspot या Blogger में Custom Domain Use करने के फायदे?

  • एक custom domain आपके वेबसाइट या ब्लॉग के लिए एक ब्रांड नेम की तरह काम करता है।
  • इससे आपके site की विश्वसनीयता बढती है।
  • सर्च इंजन पर रैंक करना आसान होता है क्योंकि गूगल जैसे सर्च इंजन .blogspot.com और .wordpress.com जैसे sub domain की तुलना में top level domain या custom domain को ज्यादा preference देते हैं। 
  • Search engine optimization (SEO) करने में सहायता मिलती है।
  • आप अपनी डोमेन का उपयोग कर professional email id बना सकते हैं जैसे: [email protected]
  • आप अपने कस्टम डोमेन का use करके अपनी जरुरत के अनुसार sub-domain भी बना सकते हैं जैसे service.yourdomain.com
  • इसे आप आसानी से दूसरों को बता सकते हैं और लोग इसे जल्दी याद भी कर लेंगे।
  • गूगल Adsense से approval लेना भी आसान हो जाता है।

Blogger में Custom Domain कैसे Add करें? 

Step 1: सबसे पहले यदि आपने अभी तक डोमेन नेम नही ख़रीदा है तो आप किसी भी अच्छे domain registrar से एक domain खरीद लें। आप GoDaddy से भी डोमेन खरीद सकते हैं इसकी जानकारी के लिए यह आर्टिकल जरुर पढ़ें: GoDaddy से डोमेन कैसे खरीदें? [आसान तरीका]

Step 2: अब आप blogger.com पर लॉग इन कर लीजिये और अपनी ब्लॉग जिसपर आप डोमेन जोड़ना चाहते हैं उसे चुन लें और Settings में जाकर Basic में जाएँ

Step 3: आपके Blog address के निचे + Set up a third-party URL for your blog लिखा होगा उस पर क्लिक करें।

blogger-custom-domain-setting

Step 4: अब आपको अपने द्वारा खरीदी गयी डोमेन enter करनी है। ध्यान रहे domain name के आगे www जरुर लगायें। जैसे www.yourdomain.com. इसके बाद आप "Save" button पर क्लिक करें।

godaddy with blogger in hindi


Step 5: Button पर क्लिक करते ही आपको एक error message दिखाई देगा, "We have not been able to verify your authority to this domain."  लेकिन आपको घबराने की जरुरत नही है। यहाँ पर आपको दो CNAME records मिलेंगे यानि कुछ codes होंगे जिसे आपको अपनी डोमेन में add करना होगा। आपको "DNS settings file"  की link पर click करना है इससे एक file download हो जाएगी।


Step 6: आपको इस पेज को ऐसे ही open रखना है और अपने ब्राउज़र के अलग tab में Godaddy की website open करके लॉग इन करना है। (यहाँ हमने Godaddy का example दिया है, यदि आपने किसी दूसरे डोमेन रजिस्ट्रार से डोमेन ख़रीदा है तो आपको उसकी वेबसाइट पर जाकर यही प्रोसेस करना है।)

Step 7: Godaddy में My products के अंदर आपको आपका डोमेन दिखाई देगा जिसकी DNS setting में जाना है।

godaddy-dns-setting-blogger


Step 8: अगले पेज में आपको सबसे निचे जाकर Advanced Features वाले section में जाना है और वहां "Import Zone File" में क्लिक करके blogger से डाउनलोड किये गये फाइल को upload करना है।

dns-zone-file-import-godaddy

Step 9: अगर file successfully upload हो जाये तो आप step 10 में जाएँ। लेकिन अगर फाइल upload न हो तो आपको इस काम को manually करना होगा इसके लिए 
  • Records section में जाकर Add बटन पर क्लिक करना है।
godaddy-dns-record

  • अब आपको step 4 में blogger से मिले codes यानि CNAME records को copy करके यहाँ paste करना होगा। आपको दो records add करने हैं। पहला रिकॉर्ड कुछ इस प्रकार होगा: Type = CNAME, Host = www, Points to = ghs.google.com, TTL = 1 Hour इन सबको निचे चित्र में दिखाए अनुसार enter करके Save कर दें।

  • इसी तरह फिर से Add बटन पर click करके दूसरा रिकॉर्ड भी आपको कॉपी करके enter कर देना है।
Domain Manager cname

Step 10: अब वापस blogger वाले page पर जाएँ (जिसे अपने दूसरे tab में open कर रखा है) और Save button पर क्लिक करें। अब Edit पर क्लिक करें और redirect option पर टिक लगाकर Save कर दें।

blogger me custom domain kaise jode


अब आप अपनी वेबसाइट को www और बिना www के भी access कर पाएंगे। इन steps को follow करने के बाद आपका ब्लॉग आपके domain पर redirect हो जायेगा। अगर कोई व्यक्ति आपके पुराने एड्रेस पर भी विजिट करता है तो वह automatically redirect होकर आपके नये domain पर चला जायेगा।


हमें उम्मीद है की इस tutorial को पढ़कर आपको यह समझ आ गया होगा की Blogger में domain कैसे add करें और Godaddy domain को blogspot से कैसे लिंक करें। इस बारे में अपने सवाल या सुझाव हमे निचे कमेंट में जरुर बताएं। 

Tuesday, 7 April 2020

CSS से Simple Dropdown Navigation Menu कैसे बनायें


Website में menu के जरिये contents को अलग-अलग categories में divide किया जाता ताकि user को उसे ढूँढने में आसानी हो, वैसे तो एक simple navigation से काम चल जाता है लेकिन कई बार हमें एक category के अंदर multiple sub categories बनाने पड़ते हैं।

इस स्थिति में हमें एक ऐसे menu structure की जरूरत पड़ती है जिसमे आसानी से सभी main और sub categories को दिखा सकें ऐसे में dropdown navigation design बहुत ही उपयोगी होता है इसमे हम sub menus का उपयोग करके कम space में एक बेहतर navigation बना सकते हैं।

ज्यादातर dropdown जो हम दुसरे websites में देखते हैं उनमे JavaScript का उपयोग किया जाता है लेकिन आज इस article में केवल HTML और CSS का उपयोग कर एक simple dropdown navigation हम step by step तरीके से design करना सीखेंगे।

Simple Horizontal Dropdown Navigation Design कैसे बनायें?

इस tutorial में हम आसान steps का उपयोग कर CSS से एक horizontal dropdown navigation बनायेंगे जिसे अधिकतर किसी वेबसाइट में header के ऊपर या नीचे लगाया जाता है।

इस प्रकार के menu का concept यह है की जब हम किसी button पर mouse hover करते हैं तब उसका background color change होता है और उसके नीचे एक sub-navigation display होता है।

आप नीचे दिए गये steps को follow कर आसानी से इस design को बना सकते हैं।

Step 1: HTML Code For Dropdown Menu

यदि आप पहली बार मेनू डिजाईन कर रहें हैं तो यह आपके लिए थोडा confusing हो सकता है इसलिए आप इससे पहले एक basic navigation बनाना सीखें।

इस प्रकार के मेनू के लिए हम unordered list का उपयोग कर links का एक list बनायेंगे| इसके लिए HTML code नीचे दिया गया है।

आप नीचे देख सकते हैं इसके लिए हमने <ul> का use किया है जो की एक <nav> element के अंदर है और इसमें हमने कोई भी ID या class का उपयोग नही किया है।
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Articles</li>
<li>Contact</li>
</ul>
</nav>
जिसका output कुछ इस प्रकार दिखाई देगा:
dropdown-first-step


Step 2: Nav element में background color add करना 

अब हम एक CSS file बना कर style create करना शुरू करेंगे| मेनू के background में कुछ कलर डालेंगे जिससे यह और अच्छा दिखाई दे इसके लिए nav element में CSS की background color property apply करेंगे।
nav{ background: #e64a19;}

Step 3: ul से default margin, padding और list-style को remove करेंगे

By default HTML element में कुछ margin और padding सेट होता है जिसे हम हटा देंगे जिससे की unwanted spaces remove हो जायेंगे| इसके लिए हम इन properties की value को 0 set कर देंगे।
nav ul { padding: 0; margin: 0; list-style: none; }
इस कोड को apply करने के बाद browser पर यह कुछ ऐसे दिखाई देगा:
menu-design-step-3

Step 4: List item <li> की styling करेंगे

List item की style को इस प्रकार change करेंगे की सभी items horizontal line में display हो और अलग-अलग button के समान काम करे इसके लिए display की default value को बदल कर inline-block करेंगे, sub-menu को उसके parent-menu के नीचे दिखाने के लिए position relative का उपयोग करेंगे| Padding से थोडा space डालेंगे और text के color को white करेंगे।
nav ul li {
font: bold 12px sans-serif;
display: inline-block;
position: relative;
padding: 15px 20px;
color:#fff;
}
इससे main-menu design हो जायेगा जो कुछ नीचे दिए screenshot की तरह होगा

Step 5: Sub Menu Add करना 

अब हमने एक simple navigation design कर लिए है लेकिन इसमें sub items add करना बाकी है इसके लिए nested unordered list create करेंगे, Services वाले li के अंदर एक <ul> add करते हैं जिसके अंदर list item में हम तीन links insert करेंगे| इसका HTML markup नीचे दिया गया है।
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li>Articles</li>
<li>Contact</li>
</ul>
</nav>
sub-navigation insert करने के बाद यह कुछ ऐसा दिखेगा:
मेनू-डिजाईन-step5

Step 6: Sub-menu की Position Set करना और By Default Hide रखना 

Sub items के position को normal flow से हटा कर हमारे द्वारा बताये गये स्थान पर और उस page के बाकी contents के ऊपर display कराने के लिए हमें absolute position का उपयोग करना होगा अब top property द्वारा इसे ऊपर से 44px नीचे set किया जायेगा।

by default हमें sub-menu को hide करना होगा और वह तभी दिखाई देगा जब particular li के  ऊपर mouse hover किया जायेगा|s hide करने के लिए display property को none करना पड़ेगा।
ul li ul {
padding: 0;
position: absolute;
top: 44px;
left: 0;
width: 150px;
display: none;
}

Step 7: Hover करने पर Background color बदलना और Dropdown को Show करना 

Button पर hover करने पर उसका background कलर change हो और hide किये गये <ul> यानि sub-navigation को display करने के लिए नीचे दिए कोड का उपयोग करना पड़ेगा।
ul li:hover ul{
display: block;
}
ul li:hover {
background: #383838;
color: #fff;
}
यहाँ पर ul li:hover ul का मतलब है की first वाले ul के list item पर hover करने पर display property sub-menu वाले ul पर apply होगा| इसके बाद design कुछ इस तरह से दिखाई देगा:

menu-sub-menu


Step 8: Dropdown और उसके List Items की Styling Change करना

Sub-menu के अंदर buttons को design करने के लिए उसमे बैकग्राउंड कलर डालेंगे और text color को white करेंगे इसके बाद इसमें hover effect add करेंगे।
ul li ul li {
background: #383838;
display: block;
color: #fff;
}
ul li ul li:hover {
background: #272423;
}

Step 9: Links की Styling करना

अभी तक हमने links यानि <a> tag को design नही किया है, by default links की color blue होती है और उसमे underline होता है जिसे हमको remove करना है इसके लिए हम नीचे दिए कोड का उपयोग करेंगे।
ul li ul li a{
color: #fff;
text-decoration: none;
display: block;
}

Final Result
अब finally हमारा dropdown menu बन कर तैयार है जिसका screenshot आप नीचे देख सकते हैं।
dropdown-navigation-design in Hindi


Complete HTML CSS Code For Horizontal Dropdown Menu

अब आप इस डिजाईन का पूरा कोड नीचे देख सकते हैं, आप चाहें तो इसे copy कर इसे अपने system पर run करके देख सकते हैं। आप चाहें तो इसमें कुछ बदलाव कर test कर सकते हैं
HTML

<!DOCTYPE html>
<html>
<head>
<title>Dropdown menu</title>
<link href="dropdown.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li>Articles</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>

CSS

nav {
background: #e64a19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none
}
nav ul li {
font: bold 12px sans-serif;
display: inline-block;
position: relative;
padding: 15px 20px;
color: #fff;
}
ul li:hover {
background: #383838;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 44px;
left: 0;
width: 150px;
display: none;
}
ul li ul li {
background: #383838;
display: block;
color: #fff;
}
ul li ul li:hover {
background: #272423;
}
ul li ul li a {
color: #fff;
text-decoration: none;
display: block;
}
ul li:hover ul {
display: block;
}

आज आपने इस article में simple dropdown navigation बनाना सीखा आप चाहें तो इसके design में अपने अनुसार बदलाव भी कर कुछ experiments भी कर सकते हैं।

अगर आपको dropdown menu बनाने में कोई परेशानी हो रही है या आप कुछ सवाल पूछना चाहते हैं तो आप नीचे कमेंट  बॉक्स के जरिये अपनी बात रख सकते हैं।

Monday, 23 March 2020

GoDaddy से डोमेन कैसे खरीदें? 2020 Latest Tutorial [आसान तरीका]

godaddy-se-domain-kaise-buy-karen

GoDaddy से domain name कैसे खरीदें? यह सवाल आजकल काफी लोग पूछ रहे हैं, क्या आप भी उन्ही में से एक हैं? अगर हाँ, तो यह जानकारी आपको जरुर पसंद आयेगी।

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

आजकल हर कंपनी के पास अपने खुद के वेबसाइट होते हैं इसके अलावा लोग आजकल blogging के जरिये भी अच्छे पैसे कमा रहे हैं। लेकिन इन दोनों काम को करने के लिए आपको Domain name की जानकारी जरुर होनी चाहिए। डोमेन नेम क्या है इस बारे में हमने पहले ही विस्तार से एक आर्टिकल में बताया है जिसे आप एक बार जरुर पढ़ लेवें।

अगर आप वेबसाइट बना रहे हैं, ब्लॉग स्टार्ट कर रहे हैं या कोई ऑनलाइन बिज़नेस शुरू करके पैसे कमाने के बारे में सोच रहे हैं तो आपको डोमेन नेम खरीदनी पड़ेगी ताकि आप इन्टरनेट पर अपनी खुद की या कंपनी की वेबसाइट बना सकें और अपने कारोबार को बढ़ा सकें।

भारत में डोमेन नेम खरीदने के लिए सबसे ज्यादा उपयोग होने वाली वेबसाइट है Godaddy जहाँ से आप डोमेन और होस्टिंग दोनों खरीद सकते हैं और अपना वेबसाइट बना सकते हैं।

इसलिए आज हम आपको बहुत ही आसान step-by-step तरीके से बताने वाले हैं की Godaddy से डोमेन नेम कैसे खरीदें

GoDaddy से कौन-कौन से Type के Domain ख़रीदे जा सकते हैं?

आप गोडैडी से अपनी जरुरत के अनुसार कई प्रकार के डोमेन खरीद सकते हैं। यहाँ आपको अलग-अलग प्रकार के domain extensions मिल जायेंगे जिन्हें आप purchase करके personal या business website तैयार कर सकते हैं।

इन domain extensions की लिस्ट कुछ इस प्रकार है:
  • .com
  • .in
  • .net
  • .org
  • .store
  • .me
  • .world
  • .asia
  • .buzz
  • .win
  • .tech
  • .law
  • .digital
  • .health
  • .global
  • .one
  • .art
  • .fashion
  • .design
इन डोमेन्स की कीमत extensions के अनुसार अलग-अलग होती है साथ ही इसकी price इस बात पर भी निर्भर करती है की आप डोमेन कितने वर्षों के लिए buy कर रहे हैं।

GoDaddy से डोमेन कैसे खरीदें? [Step by Step Guide]

Step 1: सबसे पहले आपको गोडैडी की वेबसाइट (in.godaddy.com) पर जाना है।

buy domain from godaddy tutorial in hindi

 Step 2: अब आपको टेक्स्ट बॉक्स के अंदर अपनी पसंद की डोमेन नेम enter करके Domain Name search करें। अगला पेज कुछ इस तरह दिखाई देगा।

GoDaddy Domain Name Search

Step 3: अगर उस नाम से domain name available है तो आप Add to Cart पर क्लिक करके Continue to Cart पर क्लिक करें। इसके बाद next page कुछ इस प्रकार होगा।



 Step 4: अगर आप Privacy Protection लेना चाहते हैं तो आप उसे select कर सकते हैं जिसके लिए आपको extra charges देने पड़ेंगे। अगर आप इसे नही लेना चाहते तो No Thanks पर टिक लगा दें। इसी तरह e-mail address और hosting के लिए भी आप drop down menu से No Thanks option को select कर सकते हैं। इसके बाद Continue to Cart पर क्लिक कर दें।

नेक्स्ट पेज कुछ इस प्रकार होगा


Step 5: इस स्टेप में आपको यह बताना होगा की आप डोमेन को कितने साल के लिए खरीदना चाहते हैं। ड्राप डाउन से यह चुनने के बाद आपको Godaddy पर Sign In करना होगा। अगर आपके पास Godaddy account नही है तो आप Create an Account पर क्लिक करके नया अकाउंट बना सकते हैं।


Step 6: अगले चरण में आपको Payment Option Select करके पेमेंट करने होंगे। इसके लिए आपके पास कई सारे options हैं जैसे:

  • क्रेडिट कार्ड्स 
  • डेबिट कार्ड्स 
  • नेट बैंकिंग 
  • मोबाइल वालेट्स: जैसे Google Pay, Phone-pe आदि 
  • या आप UPI का भी उपयोग कर सकते हैं।
इन steps को follow करने के बाद आप आपका डोमेन आपके नाम से registered हो जायेगा। इसे आप Godaddy के account पर लॉग इन करके देख पाएंगे। 

डोमेन नेम खरीदने के बाद आपको वेब होस्टिंग की जरुरत पड़ेगी ताकि आप अपनी वेबसाइट के सारे contents को hosting server पर अपलोड कर अपनी साईट को manage कर सकें।

हमें उम्मीद है की "Godaddy से डोमेन कैसे खरीदें" यह जानकारी आपके काम आएगी। अपने सवाल या सुझाव निचे कमेंट के मध्यम से हम तक जरुर पहुंचाएं।

Friday, 13 March 2020

CSS से Animation कैसे बनायें?

css-animation-tutorial-hindi
जैसा की आप जानते हैं की animation हर किसी के लिए interesting और मजेदार होता है ऐसे में यदि आप इसका  उपयोग अपनी website पर करते हैं तो  इससे आपकी वेबसाइट आपके audience के लिए और भी interesting हो सकती है|

लेकिन website के लिए animation कैसे बनायें? यह सवाल आपके मन में आ रहा होगा, तो चलिए आज आपको  इस article में बताते हैं की कैसे आप बड़ी आसानी से सिर्फ CSS से animation बना सकते हैं|

इससे पहले आपने CSS3 transition effects के बारे में पढ़ा था जिनका उपयोग करके भी simple CSS animations डिजाईन किया जा सकता है|

CSS से अपने website के लिए animation कैसे design करें ?

CSS में animation create करने से पहले आपको दो properties के बारे में जरूर पता होना चाहिए :
  • Keyframes : animation  कैसे दिखाई देगा उसमे कितने stages होंगे और उनके styles कैसे होंगे ये keyframe से  define किया जाता है|
  • Animation property : @keyframes बनाने के बाद उसे किसी element पर apply करने के लिए animation property का use किया जाता है|
चलिए अब इन दोनों को विस्तार से समझने की कोशिश करते हैं :

CSS Keyframes

इसके द्वारा हम animation के stages को set करते हैं| प्रत्येक @keyframes तीन चीजों से मिलकर बना होता है जो कुछ इस प्रकार हैं:
  1. Animation name: animation का नाम|
  2. Animation stages: हर एक stage को percentage से define किया जाता है| जहाँ 0% का मतलब beginning stage और 100% का मतलब ending state होता है| इन दोनों के बीच multiple stages define किये जा सकते हैं|
  3. CSS properties: CSS styles, जिसे हर stage के लिए define किया जा सकता है|
Example:
@keyframes scaleme {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

आप ऊपर example में देख सकते हैं हमने एक keyframes बनाया जिसका नाम scaleme रखा और उसके अंदर तीन stages define किये |

पहले stage में element की size transform property से scale करके छोटा  रखा जाएगा फिर इसे दुसरे stage जो की 60% से start होगा उसमे size  थोडा increase किया जायेगा और finally last stage में element अपने original size में display होगा|

CSS3 Animation Properties

@keyframes define करने के बाद एनीमेशन को properly work कराने के लिए CSS animation properties का use करना आवश्यक है|

Animation properties से @keyframes को किसी selector (या element) के लिए call किया जाता है|

एनीमेशन में multiple properties हो सकते हैं जिनमे से नीचे दिए गये दो properties का use करना जरूरी है:
animation-name: एनीमेशन का नाम, जिसे @keyframes में define किया गया हो

animation-duration: एनीमेशन का duration, seconds (जैसे 5s) या milliseconds (जैसे 100ms) में specify करने के लिए

Example:
div{
animation-duration: 2s;
animation-name: scaleme;
}

या shorthand syntax का उपयोग कर सकते हैं :
div{
animation: scaleme 2s;
}

इस example में हमने पहले बनाये गये keyframes को call करके div element को animate किया है जिसका duration 2 seconds set किया है|

Output


जैसा की हमने बताया animation-name और animation-duration ये दोनों properties सबसे  जरूरी हैं लेकिन इन दोनों के अलावा एनीमेशन के लिए और भी कई सारे additional properties हैं जिनका उयोग करके advanced और complex animations design किये जा सकते हैं|

ये सारे properties नीचे दिए गये हैं:
  • animation-iteration-count
  • animation-timing-function
  • animation-delay
  • animation-direction
  • animation-fill-mode
  • animation-play-state
अब चलिए एक-एक करके इनको समझते हैं और इनके examples देखते हैं:

animation-iteration-count

एनीमेशन कितने बार run होगा यह तय किया जाता है animation-iteration-count property से |

इसकी default value 1 होती है यदि एनीमेशन को लगातार बिना रुके चलाना हो तो उसके लिए value को infinite रखनी होगी|

Synatx:
animation-iteration-count: 5;

नीचे example दिया गया है जिसमे एनीमेशन 5 बार run होगा|

animation-timing-function:

Animation की speed curve define करने के लिए animation-timing-function property का use किया जाता है|
इस property की values कुछ इस प्रकार हो सकती है:
  • ease: इससे एनीमेशन की speed starting और ending में slow होती है जबकि बीच में fast होती है| यह default value है|
  • linear: इससे animation speed starting से ending तक same होती है|
  • ease-in: एनीमेशन starting में slow होता है 
  • ease-out: एनीमेशन की speed ending में slow हो जाती है   
  • ease-in-out: slow start और slow ending के लिए use होता है 
  • cubic-bezier(n,n,n,n): खुद से कोई custom timing create करने के लिए इसका उपयोग होगा 

Syntax:
animation-timing-function: ease-in;


Example:

Animation-Delay

एनीमेशन कब start होगा यह control करने के लिए animation-delay property का उपयोग किया जाता है|

इसकी value second या millisecond में specify किया जाता है | यदि value 2s है तो इसका मतलब है की एनीमेशन 2 seconds के बाद शुरू होगा|

Synatx:
animation-delay:3s;


animation-direction

यहाँ पर direction का मतलब है forward और reverse. animation reverse direction में run होगा, forward में होगा या alternate cycle में run होगा यह specify किया जाता है animation-direction property से|

इस property के कुछ values इस प्रकार हो सकते हैं:
  • normal (default): animation forward direction (0% से 100%) में play होगा 
  • reverse: reverse direction (100% से 0%) में play करने के लिए 
  • alternate: हर odd cycle (1, 3, 5,...) में forward direction और even cycle (2, 4, 6, ...) में reverse direction में run करने के लिए|

alternate-reverse: यह alternate का just उल्टा होता है | हर odd cycle में reverse और even cycle में forward direction में play होता है|

Syntax:
animation-direction: reverse;


animation-fill-mode: 

जब animation running state में नही होता (जब एनीमेशन end हो चुका हो या उसमे कोई delay हो) तब उस element का style कैसा होगा इसे specify करने के लिए animation-fill-mode property का उपयोग होता है|

इसके values कुछ इस प्रकार हो सकते हैं:
  • forwards: जब एनीमेशन finish हो जाता है तब target  element में वह style set हो जाता है जिसे हम final keyframe (100%) में define करते हैं|
  • backwards: एनीमेशनstart होने से पहले, target element पर first keyframe (0%) में define किये गया style apply हो जाता है|
  • both:  element पर forwards और backwards दोनों rules apply हो जाते है |
  • none: यह default value है, by default animation शुरू होने और समाप्त होने पर target element पर कोई style apply नही होता|

Syntax:
animation-fill-mode: forwards;

Example:


animation-play-state

animation-play-state property से यह specify किया जाता है की एनीमेशन play हो रहा है या paused है|

इसके values कुछ इस प्रकार हो सकते हैं:

  • playing: एनीमेशन अभी run हो रहा है 
  • paused: एनीमेशन अभी paused है 

Syntax:
animation-play-state: paused;

Example:

आगे पढ़ें: 


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

Sunday, 1 March 2020

CSS में Gradient Background कैसे बनायें

CSS-Gradient-Background-Tutorial-Hindi
अब तक हम CSS से single color background बनाते थे और यदि multiple color की जरूरत पड़े तो image का उपयोग करते थे लेकिन क्या आपको पता है की हम बिना किसी image का उपयोग किये सिर्फ CSS से अपने website के लिए एक beautiful gradient background create कर सकते हैं|

आज हम इस CSS tutorial में CSS gradients के बारे में जानेंगे और उसका उपयोग करना सीखेंगे|

Gradient एक प्रकार का image होता है जिसे अलग-अलग कलर के मिश्रण से बनाया जाता है| यदि आप अपने website में colorful background add करना चाहते हैं तो आप CSS3 के इस gradient feature का उपयोग कर सकते हैं|

हम CSS से इस colorful gradient को कुछ ही lines की coding से पूरी तरह control कर सकते हैं, इसमें कौन-कौन से colors होंगे, उनका sequence क्या होगा, color-stops कितने होंगे, direction क्या होगी आदि settings को आसानी से manage किया जा सकता है|

CSS Gradients Use करने के फायदे 

Image की जगह pure CSS gradient का उपयोग कर हम website की loading speed को बढ़ा सकते हैं क्योंकि यदि आप image use करते हैं तो यह आपके page की size बढ़ा देता है जिससे पेज download होने में समय लगता है|

यह किसी image की तुलना में कहीं ज्यादा clear और smooth दिखाई देता है खास करके तब जब इसे zoom किया जाता है, ऐसा इसलिए क्योंकि यह browser generated होता है और size बदलने पर भी इसकी quality कम नहीं होती इसके अलावा इसमें changes करना बहुत ही आसान है जिसके लिए सीधे stylesheet पर जाकर कभी भी coding में बदलाव कर सकते हैं|

CSS Gradient Background कैसे बनायें 

CSS3 के जरिये हम multiple colors को combine कर के अलग-अलग तरह के कई सारे colorful backgrounds और patterns generate कर सकते हैं|

यहाँ पर हम 4 तरह के gradient types के बारे में जानेंगे जो की कुछ इस प्रकार हैं:
  1. Linear   
  2. Radial   
  3. Repeating Linear 
  4. Repeating Radial 
CSS में हम solid color fill करने के लिए background-color property का उपयोग करते हैं लेकिन gradient एक image तरह काम करता है और इसे create करने के लिए कोई अलग से CSS property नही है इसके लिए हम background-image या इसकी shorthand property का उपयोग करेंगे|

CSS Linear Gradient 

यह सबसे simple होता हैं और इसका सबसे ज्यादा use किये जाते हैं| इसमें दो या दो से अधिक colors को एक linear format में दिखाया जाता है, इसका direction by default left-to-right होता है जिसे चाहें तो बदलकर top-to-bottom या कुछ दूसरा angle set किया जा सकता है|

Syntax
background: linear-gradient: ([direction] , [color-stop1], [color-stop2], ...);
जैसा की आप नीचे देख सकते हैं यदि हम कोई direction specify न करें तो by default यह left-to-right display होता है :
.gradient{background: linear-gradient(red,pink);}


हमें कम से कम दो colors specify करने होंगे और इसके लिए hex, named colors, rgba, hsla का उपयोग कर सकते हैं, चाहें तो comma के बाद जितने चाहें उतने colors add कर सकते हैं|

अगर हमें default angle को change कर कोई दूसरा direction set करना है तो इसके लिए हमें linear-gradient() function में सबसे शुरुआत में एक और parameter जोड़ कर direction बताना होगा|

Direction specify करने के लिए कुछ words जैसे to right, to left, to top, to top right, to bottom left आदि के अलावा degrees जैसे 90 deg, -30 deg आदि का भी उपयोग कर सकते हैं, इसका कुछ उदाहरण आप नीचे देख सकते हैं|

to right
.gradient {background: linear-gradient(to right, #1c5ba4, #dfe8f2);}

top-left
.gradient {background: linear-gradient(to top left, #1c5ba4, #dfe8f2);}

45 deg angle
.gradient {background: linear-gradient(45deg, #1c5ba4, #dfe8f2);}

Linear Gradient में Color Stops Specify करना  हम color stops की setting कर कौन सा कलर कहाँ  से start होगा उसका location क्या होगा यह भी तय कर सकते हैं|

color stops के location को हम percentage (%) में specify कर सकते हैं| आप चाहें तो multiple color-stops use कर अलग-अलग कलर्स जोड़ सकते हैं|
.gradient {background: linear-gradient(#ff5004, #fff 40%, #09a201);}

CSS Radial Gradient बनाना

इसका उपयोग कम किया जाता है और यह किसी circular shape की तरह बनता है| इसमें color-stops center से शुरू होते हैं और एक circle या ellipse के आकार में फैलते हुए दिखाई देते हैं|

By default इसका shape ellipse आकार का होता है, हम चाहें तो इसको बदल भी सकते हैं| इसके लिए basic syntax नीचे दिया गया है|

Syntax
background: radial-gradient([shape] [size at position], [first-color], ..., [last-color]);

[shape] : Shape define करने के लिए इस parameter का use होता है| इसकी value circle या ellipse में से कोई एक हो सकता है| इसकी default value ellipse होती है|

[size]: इससे shape की size define की जाती है इसके कई सारे values हो सकते हैं जो की इस प्रकार हैं:
• closest side
• farthest side
• closest corner
• farthest corner
.gradient{ background: radial-gradient(yellow, red, black);}

Radial Gradient की Size Change करना हम कुछ words जैसे closest-side, farthest-side, closest-corner, और farthest-corner का उपयोग कर gradient size को बदल सकते हैं| इसका कुछ उदाहरण आप नीचे देख सकते हैं|
.gradient1{ background: radial-gradient(circle farthest-corner, white,red);}
.gradient2 {background: radial-gradient(circle farthest-side, white,red);}
.gradient3{background: radial-gradient(circle closest-side,white,red);}
.gradient4 {background: radial-gradient(circle closest-corner,white,red);}

Radial Gradients Color Stops Radial gradients के color stops linear के समान ही होते हैं| इसमें color और उसके length को define किया जाता है| length को pixel या percentage में भी specify किया जा सकता है|
.gradient{ background: radial-gradient(circle closest-side at 50% 30%, #f06d06 30%,white 40%, black);

CSS Repeating Linear Gradient

repeating-linear-gradient() function का उपयोग कर हम repeating linear gradient बना सकते हैं| यह linear जैसा ही होता है लेकिन इसमें colors repeat होते जाते हैं|
यह काफी useful होता है क्योंकि हम इसका उपयोग कर colorful patterns design कर सकते हैं|

Syntax
background: repeating-linear-gradient: ([angle | to ] ,[color-stop], [color-stop], ...);

इसका एक simple example नीचे देख सकते हैं जिसमे हम 45 deg angle का use कर कुछ lines print करते हैं|
.gradient{ background: repeating-linear-gradient(45deg, black,black 5px, lightblue 5px, lightblue 10px);}

अब यदि आप कोई pattern create करना चाहते हैं तो उसके लिए multiple times इस property का use कर सकते हैं|

उदाहरण के लिए हमने नीचे एक pattern design किया है जिसमे कुछ lines 45 degree में print होते हैं जबकि इनके ऊपर cross करते हुए कुछ lines -45 degree में repeat होते जाते हैं|

.gradient {
  background: 
  repeating-linear-gradient( -45deg, rgba(145, 200, 242, 0.5), rgba(145, 200, 242, 0.5) 5px, transparent 5px, transparent 10px), 
  repeating-linear-gradient(45deg, rgba(145, 200, 242, 0.5), rgba(145, 200, 242, 0.5) 5px, white 5px, white 10px);
}

CSS Repeating Radial Gradient

Repeating radial gradient किसी standard radial जैसा ही होता है लेकिन इसके color-stops चारों directions में infinite times repeat होते जाते हैं| इसका example आप नीचे देख सकते हैं |
.gradient{background: repeating-radial-gradient(circle, black, black 6px, yellow 6px, yellow 10px); }

आज आपने इस article में CSS gradients के बारे में जाना इसकी सबसे ख़ास बात यह है की हम बिना किसी image का use किये बहुत ही बढ़िया background design कर सकते हैं इसके अलावा खूबसूरत CSS pattern background भी कुछ ही line के code से create कर सकते हैं|

अगर आपको हमारा यह article पसंद आया तो अपने दोस्तों के साथ जरूर share करें| यदि कोई सवाल पूछना है तो आप comment box के माध्यम से पूछ सकते हैं|

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 करना चाहते हैं तो हमसे संपर्क करें