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

आर्टिकल डाउनलोड करें
सहयोगी लेखक द्वारा विकीहाउ स्टाफ

रेफरेन्स

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

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

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

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

आर्टिकल डाउनलोड करें
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    कैलकुलेटर बनाने में इस्तेमाल किए जाने वाले कोड को कई सारे सिंटेक्स से बनाया जाएगा, जो एक-साथ मिलकर काम कर के एक डॉक्यूमेंट के अलग-अलग एलीमेंट को डिफ़ाइन करेंगे। इस प्रोसेस को ठीक तरह से समझने के लिए यहाँ क्लिक करें या फिर आपके द्वारा अपना कैलकुलेटर बनाने में इस्तेमाल की जाने वाली कोड की हर एक लाइन के द्वारा किए जाने वाले काम को जानने के लिए, पढ़ना जारी रखें।
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    नीचे दिए बॉक्स के टॉप-लेफ्ट कॉर्नर में कर्सर को होल्ड करके और फिर उसे बॉक्स के बॉटम-राइट कॉर्नर में ड्रैग करें, ताकि सारा टेक्स्ट ब्लू कलर का हो जाए, इस तरह से बॉक्स के अंदर मौजूद कोड को हाइलाइट करें। फिर, मैक पर "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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    अपने कंप्यूटर में एक टेक्स्ट एडिटिंग प्रोग्राम ओपन करें: ऐसे कई सारे प्रोग्राम हैं, जिन्हें आप यूज कर सकते हैं, लेकिन अपनी सहूलियत और क्वालिटी के लिए, हम टेक्स्टएडिट (TextEdit) या नोपैड (Notepad) इस्तेमाल करने की सलाह देंगे। [९] [१०]
    • मैक पर, स्क्रीन के टॉप-राइट कॉर्नर में मौजूद मैग्निफ़ाइंग ग्लास को क्लिक करके, स्पॉटलाइट (Spotlight) ओपन करें। यहाँ पहुंचने के बाद, TextEdit टाइप करें और TextEdit प्रोग्राम पर क्लिक करें, जिसे अब नीले में हाइलाइट हो जाना चाहिए।
    • एक पीसी पर, अपनी स्क्रीन के बॉटम-लेफ्ट कॉर्नर में मौजूद स्टार्ट (Start) मेनू ओपन करें। सर्च बार में, Notepad टाइप करें और राइट साइड में दिखने वाले रिजल्ट्स में Notepad एप्लिकेशन को क्लिक करें।
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    कैलकुलेटर के लिए दिए कोड को डॉक्यूमेंट में पेस्ट करें।
    • मैक पर, डॉक्यूमेंट की बॉडी पर क्लिक करें और "Command+V" प्रैस करें। फिर आपको आपकी स्क्रीन के टॉप में मौजूद "Format" पर क्लिक करना होगा और कोड को पेस्ट करने के बाद "Make Plain Text" क्लिक करना होगा। [११]
    • पीसी पर, डॉक्यूमेंट की बॉडी पर क्लिक करें और "Ctrl+V" प्रैस करें।
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ऐसा करने के लिए, विंडो के टॉप-लेफ्ट हैंड में मौजूद "File" बटन पर क्लिक करें और फिर सामने आए ड्रॉप-डाउन में से, पीसी पर "Save As..." पर क्लिक करें या फिर मैक में "Save..." पर क्लिक करें।
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    "Save As..." मेनू में, अपना फ़ाइल नेम के बाद में ".html" टाइप करें और फिर "Save" क्लिक करें। जैसे, अगर आप उस फ़ाइल को my first calculator नाम देना चाहते हैं, तो आप यहाँ "MyFirstCalculator.html" टाइप करेंगे।
विधि 4
विधि 4 का 4:

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

आर्टिकल डाउनलोड करें
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ऐसा करने के लिए, स्पॉटलाइट में या फिर स्टार्ट मेनू के सर्च बार में, ठीक पिछले स्टेप में दर्शाए अनुसार अपनी फ़ाइल के नाम को सर्च करें। यहाँ पर आपको "html" एक्सटैन्शन टाइप करने की जरूरत नहीं है।
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    आपका डिफ़ाल्ट ब्राउज़र अब एक नए वेबपेज में आपके कैलकुलेटर को ओपन कर देगा।
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    कैलकुलेटर को यूज करने के लिए उस पर दिए बटन को क्लिक करें: आपके इक्वेशन का सलुशन, सलुशन बार में दिखाई देगा।

सलाह

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

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

कैसे
अपने सिम कार्ड से अपना मोबाइल नंबर पता करें
कैसे
उस व्यक्ति को कॉल करें जिसने आपका नंबर ब्लॉक कर दिया है (Call a Person That Has Blocked Your Number)
कैसे
इंस्टाग्राम पासवर्ड रीसेट करें (Reset Your Instagram Password)
कैसे
इंस्टाग्राम पर किसी लड़की से बात शुरू करें (Start a Conversation with a Girl on Instagram)
कैसे
ब्लॉक (block) किए हुये नंबर पर वापस कॉल करें
कैसे
Pirate Bay से डाउनलोड करें (Download from Pirate Bay)
WhatsApp टिप्स: फेक नंबर से व्हाट्सअप चलायें
कैसे
फोटो की मदद से किसी की खोज करें (Search and Find About Someone Using Image Easily)
कैसे
यूट्यूब से गाने डाउनलोड करें (Kaise YouTube se Gaane Download Kare)
कैसे
PC में हिंदी में टाइप करें (Type in Hindi on a PC)
कैसे
लड़कियों से ऑनलाइन बातें करें (Talk to Girls Online)
कैसे
एंड्राइड में सेफ मोड बंद करें
कैसे
HTML का इस्तेमाल करके एक वेब पेज तैयार करें (Create a Simple Web Page with HTML)
क्रोम पर एडल्ट कॉन्टेंट ब्लॉक करने के 4 आसान तरीके

रेफरेन्स

  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/

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

अन्य भाषाओं में
सभी लेखकों को यह पृष्ठ बनाने के लिए धन्यवाद दें जो ७,६११ बार पढ़ा गया है।

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