कंप्यूटर पर पहले से मौजूद एक बिल्ट-इन कैलकुलेटर का इस्तेमाल करने की तरह, आपके सामने सारे मैथ कैलकुलेशन करने के कई सारे तरीके मौजूद हैं, लेकिन सिम्पल HTML कोड में अपना खुद का कैलकुलेटर तैयार करके, कैलकुलेशन करने की बात ही अलग है। HTML का इस्तेमाल करके फिर एक कैलकुलेटर बनाने के लिए, HTML के बारे में कुछ बेसिक्स सीख लें, फिर जरूरी कोड को एक टेक्स्ट एडिटर में कॉपी करें और उसे HTML एक्सटैन्शन के साथ सेव कर लें। आप फिर आपके फेवरिट ब्राउज़र में उस HTML डॉक्यूमेंट को ओपन करके, अपने कैलकुलेटर का इस्तेमाल कर सकते हैं। ऐसा करके न केवल आप एक ब्राउज़र में मैथ्स कर पाएंगे, बल्कि आपको कोडिंग स्किल के कुछ फंडामेंटल्स की भी सीख मिलेगी!
[संपादन करें]चरण
[संपादन करें]अपने कोड को समझना (Understanding Your Code)
- हर एक HTML फंक्शन के काम करने के तरीके को सीखें: कैलकुलेटर बनाने में इस्तेमाल किए जाने वाले कोड को कई सारे सिंटेक्स से बनाया जाएगा, जो एक-साथ मिलकर काम कर के एक डॉक्यूमेंट के अलग-अलग एलीमेंट को डिफ़ाइन करेंगे। इस प्रोसेस को ठीक तरह से समझने के लिए यहाँ क्लिक करें या फिर आपके द्वारा अपना कैलकुलेटर बनाने में इस्तेमाल की जाने वाली कोड की हर एक लाइन के द्वारा किए जाने वाले काम को जानने के लिए, पढ़ना जारी रखें।
![Create a Calculator Using HTML Step 1 Version 3.jpg]()
- 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: ये कमांड डॉक्यूमेंट को बताती है कि पहले डॉक्यूमेंट में शुरू की हुई कमांड, अब बंद या खत्म हो रही है।[८]
[संपादन करें]बेसिक HTML कैलकुलेटर कोड (Basic HTML Calculator Code)
- नीचे दिए कोड को कॉपी करें: नीचे दिए बॉक्स के टॉप-लेफ्ट कॉर्नर में कर्सर को होल्ड करके और फिर उसे बॉक्स के बॉटम-राइट कॉर्नर में ड्रैग करें, ताकि सारा टेक्स्ट ब्लू कलर का हो जाए, इस तरह से बॉक्स के अंदर मौजूद कोड को हाइलाइट करें। फिर, मैक पर "Command+C" दबाएँ या फिर पीसी पर "Ctrl+C" दबाकर कोड को क्लिपबोर्ड पर कॉपी कर लें।
![Create a Calculator Using HTML Step 2 Version 4.jpg]()
[संपादन करें]अपना कैलकुलेटर बनाना (Creating Your Calculator)
- अपने कंप्यूटर में एक टेक्स्ट एडिटिंग प्रोग्राम ओपन करें: ऐसे कई सारे प्रोग्राम हैं, जिन्हें आप यूज कर सकते हैं, लेकिन अपनी सहूलियत और क्वालिटी के लिए, हम टेक्स्टएडिट (TextEdit) या नोपैड (Notepad) इस्तेमाल करने की सलाह देंगे।[९][१०]
![Create a Calculator Using HTML Step 3 Version 4.jpg]()
- मैक पर, स्क्रीन के टॉप-राइट कॉर्नर में मौजूद मैग्निफ़ाइंग ग्लास को क्लिक करके, स्पॉटलाइट (Spotlight) ओपन करें। यहाँ पहुंचने के बाद, TextEdit टाइप करें और TextEdit प्रोग्राम पर क्लिक करें, जिसे अब नीले में हाइलाइट हो जाना चाहिए।
- एक पीसी पर, अपनी स्क्रीन के बॉटम-लेफ्ट कॉर्नर में मौजूद स्टार्ट (Start) मेनू ओपन करें। सर्च बार में, Notepad टाइप करें और राइट साइड में दिखने वाले रिजल्ट्स में Notepad एप्लिकेशन को क्लिक करें।
- कैलकुलेटर के लिए दिए कोड को डॉक्यूमेंट में पेस्ट करें।
![Create a Calculator Using HTML Step 4 Version 4.jpg]()
- मैक पर, डॉक्यूमेंट की बॉडी पर क्लिक करें और "Command+V" प्रैस करें। फिर आपको आपकी स्क्रीन के टॉप में मौजूद "Format" पर क्लिक करना होगा और कोड को पेस्ट करने के बाद "Make Plain Text" क्लिक करना होगा।[११]
- पीसी पर, डॉक्यूमेंट की बॉडी पर क्लिक करें और "Ctrl+V" प्रैस करें।
- फ़ाइल को सेव करें: ऐसा करने के लिए, विंडो के टॉप-लेफ्ट हैंड में मौजूद "File" बटन पर क्लिक करें और फिर सामने आए ड्रॉप-डाउन में से, पीसी पर "Save As..." पर क्लिक करें या फिर मैक में "Save..." पर क्लिक करें।
![Create a Calculator Using HTML Step 5 Version 2.jpg]()
- फ़ाइल नेम में एक HTML एक्सटैन्शन एड करें: "Save As..." मेनू में, अपना फ़ाइल नेम के बाद में ".html" टाइप करें और फिर "Save" क्लिक करें। जैसे, अगर आप उस फ़ाइल को my first calculator नाम देना चाहते हैं, तो आप यहाँ "MyFirstCalculator.html" टाइप करेंगे।
![Create a Calculator Using HTML Step 6 Version 2.jpg]()
[संपादन करें]अपने कैलकुलेटर का इस्तेमाल करना (Using Your Calculator)
- आपके द्वारा अभी तैयार की गई फ़ाइल को तलाशें: ऐसा करने के लिए, स्पॉटलाइट में या फिर स्टार्ट मेनू के सर्च बार में, ठीक पिछले स्टेप में दर्शाए अनुसार अपनी फ़ाइल के नाम को सर्च करें। यहाँ पर आपको "html" एक्सटैन्शन टाइप करने की जरूरत नहीं है।
![Create a Calculator Using HTML Step 7 Version 2.jpg]()
- अपनी फ़ाइल को खोलने के लिए, उस पर क्लिक करें: आपका डिफ़ाल्ट ब्राउज़र अब एक नए वेबपेज में आपके कैलकुलेटर को ओपन कर देगा।
![Create a Calculator Using HTML Step 8 Version 2.jpg]()
- कैलकुलेटर को यूज करने के लिए उस पर दिए बटन को क्लिक करें: आपके इक्वेशन का सलुशन, सलुशन बार में दिखाई देगा।
![Create a Calculator Using HTML Step 9 Version 2.jpg]()
[संपादन करें]सलाह
- अगर आप चाहें तो, इस कैलकुलेटर को आप एक वेब पेज में भी एम्बेड कर सकते हैं।
- आप चाहें तो कैलकुलेटर के लुक को चेंज करने के लिए HTML स्टाइलिंग भी यूज कर सकते हैं।
[संपादन करें]रेफरेन्स
- ↑ http://www.w3schools.com/html/html_basic.asp
- ↑ http://www.w3schools.com/html/html_head.asp
- ↑ http://www.w3schools.com/html/html_formatting.asp
- ↑ http://www.w3schools.com/tags/att_input_type.asp
- ↑ http://www.w3schools.com/tags/att_input_value.asp
- ↑ http://www.w3schools.com/tags/ref_eventattributes.asp
- ↑ http://www.w3schools.com/tags/tag_br.asp
- ↑ http://www.w3schools.com/html/html_forms.asp
- ↑ http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786
- ↑ http://webdesign.about.com/od/notepad/a/aa040501a.htm
- ↑ http://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit/