कैसे HTML कोडिंग के जरिए एक कैलकुलेटर बनाएँ (Create a Calculator Using HTML)

आर्टिकल डाउनलोड करें
आर्टिकल डाउनलोड करें

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

विधि 1
विधि 1 का 4:

अपने कोड को समझना (Understanding Your Code)

आर्टिकल डाउनलोड करें
  1. How.com.vn हिन्द: Step 1 हर एक HTML फंक्शन के काम करने के तरीके को सीखें:
    कैलकुलेटर बनाने में इस्तेमाल किए जाने वाले कोड को कई सारे सिंटेक्स से बनाया जाएगा, जो एक-साथ मिलकर काम कर के एक डॉक्यूमेंट के अलग-अलग एलीमेंट को डिफ़ाइन करेंगे। इस प्रोसेस को ठीक तरह से समझने के लिए यहाँ क्लिक करें या फिर आपके द्वारा अपना कैलकुलेटर बनाने में इस्तेमाल की जाने वाली कोड की हर एक लाइन के द्वारा किए जाने वाले काम को जानने के लिए, पढ़ना जारी रखें।
    • html: ये सिंटेक्स, बाकी के डॉक्यूमेंट को बताएगा कि कोड में किस लेंग्वेज (प्रोग्रामिंग लेंग्वेज) का इस्तेमाल किया जा रहा है। कोडिंग में, कोड बनाने के लिए कई तरह की लेंग्वेज का यूज किया जाता है और <html> बाकी के डॉक्यूमेंट को बताता है कि इसे किस लेंग्वेज में लिखा जा रहा है - जी हाँ आपने सही अनुमान लगाया, HTML में ही लिखा जा रहा है।[१]
    • head: ये डॉक्यूमेंट को बताता है कि इसके नीचे का सब कुछ डेटा के बारे में डेटा है, इसे "मेटाडेटा (metadata)" की तरह भी पहचाना जाता है। <head> कमांड को आमतौर पर डॉक्यूमेंट के स्टाइलिस्टिक एलीमेंट्स, जैसे कि टाइटल्स, हेडिंग्स और इसी तरह के दूसरे एलीमेंट्स को डिफ़ाइन करने के लिए इस्तेमाल किया जाता है। इसे एक छाते की तरह सोचें, जिसके नीचे का बाकी का कोड डिफ़ाइन किया गया है।[२]
    • title: ये वो जगह है, जहां आप आपके डॉक्यूमेंट के टाइटल को एक नाम देंगे। इस एट्रिब्यूट का इस्तेमाल HTML ब्राउज़र में ओपन होने पर डॉक्यूमेंट को एक नाम के साथ डिफ़ाइन करने के लिए किया जाएगा।
    • body bgcolor= "#": ये एट्रिब्यूट कोड के बैकग्राउंड और बॉडी के कलर को सेट करता है। # के बाद में इन कोट्स का नंबर प्रीडिटरमाइन कलर (या पहले से सेट कलर) को दर्शाता है।
    • text= "": इन कोट्स के सेट में मौजूद शब्द डॉक्यूमेंट के टेक्स्ट के लिए कलर सेट करता है।
    • form name="": ये एट्रिब्यूट एक फॉर्म के नेम को दर्शाता है, जिसे जावास्क्रिप्ट (Javascript) में पहले से तय उस फॉर्म के नाम के मायने के आधार पर एक स्ट्रक्चर तैयार करने के लिए इस्तेमाल किया जाएगा। जैसे, यहाँ पर हम फॉर्म के नेम में कैलकुलेटर यूज करेंगे, जो उस डॉक्यूमेंट के लिए एक स्पेसिफिक स्ट्रक्चर तैयार कर देगा।[३]
    • input type="": यही वो जगह है, जहां पर सारे काम होते हैं। "input type" एट्रिब्यूट डॉक्यूमेंट को बताता है कि बाकी के ब्रैकेट्स में किस तरह की टेक्स्ट वैल्यू रहेगी। जैसे, वो एक पासवर्ड, एक बटन (जैसे कि ये एक कैलकुलेटर के लिए रहेगी) और भी चाहे कुछ भी एंटर कर सकते हैं।[४]
    • value="": ये कमांड डॉक्यूमेंट को बताएगी कि ऊपर दर्शाए इनपुट में क्या मौजूद होगा। एक कैलकुलेटर के लिए, ये हमारे नंबर (1 से 9) और ऑपरेशन (+,-,*,/,=) की तरह दिखता है।[५]
    • onClick="": ये सिंटेक्स एक इवेंट को डिस्क्राइब करता है, जो बताता है कि बटन को क्लिक करने पर कुछ होना चाहिए। एक कैलकुलेटर के लिए, हमें हर एक बटन के लिए डिस्प्ले होने वाले पार्ट को उसी तरह से समझने लायक बनाना होगा। इसलिए, "6" बटन के लिए, हम कोट्स के बीच में document.calculator.ans.value+='6' लिखेंगे।[६]
    • br: ये टैग डॉक्यूमेंट में एक लाइन ब्रेक लगा देता है, इसलिए इसके बाद में जो भी दिखता है, वो उसके पहले वाली लाइन के एक लाइन बाद सामने दिखेगा।[७]
    • /form, /body, and /html: ये कमांड डॉक्यूमेंट को बताती है कि पहले डॉक्यूमेंट में शुरू की हुई कमांड, अब बंद या खत्म हो रही है।[८]
विधि 2
विधि 2 का 4:

बेसिक HTML कैलकुलेटर कोड (Basic HTML Calculator Code)

आर्टिकल डाउनलोड करें
  1. How.com.vn हिन्द: Step 1 नीचे दिए कोड को कॉपी करें:
    नीचे दिए बॉक्स के टॉप-लेफ्ट कॉर्नर में कर्सर को होल्ड करके और फिर उसे बॉक्स के बॉटम-राइट कॉर्नर में ड्रैग करें, ताकि सारा टेक्स्ट ब्लू कलर का हो जाए, इस तरह से बॉक्स के अंदर मौजूद कोड को हाइलाइट करें। फिर, मैक पर "Command+C" दबाएँ या फिर पीसी पर "Ctrl+C" दबाकर कोड को क्लिपबोर्ड पर कॉपी कर लें।
<html><head><title>HTML Calculator</title></head><body bgcolor= "#000000" text= "gold"><form name="calculator" ><input type="button" value="1" onClick="document.calculator.ans.value+='1'"><input type="button" value="2" onClick="document.calculator.ans.value+='2'"><input type="button" value="3" onClick="document.calculator.ans.value+='3'"><br><input type="button" value="4" onClick="document.calculator.ans.value+='4'"><input type="button" value="5" onClick="document.calculator.ans.value+='5'"><input type="button" value="6" onClick="document.calculator.ans.value+='6'"><input type="button" value="7" onClick="document.calculator.ans.value+='7'"><br><input type="button" value="8" onClick="document.calculator.ans.value+='8'"><input type="button" value="9" onClick="document.calculator.ans.value+='9'"><input type="button" value="-" onClick="document.calculator.ans.value+='-'"><input type="button" value="+" onClick="document.calculator.ans.value+='+'"><br><input type="button" value="*" onClick="document.calculator.ans.value+='*'"><input type="button" value="/" onClick="document.calculator.ans.value+='/'"><input type="button" value="0" onClick="document.calculator.ans.value+='0'"><input type="reset" value="Reset"><input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"><br>Solution is <input type="textfield" name="ans" value=""></form></body></html>
विधि 3
विधि 3 का 4:

अपना कैलकुलेटर बनाना (Creating Your Calculator)

आर्टिकल डाउनलोड करें
  1. How.com.vn हिन्द: Step 1 अपने कंप्यूटर में...
    अपने कंप्यूटर में एक टेक्स्ट एडिटिंग प्रोग्राम ओपन करें: ऐसे कई सारे प्रोग्राम हैं, जिन्हें आप यूज कर सकते हैं, लेकिन अपनी सहूलियत और क्वालिटी के लिए, हम टेक्स्टएडिट (TextEdit) या नोपैड (Notepad) इस्तेमाल करने की सलाह देंगे।[९][१०]
    • मैक पर, स्क्रीन के टॉप-राइट कॉर्नर में मौजूद मैग्निफ़ाइंग ग्लास को क्लिक करके, स्पॉटलाइट (Spotlight) ओपन करें। यहाँ पहुंचने के बाद, TextEdit टाइप करें और TextEdit प्रोग्राम पर क्लिक करें, जिसे अब नीले में हाइलाइट हो जाना चाहिए।
    • एक पीसी पर, अपनी स्क्रीन के बॉटम-लेफ्ट कॉर्नर में मौजूद स्टार्ट (Start) मेनू ओपन करें। सर्च बार में, Notepad टाइप करें और राइट साइड में दिखने वाले रिजल्ट्स में Notepad एप्लिकेशन को क्लिक करें।
  2. How.com.vn हिन्द: Step 2 कैलकुलेटर के लिए...
    कैलकुलेटर के लिए दिए कोड को डॉक्यूमेंट में पेस्ट करें।
    • मैक पर, डॉक्यूमेंट की बॉडी पर क्लिक करें और "Command+V" प्रैस करें। फिर आपको आपकी स्क्रीन के टॉप में मौजूद "Format" पर क्लिक करना होगा और कोड को पेस्ट करने के बाद "Make Plain Text" क्लिक करना होगा।[११]
    • पीसी पर, डॉक्यूमेंट की बॉडी पर क्लिक करें और "Ctrl+V" प्रैस करें।
  3. How.com.vn हिन्द: Step 3 फ़ाइल को सेव करें:
    ऐसा करने के लिए, विंडो के टॉप-लेफ्ट हैंड में मौजूद "File" बटन पर क्लिक करें और फिर सामने आए ड्रॉप-डाउन में से, पीसी पर "Save As..." पर क्लिक करें या फिर मैक में "Save..." पर क्लिक करें।
  4. How.com.vn हिन्द: Step 4 फ़ाइल नेम में एक HTML एक्सटैन्शन एड करें:
    "Save As..." मेनू में, अपना फ़ाइल नेम के बाद में ".html" टाइप करें और फिर "Save" क्लिक करें। जैसे, अगर आप उस फ़ाइल को my first calculator नाम देना चाहते हैं, तो आप यहाँ "MyFirstCalculator.html" टाइप करेंगे।
विधि 4
विधि 4 का 4:

अपने कैलकुलेटर का इस्तेमाल करना (Using Your Calculator)

आर्टिकल डाउनलोड करें
  1. How.com.vn हिन्द: Step 1 आपके द्वारा अभी तैयार की गई फ़ाइल को तलाशें:
    ऐसा करने के लिए, स्पॉटलाइट में या फिर स्टार्ट मेनू के सर्च बार में, ठीक पिछले स्टेप में दर्शाए अनुसार अपनी फ़ाइल के नाम को सर्च करें। यहाँ पर आपको "html" एक्सटैन्शन टाइप करने की जरूरत नहीं है।
  2. How.com.vn हिन्द: Step 2 अपनी फ़ाइल को खोलने के लिए, उस पर क्लिक करें:
    आपका डिफ़ाल्ट ब्राउज़र अब एक नए वेबपेज में आपके कैलकुलेटर को ओपन कर देगा।
  3. How.com.vn हिन्द: Step 3 कैलकुलेटर को यूज...
    कैलकुलेटर को यूज करने के लिए उस पर दिए बटन को क्लिक करें: आपके इक्वेशन का सलुशन, सलुशन बार में दिखाई देगा।

सलाह

  • अगर आप चाहें तो, इस कैलकुलेटर को आप एक वेब पेज में भी एम्बेड कर सकते हैं।
  • आप चाहें तो कैलकुलेटर के लुक को चेंज करने के लिए HTML स्टाइलिंग भी यूज कर सकते हैं।

संबंधित लेखों

How.com.vn हिन्द: अपने सिम कार्ड से अपना मोबाइल नंबर पता करें
कैसे
अपने सिम कार्ड से अपना मोबाइल नंबर पता करें
How.com.vn हिन्द: उस व्यक्ति को कॉल करें जिसने आपका नंबर ब्लॉक कर दिया है (Call a Person That Has Blocked Your Number)
कैसे
उस व्यक्ति को कॉल करें जिसने आपका नंबर ब्लॉक कर दिया है (Call a Person That Has Blocked Your Number)
How.com.vn हिन्द: यूट्यूब से गाने डाउनलोड करें (Kaise YouTube se Gaane Download Kare)
कैसे
यूट्यूब से गाने डाउनलोड करें (Kaise YouTube se Gaane Download Kare)
How.com.vn हिन्द: इंस्टाग्राम पासवर्ड रीसेट करें (Reset Your Instagram Password)
कैसे
इंस्टाग्राम पासवर्ड रीसेट करें (Reset Your Instagram Password)
How.com.vn हिन्द: इंस्टाग्राम पर किसी लड़की से बात शुरू करें (Start a Conversation with a Girl on Instagram)
कैसे
इंस्टाग्राम पर किसी लड़की से बात शुरू करें (Start a Conversation with a Girl on Instagram)
How.com.vn हिन्द: इंस्टाग्राम अकाउंट को डिलीट करें
कैसे
इंस्टाग्राम अकाउंट को डिलीट करें
How.com.vn हिन्द: फोटो की मदद से किसी की खोज करें (Search and Find About Someone Using Image Easily)
कैसे
फोटो की मदद से किसी की खोज करें (Search and Find About Someone Using Image Easily)
How.com.vn हिन्द: लड़कियों से ऑनलाइन बातें करें (Talk to Girls Online)
कैसे
लड़कियों से ऑनलाइन बातें करें (Talk to Girls Online)
How.com.vn हिन्द: एंड्राइड में सेफ मोड बंद करें
कैसे
एंड्राइड में सेफ मोड बंद करें
How.com.vn हिन्द: व्हाट्सएप के लिए फेक नंबर पाएँ (Get a Fake Number for WhatsApp)WhatsApp टिप्स: फेक नंबर से व्हाट्सअप चलायें
How.com.vn हिन्द: फ्री म्यूजिक डाउनलोड करें (Kaise Free Music, Gaane Download Kare)
कैसे
फ्री म्यूजिक डाउनलोड करें (Kaise Free Music, Gaane Download Kare)
How.com.vn हिन्द: ब्लॉक (block) किए हुये नंबर पर वापस कॉल करें
कैसे
ब्लॉक (block) किए हुये नंबर पर वापस कॉल करें
How.com.vn हिन्द: बंद हुए फेसबुक अकाउंट को वापस शुरू करें (Recover a Disabled Facebook Account)
कैसे
बंद हुए फेसबुक अकाउंट को वापस शुरू करें (Recover a Disabled Facebook Account)
How.com.vn हिन्द: PC में हिंदी में टाइप करें (Type in Hindi on a PC)
कैसे
PC में हिंदी में टाइप करें (Type in Hindi on a PC)

रेफरेन्स

  1. ↑ http://www.w3schools.com/html/html_basic.asp
  2. ↑ http://www.w3schools.com/html/html_head.asp
  3. ↑ http://www.w3schools.com/html/html_formatting.asp
  4. ↑ http://www.w3schools.com/tags/att_input_type.asp
  5. ↑ http://www.w3schools.com/tags/att_input_value.asp
  6. ↑ http://www.w3schools.com/tags/ref_eventattributes.asp
  7. ↑ http://www.w3schools.com/tags/tag_br.asp
  8. ↑ http://www.w3schools.com/html/html_forms.asp
  9. ↑ http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786
  1. ↑ http://webdesign.about.com/od/notepad/a/aa040501a.htm
  2. ↑ http://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit/

विकीहाउ के बारे में

How.com.vn हिन्द: विकीहाउ स्टाफ
सहयोगी लेखक द्वारा:
विकीहाउ स्टाफ
विकीहाउ स्टॉफ राइटर
इस आर्टिकल के सहायक लेखक (co-author) हमारी बहुत ही अनुभवी एडिटर और रिसर्चर्स (researchers) टीम से हैं जो इस आर्टिकल में शामिल प्रत्येक जानकारी की सटीकता और व्यापकता की अच्छी तरह से जाँच करते हैं।

How.com.vn's Content Management Team बहुत ही सावधानी से हमारे एडिटोरियल स्टाफ (editorial staff) द्वारा किये गए कार्य को मॉनिटर करती है ये सुनिश्चित करने के लिए कि सभी आर्टिकल्स में दी गई जानकारी उच्च गुणवत्ता की है कि नहीं। यह आर्टिकल ७,२९८ बार देखा गया है।
श्रेणियाँ: कंप्यूटर और इलेक्ट्रॉनिक्स
अन्य भाषाओं में
सभी लेखकों को यह पृष्ठ बनाने के लिए धन्यवाद दें जो ७,२९८ बार पढ़ा गया है।

यह लेख ने कैसे आपकी मदद की?