HTML5 के साथ आरंभ करें

HTML5 के साथ आरंभ करें
यह गाइड एक मुफ्त पीडीएफ के रूप में डाउनलोड करने के लिए उपलब्ध है। इस फाइल को अभी डाउनलोड करें . बेझिझक इसे कॉपी करें और अपने दोस्तों और परिवार के साथ साझा करें।

विषयसूची

§1 परिचय





2-सिमेंटिक मार्कअप





3–फॉर्म





4 - मध्यम

§5–CSS3 रूपांतरण और एनिमेशन



6-बस पर्याप्त जावास्क्रिप्ट

§7-रचनात्मक कैनवास





8–आगे कहाँ?

1 परिचय

आपने इसके बारे में सुना है: HTML5। हर कोई इसका इस्तेमाल कर रहा है। इसे इंटरनेट के तारणहार के रूप में घोषित किया जा रहा है, जिससे लोग फ्लैश और शॉकवेव का उपयोग किए बिना समृद्ध, आकर्षक वेब पेज बना सकते हैं।





लेकिन वास्तव में यह क्या है?

खैर, इसका जवाब देना आसान सवाल नहीं है। इस HTML5 ट्यूटोरियल में, हम कुछ उत्तर देने का प्रयास करेंगे। HTML5 का उपयोग चीजों के वास्तव में विविध समूह का वर्णन करने के लिए किया जाता है। यह वेब पेज लिखने का एक मानक है। यह एपीआई का एक संग्रह है। यह वेब पेजों में अन्तरक्रियाशीलता जोड़ने का एक नया तरीका है।

HTML5 वह सब और बहुत कुछ है। तो यह किताब किस बारे में है?

इस HTML5 ट्यूटोरियल में, मैं यह मानने जा रहा हूँ कि आपने किसी समय HTML और CSS को छुआ है। शायद आपने अपनी खुद की वर्डप्रेस थीम बना ली है, या माइस्पेस लेआउट को दिन में संपादित किया है। शायद आपने MakeUseOf की स्वयं की XHTML मार्गदर्शिका पढ़ ली हो। मुद्दा यह है, मैं यह मान रहा हूं कि आप एक वेब पेज के आसपास अपना रास्ता जानते हैं और इस गाइड में हम जो चर्चा करते हैं वह आपके लिए बहुत अलग नहीं होगा।

इस गाइड का उद्देश्य आपको संपूर्ण HTML5 सिखाना नहीं है। यह पूरी तरह से इस पुस्तक के दायरे से बाहर होगा। इसका उद्देश्य इन अद्भुत नई वेब तकनीकों का एक सौम्य परिचय प्रदान करना है, और आपको उन्हें अपनी वेबसाइटों में शामिल करने के कुछ शानदार तरीके दिखाना है।

आप HTML5 क्यों सीखना चाहेंगे?

वाजिब सवाल है। स्मार्टफोन और ऐप्स की दुनिया में, क्या वेब पेजों को प्रोग्राम करना सीखना वाकई महत्वपूर्ण है?

खैर, मानो या न मानो, HTML5 तकनीकों का उपयोग करके स्मार्टफोन एप्लिकेशन लिखना वास्तव में आम है। कुछ समय पहले तक, Android के लिए Facebook ऐप को HTML5, CSS और Javascript का उपयोग करके लिखा जाता था।

ब्लैकबेरी एक और बड़ी कंपनी है जो एचटीएमएल 5 पर बेहद उत्सुक है। यह उनके मोबाइल ऑपरेटिंग सिस्टम, ब्लैकबेरी ओएस 10 के नवीनतम पुनरावृत्ति में स्पष्ट है, जहां वे सक्रिय रूप से डेवलपर्स को वेब प्रौद्योगिकियों का उपयोग करके अपने फोन के लिए एप्लिकेशन विकसित करने के लिए प्रोत्साहित कर रहे हैं।

नए Firefox OS स्मार्टफोन पूरी तरह से HTML5 ऐप्स पर भी चलते हैं। आज के स्मार्टफोन माहौल में HTML5 का कार्यसाधक ज्ञान आवश्यक है।

इसके अलावा, HTML5 सीखना आपके करियर के लिए अच्छा है। मेरा विश्वास मत करो? इंडिड डॉट कॉम के मुताबिक , एक HTML5 डेवलपर के लिए औसत वार्षिक वेतन $८९,००० है। HTML5 तकनीकों का उपयोग करने के लिए अधिक से अधिक कंपनियां अपनी वेबसाइटों को बदलने के साथ, HTML5 स्टैक को जानने वाले डेवलपर्स की मांग की जाती है - अब पहले से कहीं अधिक।

१.१ पूर्वापेक्षाएँ

यह HTML5 ट्यूटोरियल कुछ चीजों को मानता है। सबसे पहले, यह मानता है कि आप जानते हैं कि वेब कैसे काम करता है, और यह कि आप एक बुनियादी वेब पेज बनाना जानते हैं। आपको कुछ HTML तत्वों को एक साथ जोड़ने और वेब ब्राउज़र में कुछ जानकारी प्रस्तुत करने में सक्षम होना चाहिए। देखना और

टैग बहुत कठिन नहीं हैं, और आप किसी स्रोत कोड में अपने हाथ गंदे होने से नहीं डरते।

दूसरे, यह मार्गदर्शिका मानती है कि आप जानते हैं कि CSS क्या है और यह कैसे काम करता है। हम आपसे डिज़ाइन जीनियस होने की उम्मीद नहीं करते हैं, न ही आपसे यह उम्मीद की जाती है कि आप अपने हाथ के पीछे से संपूर्ण CSS विनिर्देशन को जान सकें। हालांकि, आपको वेब पेज पर किसी तत्व पर स्टाइल लागू करने में सक्षम होना चाहिए, एक सीएसएस फ़ाइल से लिंक करने में सक्षम होना चाहिए और एक आईडी और एक वर्ग के बीच के अंतर को जानना चाहिए और उनमें से प्रत्येक पर स्टाइल कैसे लागू करना चाहिए।

यदि आप ऊपर से अपना सिर खुजला रहे हैं, तो चिंता न करें। HTML और CSS के बारे में सबसे अच्छी चीजों में से एक यह है कि यह वास्तव में बहुत आसान है। वास्तव में, MakeUseOf के पास एक अविश्वसनीय XHTML मार्गदर्शिका है जो आपको वास्तव में तेज़ गति प्रदान करेगी।

उस गाइड को पढ़ने के बाद, आप निम्नलिखित लेखों पर भी एक नज़र डालना चाहेंगे:

आपको एक आधुनिक टेक्स्ट एडिटर और ब्राउज़र की भी आवश्यकता होगी। इंटरनेट एक्सप्लोरर का कोई भी संस्करण जो आईई 9 से पुराना है और सफारी, क्रोम और फ़ायरफ़ॉक्स के कुछ पुराने संस्करण एचटीएमएल 5 का हिस्सा हैं और आपको इस गाइड का पालन करने से रोक सकते हैं।

परिणामस्वरूप, आपको एक आधुनिक ब्राउज़र डाउनलोड करने के लिए प्रोत्साहित किया जाता है। मैं Google Chrome की अनुशंसा करता हूं, और मैं प्रत्येक उदाहरण में इसका उपयोग करूंगा।

इसके अलावा, आपको केवल सीखने की इच्छा की आवश्यकता है। ओह, और एक टेक्स्ट एडिटर।

1.2 वेब विकास के लिए पाठ संपादक

आपका टेक्स्ट एडिटर वह है जिसे आप अपना कोड लिखने के लिए उपयोग करने जा रहे हैं। आप सोच रहे होंगे कि टेक्स्ट एडिटर क्या होता है।

खैर, सबसे पहले यह एक वर्ड प्रोसेसर नहीं है। Microsoft Word और Apple के पेज जैसे प्रोग्राम वेब विकास के लिए पूरी तरह से अनुपयुक्त हैं। ऐसा इसलिए है क्योंकि वे आपके एचटीएमएल, सीएसएस और जावास्क्रिप्ट फाइलों में अतिरिक्त जानकारी संलग्न करते हैं जिससे आपके वेब ब्राउज़र को पढ़ना मुश्किल हो जाता है।

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

आपका कंप्यूटर पहले से ही एक के साथ आता है। यदि आप विंडोज पीसी का उपयोग कर रहे हैं, तो नोटपैड टेक्स्ट एडिटर है जिसे आपने इंस्टॉल किया है।

मैक पर, स्थिति थोड़ी अलग है। ओएस एक्स चार अलग-अलग टेक्स्ट एडिटर्स के साथ आता है। इन्हें विम, इमाक्स, पिको और नैनो कहा जाता है। हालांकि, नोटपैड के विपरीत, ये सभी टर्मिनल में काम करते हैं।

यह उन लोगों के लिए थोड़ा डराने वाला है जो वेब विकास के लिए नए हैं और इसका उपयोग उन लोगों द्वारा नहीं किया जाना चाहिए जो सॉफ्टवेयर विकास के लिए नए हैं। हम इस गाइड में उनका उपयोग नहीं करेंगे। हालाँकि, जब आप सॉफ़्टवेयर और वेब विकास के साथ थोड़ा अधिक आश्वस्त हो जाते हैं, तो निश्चित रूप से Vim और Emacs पर एक नज़र डालने लायक है। वे दोनों शक्तिशाली टेक्स्ट एडिटर हैं, और जब महारत हासिल हो जाती है तो आप बहुत समय बचा सकते हैं।

लिनक्स पर, डिफॉल्ट टेक्स्ट एडिटर डिस्ट्रीब्यूशन के बीच बदलता रहता है। उबंटू पर, यह संभवतः Gedit है, जो एक सुखद पाठ संपादक है जो नोटपैड से बहुत भिन्न नहीं है।

हालाँकि, इस पाठ्यक्रम में हम तीन अलग-अलग टूल का उपयोग करके अपना कोड लिखेंगे।

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

तीसरा जावास्क्रिप्ट कंसोल है जो Google क्रोम में बनाया गया है। यह हमें जावास्क्रिप्ट लिखने और इसे तुरंत चलाने की अनुमति देता है और इसका उपयोग बुनियादी प्रोग्रामिंग अवधारणाओं को समझाने के लिए किया जाएगा।

दूसरी एक वेबसाइट है जिसका नाम Codepen.io है। यह उल्लेखनीय वेबसाइट आपको ब्राउज़र में एचटीएमएल, सीएसएस और जावास्क्रिप्ट को कोड करने की अनुमति देगी और उपयोग करने के लिए स्वतंत्र है। यह आपको अपने परिवर्तनों को तुरंत देखने की अनुमति भी देगा।

2. सिमेंटिक मार्कअप

इस अध्याय में, आप सिमेंटिक मार्कअप के बारे में सीखेंगे, और अपने कोड को उसकी सामग्री के आधार पर कैसे व्यवस्थित करें।

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

यह काम किया, लेकिन सुधार की गुंजाइश थी। टैग के साथ समस्या यह थी कि यह अर्थपूर्ण नहीं था। Div का वास्तव में कोई मतलब नहीं है, वास्तव में।

HTML5 में सिमेंटिक मार्कअप एक नई सुविधा है। यह नए टैग लाता है, जो एक 'div' टैग की तरह ही काम करते हैं, लेकिन एक पेज के सामान्य भागों को टैग करने के लिए होते हैं।

तो वह कैसे काम कर रहे है? निम्नलिखित कोड पर विचार करें।

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

टीवी और मॉनिटर में क्या अंतर है

आइए MakeUseOf पर एक लेख देखें। आप देखेंगे कि पृष्ठ का एक हिस्सा अन्य लेखों पर नेविगेट करने के लिए पूरी तरह से आरक्षित है। आप यह भी देखेंगे कि पृष्ठ का एक अन्य भाग है जिसमें वे शब्द हैं जो एक लेख बनाते हैं। पृष्ठ के शीर्ष पर, आपको MakeUseOf लोगो और कुछ अन्य लिंक वाला एक शीर्षलेख दिखाई देगा।

जब आप इसके बारे में सोचते हैं, तो बहुत सी वेबसाइटें इन परंपराओं का पालन करती हैं। अधिकांश वेबसाइटों में एक हिस्सा होता है जो नेविगेशन के लिए आरक्षित होता है। उनके पास आमतौर पर सामग्री का एक शरीर होता है। उनके पास हेडर होने की संभावना से अधिक है।

सिमेंटिक टैग ऐसे टैग होते हैं जो आपको किसी वेबसाइट के उन हिस्सों को परिभाषित करने की अनुमति देते हैं जो आमतौर पर अधिकांश वेबसाइटों पर पाए जाते हैं। वे पृष्ठ में कुछ भी नहीं जोड़ते हैं, लेकिन आपको उनकी सामग्री के आधार पर टैग समूहित करने और उन समूहों पर शैली लागू करने की अनुमति देते हैं।

तो, वह कोड याद रखें जो हमारे पास पहले था? आइए इसे कुछ सिमेंटिक मार्कअप के साथ देखें।

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

तो, आइए कुछ और अर्थपूर्ण मार्कअप टैग देखें।

२.१ खंड

अनुभाग वास्तव में एक उपयोगी टैग है। इसका उपयोग बड़ी मात्रा में सूचनाओं और सामग्री को हथियाने के लिए किया जाता है जो एक शीर्षक या शीर्षक के साथ चिह्नित होते हैं। इसे किसी किताब के एक अध्याय की तरह समझें। एक अध्याय का एक शीर्षक होता है, और इसमें चित्र, आरेख, आलेख और शब्द भी हो सकते हैं। उस सब को समाहित करने के लिए एक सेक्शन टैग का उपयोग किया जाएगा।

२.२ अनुच्छेद

लेख टैग का उपयोग इसके लिए किया जाता है कि यह कैसा लगता है; ब्लॉग पोस्ट या समाचार जैसी सामग्री से युक्त। इस सामग्री को बाकी ब्लॉग से अलग करने में सक्षम होना चाहिए और अभी भी सुसंगत समझ में आना चाहिए।

२.३ एक तरफ

यह टैग उस सामग्री के लिए आरक्षित है जो संबंधित है, लेकिन वेब पेज का अभिन्न अंग नहीं है। यह तथ्यों का एक समूह हो सकता है जो किसी समाचार या ब्लॉग पर किसी उपयोगकर्ता की जीवनी से संबंधित हो।

२.४ हैडर

बहुत सारे वेब पेजों में पृष्ठ के शीर्ष पर एक बार होता है जिसमें एक लोगो होता है, साइट से संबंधित कुछ जानकारी और शायद कुछ लिंक होते हैं। सिमेंटिक मार्कअप में, आप यह सब समाहित करने के लिए एक हैडर टैग का उपयोग करेंगे।

२.५ नौसेना

यह तत्व आपकी वेबसाइट के नेविगेशन भाग के लिए आरक्षित है। इसमें अन्य वेबसाइटों या वेबसाइट के अन्य पृष्ठों के लिंक होंगे। MakeUseOf के संदर्भ में, यह पृष्ठ का वह भाग हो सकता है जो शीर्षलेख के नीचे है।

यह टैग पृष्ठ के निचले भाग के लिए आरक्षित है। यहां, आप अपने 'मेरे बारे में' पृष्ठ पर कुछ संपर्क विवरण, कॉपीराइट जानकारी, एक नक्शा या कुछ लिंक डाल सकते हैं।

२.७ स्वयं का परीक्षण करें

  • सिमेंटिक मार्कअप क्या है और इसका उपयोग किस लिए किया जाता है?
  • मैं एक वेब पेज बना रहा हूं और मैं अपने बारे में जीवनी रखने के लिए सिमेंटिक टैग का उपयोग करना चाहता हूं। मैं किसका उपयोग करता हूं?

3. प्रपत्र

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

प्रपत्र व्यापक रूप से महत्वपूर्ण हैं। वे इंटरनेट पर हमारे द्वारा की जाने वाली अधिकांश चीजों का आधार हैं। हर बार जब आप अपने पसंदीदा सोशल नेटवर्क पर स्टेटस अपडेट बनाते हैं, अमेज़ॅन से कुछ खरीदते हैं, या एक ईमेल भेजते हैं, तो आपने शायद एक HTML फॉर्म का उपयोग किया है।

जो आप शायद नहीं जानते थे वह यह है कि जिस तरह से हम प्रपत्र बनाते हैं वह HTML5 में मौलिक रूप से बदल गया है। यह भी काफी बेहतर है। इस अध्याय में, हम कुछ ऐसे अच्छे कामों पर नज़र डालने जा रहे हैं जो आप अब कर सकते हैं, बस सादे पुराने मार्कअप के साथ।

तो, HTML5 में फ़ॉर्म लिखने के नए तरीके के बारे में क्या अच्छा है? सबसे पहले, आप यह सुनिश्चित कर सकते हैं कि फॉर्म के मार्कअप को बदलकर, सबमिट करने के लिए कुछ फ़ील्ड भरे जाने चाहिए। इसके अलावा, अब आपको ऐसा करने के लिए जावास्क्रिप्ट या PHP के पहाड़ों को लिखने की आवश्यकता नहीं है। यह मामूली रूप से आसान है।

दूसरे, आप यह सुनिश्चित कर सकते हैं कि आपके उपयोगकर्ता आपके फ़ॉर्म में केवल कुछ प्रकार की जानकारी ही सबमिट कर सकते हैं। तो, मान लीजिए कि आपके पास अपनी मेलिंग सूची के लिए एक वेबसाइट है और आप केवल यह चाहते हैं कि लोग वास्तविक ईमेल पते सबमिट कर सकें? आप केवल HTML5 का उपयोग करके ऐसा कर सकते हैं। यह वास्तव में अविश्वसनीय रूप से शक्तिशाली है।

तीसरा, आप कुछ क्षेत्रों को प्लेसहोल्डर देकर अपने फॉर्म को बेहतर बना सकते हैं। यह उन्हें काफी अधिक सहज बना देगा, क्योंकि आप अपने उपयोगकर्ताओं को एक उदाहरण दिखा सकते हैं कि आप किसी फ़ॉर्म के लिए क्या अपेक्षा कर रहे हैं।

३.१ प्रपत्र में सुधार

तो, आइए एक फॉर्म को देखें और देखें कि हम इसे कैसे बेहतर बना सकते हैं।

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

तो, पहली चीज जो हम करना चाहते हैं वह यह सुनिश्चित करना है कि ईमेल फ़ील्ड केवल एक ईमेल लेता है। यह वास्तव में एक बहुत कठिन काम हुआ करता था, क्योंकि आपको सभी प्रकार के आर्केन रेगेक्स कोड बनाने होंगे। खैर, अब और नहीं। आपको बस इनपुट के प्रकार को 'टेक्स्ट' से 'ईमेल' में बदलना है। जब आप उस फ़ॉर्म को अस्पष्टता के साथ सबमिट करने का प्रयास करते हैं, तो यह शिकायत करेगा और आग्रह करेगा कि आप एक ईमेल सबमिट करें।

३.२ इनपुट प्रकार और पैटर्न

अन्य इनपुट प्रकार हैं, जिनकी आपको आवश्यकता हो सकती है। इनमें टेलीफोन नंबर, वेब पते, खोज फ़ॉर्म और यहां तक ​​कि रंग बीनने वाले भी शामिल हैं! चूंकि HTML5 लगातार विकसित हो रहा है, इसका कारण यह है कि जल्द ही हम निकट भविष्य में और अधिक इनपुट प्रकार निर्दिष्ट करने में सक्षम होंगे।

इसके अलावा, फोन नंबर जैसी चीजों के लिए जो इलाके के आधार पर भिन्न होते हैं, आप इनपुट के लिए पैटर्न निर्दिष्ट कर सकते हैं। ये 'रेगुलर एक्सप्रेशन' नामक किसी चीज़ का उपयोग करके बनाए गए हैं और बल्कि जटिल हैं, लेकिन अथाह शक्तिशाली हैं।

हम अपने क्षेत्र में एक ईमेल का एक उदाहरण भी प्रदान करना चाहते हैं, ताकि उपयोगकर्ता को इस बात की कोई अस्पष्टता न हो कि उसे क्या जमा करना है। ऐसा करना वाकई आसान है। उदाहरण ईमेल पते के साथ बस 'प्लेसहोल्डर' की एक नई विशेषता बनाएं।

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

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

यह HTML5 में रूपों की शक्ति का अविश्वसनीय रूप से संक्षिप्त परिचय था। यदि आप और अधिक पढ़ना चाहते हैं, तो मेरा सुझाव है कि आप इन लिंक्स पर जाएँ।

आगे की पढाई:

  • CSS ट्रिक्स – चलिए सिमेंटिक मार्कअप लिखते हैं
  • HTML5 डॉक्टर - आइए बात करते हैं शब्दार्थ के बारे में

३.३ स्वयं का परीक्षण करें

अगले सप्ताह आपका जन्मदिन है, और आप एक पंजीकरण फॉर्म बनाना चाहते हैं ताकि आप जान सकें कि आपको कितना केक बनाना है। अपना टेक्स्ट एडिटर खोलें और निम्नलिखित फ़ील्ड के साथ एक फॉर्म बनाएं।

  • नाम
  • ईमेल पता
  • फ़ोन नंबर
  • एलर्जी

सुनिश्चित करें कि नाम, ईमेल और फोन नंबर फ़ील्ड अनिवार्य हैं, और ईमेल और फोन नंबर फ़ील्ड 'ईमेल' और 'टेली' इनपुट प्रकारों के साथ सेट हैं। एलर्जी क्षेत्र के लिए 'पराग, अंडे, quiche' मान के साथ एक प्लेसहोल्डर बनाएं।

फॉर्म के साथ खेलें। आवश्यक फ़ील्ड को रिक्त के रूप में सबमिट करने का प्रयास करें, और फ़ोन नंबर फ़ील्ड में गैर-संख्यात्मक वर्ण सम्मिलित करने का प्रयास करें। ईमेल फ़ील्ड में, कुछ ऐसा डालें जो ईमेल पता नहीं है। क्या होता है?

4. औसत

एक समय था जब आप वेब पेज में कुछ वीडियो या ऑडियो डालने का एकमात्र तरीका फ्लैश, शॉकवेव या सिल्वरलाइट जैसी किसी चीज़ का उपयोग कर सकते थे।

यह आदर्श नहीं था। सबसे पहले, इनमें से किसी भी ढांचे ने मोबाइल उपकरणों पर इतना अच्छा काम नहीं किया। वे स्मार्टफोन और टैबलेट की आधुनिक दुनिया के लिए सुसज्जित नहीं थे।

एलजी टैबलेट टच स्क्रीन काम नहीं कर रही है

इसके अलावा, वे मालिकाना प्रारूप थे। नतीजतन, लिनक्स और ओएस एक्स के उपयोगकर्ताओं को एक दूसरे दर्जे का अनुभव मिल सकता है या उन्हें मीडिया सेवाओं का उपभोग करने से भी रोका जा सकता है, क्योंकि यह उनके प्लेटफॉर्म के लिए उपलब्ध नहीं था।

अंत में, उनमें धीमे होने की प्रवृत्ति थी। यदि आप कम शक्ति वाले या पुराने कंप्यूटर पर थे, तो आपको इन ढांचे का उपयोग करके वीडियो देखने का अच्छा अनुभव नहीं होगा। फ्लैश इसके लिए विशेष रूप से कुख्यात था।

४.१ HTML5 कैसे वीडियो और ऑडियो को शानदार बनाता है

HTML5 ने वेब डेवलपर्स को कोड की कुछ पंक्तियों के साथ अपने वेब पेजों में वीडियो और ऑडियो शामिल करने की अनुमति देकर इसे बदल दिया। यह मोबाइल उपकरणों पर एक ट्रीट का काम करता है और हर आधुनिक वेब ब्राउज़र पर काम करता है।

नतीजतन, YouTube, Vimeo और Netflix जैसी प्रमुख कंपनियां HTML5 क्रांति का लाभ उठा रही हैं। आप उनके साथ क्यों नहीं जुड़ते?

४.२ कोडेक के बारे में सब कुछ

इस अध्याय में, आप सीखेंगे कि अपने वेब पेजों में ऑडियो और वीडियो को शामिल करने के लिए HTML5 की शक्ति का उपयोग कैसे करें।

सबसे पहले, मुझे एक चेतावनी के साथ शुरुआत करनी होगी। जबकि आप प्रत्येक आधुनिक वेब ब्राउज़र में HTML5 वीडियो का उपयोग कर सकते हैं, यह प्रत्येक वेब ब्राउज़र पर समान रूप से कार्य नहीं करता है। प्रत्येक ब्राउज़र द्वारा उपयोग किए जाने वाले कोडेक्स अलग-अलग होते हैं। Internet Explorer में, आप MP4 वीडियो का उपयोग करने तक सीमित हैं। Chrome थोड़ा अधिक उदार है और आपको WebM, MP4 और Ogg Theora वीडियो का उपयोग करने की अनुमति देता है। ओपेरा थोड़ा अधिक प्रतिबंधात्मक है और केवल आपको थियोरा और वेबएम वीडियो का उपयोग करने की अनुमति देता है।

नतीजतन, आपको अपने वेब पेज में वीडियो डालने के तरीके के बारे में थोड़ा होशियार होना होगा। तो, आइए देखें कि यह कैसे काम करता है।

४.३ वीडियो से शुरू

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

ठीक है, जब आप अपने वीडियो के लोड होने की प्रतीक्षा कर रहे होते हैं, तो आपकी साइट पर आने वाला व्यक्ति वीडियो से संबंधित एक तस्वीर देख सकता है। ऐसा करने के लिए, बस अपने वीडियो टैग को उस छवि के मान के साथ 'पोस्टर' की विशेषता दें, जिससे आप लिंक करना चाहते हैं। इसे ऐसा दिखना चाहिए।

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

ऐसा करने के लिए, आप बस अपना संदेश अपने वीडियो टैग के अंदर लिखें। और कुछ नहीं चाहिए। एक बार जब आप ऐसा कर लेते हैं, तो आपके पास कुछ ऐसा कोड बचेगा जो इस तरह दिखता है।

अब, कुछ वीडियो जोड़ें। मैं Google Chrome पर इसका परीक्षण करने जा रहा हूं, इसलिए मैं एक MP4 फिल्म से लिंक करने जा रहा हूं। ऐसा करने के लिए, मैं एक स्रोत टैग बनाता हूं और इसे स्रोत की विशेषता देता हूं जिसमें उस वीडियो का मूल्य होता है जिसे मैं शामिल करना चाहता हूं।

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

४.४ ऑडियो जोड़ना

ऑडियो को आपके वेब पेज में इस तरह से डाला जा सकता है जो बहुत याद दिलाता है कि हमने अपने पेज में वीडियो कैसे डाला।

सबसे पहले, कोई कुछ ऑडियो टैग बनाता है। इन ऑडियो टैग में 'नियंत्रण' की विशेषता होती है। यह उपयोगकर्ता को पृष्ठ पर जाने वाले ऑडियो को रोकने, रिवाइंड चलाने और चलाए जा रहे ऑडियो को फास्ट-फॉरवर्ड करने की क्षमता देता है।

फिर, आप उस एमपी3 फ़ाइल में एक स्रोत टैग शामिल करते हैं जिससे आप लिंक करना चाहते हैं। जब कोडेक संगतता की बात आती है तो आपको वास्तव में इतना अधिक चिंता करने की ज़रूरत नहीं है। हाल के वेब ब्राउज़रों में एमपी3 ऑडियो चलाने की क्षमता होती है, हालांकि '.ogg' और '.wav' फ़ाइल को भी शामिल करना एक अच्छा अभ्यास है - बस मामले में।

अंत में, आप पुराने ब्राउज़र के लिए फ़ॉलबैक बना सकते हैं। यह उसी तरह से किया जाता है जैसे आपने अपने वीडियो के लिए फ़ॉलबैक बनाया था।

अंतिम परिणाम कुछ इस तरह दिखता है।

जब आप इसे अपने वेब ब्राउज़र में खोलते हैं, तो यह कुछ इस तरह दिखना चाहिए।

४.५ स्वयं का परीक्षण करें

  • आपके वीडियो टैग में पोस्टर लगाने का क्या उद्देश्य है?
  • Internet Explorer में आप किन कोडेक्स का उपयोग नहीं कर सकते हैं?
  • अगर मुझे कुछ ऑडियो रोकने की क्षमता चाहिए, तो आप अपने 'ऑडियो' टैग में क्या विशेषता जोड़ेंगे?

आगे की पढाई:

5. CSS3 के रूपांतरण और एनिमेशन

पारंपरिक रूप से CSS का उपयोग वेब पेज के लेआउट और डिजाइन को संभालने के लिए किया जाता था। यह अभी भी सच है, लेकिन अपने नवीनतम पुनरावृत्ति में इसने एनिमेशन और तत्वों और छवियों के परिवर्तनों को संभालने की क्षमता प्राप्त कर ली है।

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

इस अध्याय में, मैं आपको CSS3 का संक्षिप्त परिचय देने जा रहा हूँ, और आपको दिखाऊँगा कि अपने पेज पर कुछ आश्चर्यजनक प्रभाव कैसे जोड़ें।

सबसे पहले codepen.io पर नेविगेट करें और एक नया पेन बनाएं। हम इस अध्याय की अवधि के लिए इसे अपने कार्यक्षेत्र के रूप में उपयोग करने जा रहे हैं।

हम सरल शुरुआत करने जा रहे हैं और एक साधारण छवि रूपांतरण बना रहे हैं जो एक छवि को घुमाने पर 3 डिग्री घुमाता है। सबसे पहले एक डिव टैग बनाएं और उसे एक आईडी दें। नीचे दिए गए उदाहरण में, मैंने इसे 'muo' की एक आईडी दी है।

5.1 सीएसएस होवर प्रभाव

उस डिव में, अपनी पसंद की इमेज शामिल करें। मैंने MakeUseOf के लिए लोगो की एक प्रति शामिल की है।

फिर आपको कुछ स्टाइलशीट नियम लिखने होंगे। नीचे दिए गए उदाहरण में, मैंने छवि को कुछ जगह देने के लिए एक शीर्ष और बायां हाशिया बनाया है। मैंने एक जिज्ञासु दिखने वाला स्टाइलशीट नियम भी शामिल किया है जो '#muo:hover' से शुरू होता है। वो क्या है?

जब आप स्टाइलशीट नियम में ': होवर' संलग्न करते हैं, चाहे वह किसी तत्व, आईडी या कक्षा के लिए हो, तो आप ब्राउज़र को प्रभावी ढंग से इस स्टाइल को लागू करने के लिए कह रहे हैं जब आपका माउस तत्व को नियंत्रित करता है। बहुत बढ़िया, है ना?

'#muo:hover' नियम के अंदर, हमें एक लाइन मिली है जो कहती है '-webkit-transform: Rotate(3deg)'। जैसा कि मुझे यकीन है कि आपने अनुमान लगाया है, यह ब्राउज़र को उस div तत्व को तीन डिग्री घुमाने के लिए कह रहा है।

हालांकि, यह ध्यान देने योग्य है कि यह टैग केवल क्रोम और सफारी में काम करता है। यदि आप चाहते हैं कि आपका कोड फ़ायरफ़ॉक्स या इंटरनेट एक्सप्लोरर 9 और इसके बाद के संस्करण में काम करे, तो आप निम्नलिखित पंक्तियों को शामिल करने के लिए अपनी सीएसएस फ़ाइल को बदलना चाहेंगे।

अब, जब आप छवि पर होवर करते हैं, तो यह ऐसा दिखता है:

5.2 छवियों का आकार बदलने के लिए CSS3 का उपयोग करना

तो, वहाँ क्यों रुकें? क्या आप जानते हैं कि आप किसी इमेज को बड़ा या छोटा करने के लिए 'ट्रांसफॉर्म' मेथड का भी इस्तेमाल कर सकते हैं। आइए निम्नलिखित पंक्तियों को शामिल करने के लिए अपनी CSS फ़ाइल को बदलें।

जैसा कि आप देख सकते हैं, हमने अब एक नया परिवर्तन नियम शामिल किया है, लेकिन इस बार हम इसे 'स्केल' नामक कुछ करने के लिए कह रहे हैं। छवि के आकार को बढ़ाने के लिए यह वास्तव में एक सुंदर तरीका है। यह दो पैरामीटर लेता है (उन संख्याओं को आप उन कोष्ठकों के बीच में देखते हैं), और वे उस राशि का प्रतिनिधित्व करते हैं जिसके द्वारा आप तत्व की ऊंचाई और चौड़ाई बढ़ाते हैं।

जैसा कि आप कोड से देख सकते हैं, मैं MakeUseOf div लोगो के आकार को 50% तक बढ़ाने जा रहा हूँ। आप इस पर होवर करके इस कार्य का परीक्षण कर सकते हैं। आप देखेंगे कि अब 'मेकयूसेऑफ' लोगो अब काफी अधिक खिंच गया है।

यह CSS3 के रूपांतरणों का एक बहुत ही सौम्य परिचय था। CSS3 वास्तव में बहुत नया होने के बावजूद, अब आप देख सकते हैं कि आप इसके साथ बहुत सारे दिलचस्प जोड़तोड़ कर सकते हैं।

5.3 स्वयं का परीक्षण करें

  • होवर करते समय हम किसी तत्व पर स्टाइल कैसे लागू करते हैं?
  • आप CSS3 का उपयोग करके किसी छवि को कैसे घुमाते हैं?
  • आप CSS3 का उपयोग करके किसी छवि को कैसे मापते हैं?
  • यदि आप अपनी ट्रांसफ़ॉर्म विधि 'अनुवाद (50px, 50px)' पास करते हैं तो क्या होगा?

आगे की पढाई:

HTML5 रॉक्स - प्रेजेंटेशन

6. बस पर्याप्त जावास्क्रिप्ट

यदि आप अपने वेब ब्राउज़र में स्क्रिप्ट का उपयोग करना चाहते हैं, तो आपको जावास्क्रिप्ट का उपयोग करना होगा। इसके बारे में कोई दो तरीके नहीं हैं, दुख की बात है। यह एक ऐसी भाषा है जिसके कई प्रशंसक हैं, और कई विरोधी भी हैं। जैसे-जैसे भाषाएं चलती हैं, इसमें कई मस्से होते हैं। भाषा के बारे में सबसे उल्लेखनीय पुस्तक 'जावास्क्रिप्ट: द गुड पार्ट्स' नामक एक कारण है।

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

६.१ कंसोल तक पहुंचना

ऐसा करने के लिए, हम जावास्क्रिप्ट कंसोल का उपयोग करने जा रहे हैं जो Google क्रोम की प्रत्येक प्रति में बनाया गया है। इसे एक्सेस करने के लिए, आप किसी भी वेब पेज पर राइट क्लिक कर सकते हैं और फिर 'इंस्पेक्ट एलीमेंट' दबा सकते हैं। फिर 'कंसोल' पर क्लिक करें। आपको यह देखना चाहिए।

यह पारंपरिक है कि कोई भी नवोदित डेवलपर जो पहला प्रोग्राम लिखता है, वह है 'हैलो वर्ल्ड' प्रोग्राम। यह एक साधारण प्रोग्राम है जो 'हैलो वर्ल्ड' वाक्यांश को प्रिंट करता है, और बहुत कुछ नहीं। अपने कंसोल में, 'console.log('Hello world!'); टाइप करें।

६.२ आपका पहला कार्यक्रम

तो, हमने वास्तव में क्या किया? सबसे पहले, हमने 'console.log' नाम की किसी चीज़ को कॉल किया। यह एक छोटा सा कोड है जो कंप्यूटर में बनाया गया है जो कि आप जो कुछ भी बताते हैं उसे प्रिंट कर देता है। फिर हमने इसके साथ कुछ कोष्ठक जोड़े, और दोहरे उद्धरण चिह्नों में 'हैलो वर्ल्ड' शामिल किया। इसे 'पासिंग आर्ग्युमेंट्स' कहा जाता है, और जिस प्रकार के तर्क को हमने पारित किया है उसे एक स्ट्रिंग कहा जाता है। जब भी आप कुछ ऐसा करना चाहते हैं जिसमें अक्षर और विशेष वर्ण शामिल हों, तो आपको केवल सिंगल कोट्स का उपयोग करना चाहिए। हालाँकि, यदि आप संख्याओं का उपयोग करके कुछ भी करना चाहते हैं, तो आपको आमतौर पर उद्धरणों का उपयोग करने की आवश्यकता नहीं है, जैसा कि नीचे देखा गया है।

6.3 जावास्क्रिप्ट में चर

आप चर को 'console.log' पर भी पास कर सकते हैं। चर जटिल लगते हैं, लेकिन वे सभी वास्तव में सूचनाओं का हिस्सा रखने के लिए एक जगह है। ये अक्सर संख्याएं या अक्षर होते हैं। ऐसा करने के लिए, आप 'var' कीवर्ड का उपयोग करके एक वेरिएबल घोषित करते हैं, इसे एक नाम देते हैं और फिर बराबर चिह्न के साथ, आप इसे एक मान देते हैं। इसलिए, मैं 'हैलो' नामक एक वेरिएबल बनाने जा रहा हूं और फिर इसे 'हैलो वर्ल्ड' का मान दूंगा। फिर मैं इसे कंसोल.लॉग में पास करने जा रहा हूं।

ध्यान दें कि मैंने उद्धरणों का उपयोग करके कंसोल.लॉग को 'हैलो' कैसे पास नहीं किया। ऐसा इसलिए है क्योंकि मैं कंसोल पर 'हैलो' की सामग्री को प्रिंट करना चाहता था, न कि 'हैलो' को।

६.४ क्या कार्य करते हैं

कोड के एक ही हिस्से को बार-बार लिखना थोड़ा थकाऊ हो सकता है, इसलिए इस कारण से हम फंक्शन लिखते हैं। आपके विचार से कार्य आसान हैं। वे सभी कोड के टुकड़े हैं जिन्हें हम उसी कोड को दोबारा लिखे बिना पुन: उपयोग कर सकते हैं। नीचे, हमने 'sup' नामक एक फ़ंक्शन बनाया है और इसे कोष्ठक का उपयोग करके एक तर्क पारित कर रहे हैं जो तब स्क्रीन पर लॉग किया जाता है। हम कंसोल 'sup('Hello world!');' पर भेजकर 'sup' कहते हैं।

6.5 'फॉर' लूप के साथ किसी क्रिया को दोहराना

मान लीजिए कि आप एक ही क्रिया को निर्धारित संख्या में कई बार करना चाहते हैं। यही कारण है कि हम 'फॉर' लूप का उपयोग क्यों करेंगे। वे पहली बार में डरावने लगते हैं, लेकिन एक बार जब आप उन्हें समझ लेते हैं तो करना इतना आसान हो जाता है। आप 'for ()' लिखकर शुरुआत करते हैं।

उन कोष्ठकों में, हम एक वेरिएबल बनाना चाहते हैं जो यह गिनता है कि हमने कितनी बार कोई क्रिया की है। तो, हमें कुछ ऐसा मिलता है जो इस तरह दिखता है 'for(var i = 0;)'।

फिर हम यह जांचना चाहते हैं कि मैंने कोई शर्त पूरी नहीं की है। तो, इस मामले में, हम देखना चाहते हैं कि यह 10 से कम है। इसलिए, अर्धविराम के बाद, हम 'i' लिखते हैं<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

अगर मैं 10 से कम हूं, तो हम इसे एक-एक करके जोड़ना चाहते हैं और फिर कुछ करना चाहते हैं। इसलिए, हम 'i = i + 1' डालते हैं। हमारा लूप लगभग समाप्त हो गया है: 'for(var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

उसके बाद, हम एक कार्रवाई करना चाहते हैं। इसलिए, अंतिम कोष्ठक के बाद, हम कुछ घुंघराले ब्रेसिज़ लिखते हैं और उनके बीच में हम कंसोल पर जा रहे हैं। i का मान लॉग करें। यह एक काउंटर बनाएगा जो नौ तक गिना जाएगा।

अंतिम दो प्रोग्रामिंग संरचनाएं जिन्हें हम देखने जा रहे हैं, वे हैं 'if' स्टेटमेंट और 'जबकि' लूप।

6.6 यदि कथन

एक 'अगर' कथन एक निश्चित मानदंड पूरा होने पर एक क्रिया करता है। वे निर्माण में 'फॉर' लूप के समान हैं, और निम्नानुसार काम करते हैं। मान लीजिए कि आपके पास 'चीज़बर्गर्स' नाम का एक वेरिएबल है और आप देखना चाहते हैं कि क्या इसमें 'स्वादिष्ट' का मान है। यदि ऐसा होता है, तो आप स्क्रीन पर 'यम, चीज़बर्गर्स' को लॉग इन करना चाहते हैं। ऐसा करने के लिए आप कुछ इस तरह लिखेंगे।

ध्यान दें कि मैंने कैसे लिखा 'अगर (चीज़बर्गर्स == 'स्वादिष्ट')'। आप समानता की जांच करने के लिए डबल या ट्रिपल बराबर का उपयोग करते हैं और मान निर्दिष्ट करने के लिए सिंगल बराबर का उपयोग करते हैं।

६.७ जबकि लूप्स

अंत में, एक 'जबकि' लूप एक मानदंड पूरा होने पर एक क्रिया निष्पादित करता है। तो, कल्पना कीजिए कि आप 'यम, चीज़बर्गर्स' को लॉग करना चाहते हैं जबकि चीज़बर्गर समान स्वादिष्ट होते हैं। ऐसा करने के लिए, आप निम्नलिखित लिखेंगे।

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

जैसा कि मैंने पहले उल्लेख किया है, यह जावास्क्रिप्ट में प्रोग्रामिंग संरचनाओं के लिए एक बहुत ही संक्षिप्त परिचय था। आपको इस आकर्षक, यद्यपि विशाल विषय के बारे में और अधिक पढ़ने के लिए प्रोत्साहित किया जाता है।

६.८ स्वयं का परीक्षण करें

  • मैं ३० से उलटी गिनती करना चाहता हूं। एक 'फॉर' लूप लिखें जो ऐसा करेगा।
  • मैं 'makeuseof' नामक एक वैरिएबल बनाना चाहता हूं और इसे 'कमाल' का मान देना चाहता हूं। यह कैसे किया जाता है?
  • मैं एक ऐसा फ़ंक्शन बनाना चाहता हूं जो कॉल किए जाने पर 'MakeUseOf Is Awesome' प्रिंट करता हो। उस फ़ंक्शन को लिखें।

आगे की पढाई:

7. रचनात्मक कैनवास

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

यह ध्यान देने योग्य है कि कैनवास केवल आधुनिक वेब ब्राउज़र पर काम करता है। यदि आप आईई, क्रोम या फ़ायरफ़ॉक्स के पुराने संस्करण का उपयोग कर रहे हैं, तो आप इस अध्याय का पालन करने में सक्षम नहीं हो सकते हैं। यदि ऐसा है, तो आपको Google Chrome का नवीनतम संस्करण डाउनलोड करने पर विचार करना चाहिए, जो कि वेब ब्राउज़र था जिसमें मैंने यह ट्यूटोरियल बनाया था।

७.१ कैनवास के साथ आरंभ करना

सबसे पहले, आपको अपना वेब ब्राउज़र खोलना होगा और codepen.io पर नेविगेट करना होगा। एक नया पेन बनाएं।

अब, हमें एक कैनवास तत्व घोषित करना होगा। दो ओपनिंग और क्लोजिंग कैनवस टैग बनाएं। उनमें, आपको इसे तीन विशेषताएँ पास करनी चाहिए। ये कैनवास तत्व की चौड़ाई और ऊंचाई हैं, साथ ही आप इसे जो आईडी दे रहे हैं। पहले की तरह जब आप कुछ वीडियो डालते हैं, तो आपको एक फ़ॉलबैक संदेश शामिल करना चाहिए।

अब, हम कुछ Javascript कोड लिखना चाहते हैं जो स्क्रीन पर कुछ आकर्षित करेगा। हम बुनियादी शुरू करने जा रहे हैं और एक साधारण लाल वर्ग बना रहे हैं।

हम एक वेरिएबल बनाने जा रहे हैं (मैंने इसे 'डेमो' कहा है), और फिर कैनवास एलिमेंट को चुनें और उस वेरिएबल को असाइन करें। ऐसा करने के लिए, आप document.getElementByID() का उपयोग करते हैं और उस तत्व की आईडी में पास करते हैं जिसे आप चुनना चाहते हैं।

हमारी स्क्रिप्ट की दूसरी पंक्ति 'संदर्भ' नामक एक और चर बनाती है और फिर उस पर 'demo.getContext('2d')' कॉल करती है। इसने ब्राउज़र को बताया कि हम 2d छवि पर काम करेंगे, फिर स्क्रीन पर आकर्षित करने के लिए आवश्यक कार्यों को पारित करेंगे।

तीसरी और चौथी पंक्तियाँ वे हैं जो वास्तव में स्क्रीन पर आरेखण करती हैं। तीसरी पंक्ति एक आयत को लाल रंग से भरती है, जबकि चौथी पंक्ति fillRect को कॉल करती है, जो इसे स्थिति देती है और इसकी लंबाई और चौड़ाई को परिभाषित करती है।

हालांकि यह प्रभावशाली नहीं है। आइए कुछ और उन्नत करें और MakeUseOf को एकदम नया लोगो बनाने के लिए Javascript और Canvas के जादू का उपयोग करें।

7.2 आकृतियाँ और पाठ

आइए अपनी चौथी पंक्ति को हटा दें, और इसे एक के साथ बदलें जो हमारे आयत को ऊपरी बाएँ कोने में रखता है और इसे हमारे कैनवास की लंबाई तक फैलाता है।

पहले दो तर्क परिभाषित करते हैं कि हम आकृति के x और y अक्ष को कहाँ रखना चाहते हैं। आइए अभी के लिए इन दोनों को '0' पर सेट करते हैं। तीसरा तर्क आकार की चौड़ाई को संदर्भित करता है। आइए इसे '200' पर सेट करें, और फिर चौथे तर्क को '50' पर छोड़ दें। अब आपके पास कुछ ऐसा होना चाहिए जो कुछ इस तरह दिखे।

यह एक अच्छी शुरुआत है, लेकिन इसमें MakeUseOf का बिल्कुल भी उल्लेख नहीं है। इसलिए, हम कुछ टेक्स्ट जोड़ने जा रहे हैं। आइए 'makeuseof' वाला वेरिएबल बनाएं, और हम उस वेरिएबल को 'MakeUseOf' कहेंगे।

फिर हम एक और संदर्भ चर बनाना चाहते हैं। इसे 'संदर्भ 2' कहें, और सुनिश्चित करें कि यह 2d है। यही वह है जिसमें हम अपना टेक्स्ट लिखने के लिए उपयोग करेंगे।

हम चाहते हैं कि हमारा टेक्स्ट नीले रंग का हो और हमारे लाल वर्ग को ओवरले करे। तो, पहले की तरह, हम इसे 'ब्लू' की फिलस्टाइल देना चाहते हैं। अब, हम अपने टेक्स्ट की विशेषताओं का चयन करने जा रहे हैं। हम चाहते हैं कि यह 20px बड़ा, बोल्ड स्वरूपित और एरियल फ़ॉन्ट का उपयोग करे। हम संदर्भ 2 पर फ़ॉन्ट कहते हैं और इसे 'बोल्ड 20px एरियल' मान देते हैं।

क्योंकि हम चाहते हैं कि यह टेक्स्ट हमारे पिछले लाल बॉक्स को ओवरले करे, हमें संदर्भ 2 पर 'textBaseLine' को कॉल करना होगा और इसे शीर्ष का मान देना होगा। एक बार यह पूरा हो जाने के बाद, हम संदर्भ 2 पर 'fillText' को कॉल करते हैं और इसे हमारे टेक्स्ट और x और y निर्देशांक वाले वेरिएबल को पास करते हैं जिसमें हम अपना टेक्स्ट रखना चाहते हैं। हमारे कोड का अंतिम परिणाम कुछ इस तरह है।

कोड द्वारा निर्मित छवि इस तरह दिखती है।

7.3 कैनवास पर एक शब्द

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

डीवीडी को बाहरी हार्ड ड्राइव में कैसे कॉपी करें

७.४ स्वयं का परीक्षण करें

  • आपके द्वारा बनाई गई छवि में निम्न स्लोगन जोड़ें: 'अब तक की सर्वश्रेष्ठ तकनीकी साइट!'
  • एक 'फॉर' लूप बनाएं जो दस पुनरावृत्तियों के लिए चलता है। देखें कि क्या आप अपने आरेखण को एक बार में एक पिक्सेल, कैनवास पर नीचे ले जा सकते हैं।
  • एक समारोह में अपनी ड्राइंग लपेटें। अगर आप इसे नहीं बुलाते हैं तो क्या होगा?

आगे की पढाई:

8. आगे कहाँ?

HTML5 में पाई जाने वाली नई तकनीकों के बारे में मेरी अविश्वसनीय रूप से संक्षिप्त मार्गदर्शिका पढ़ने के लिए धन्यवाद। इस बात से इंकार नहीं किया जा सकता है कि HTML5 भविष्य की तकनीक है। इसे अधिकांश प्रौद्योगिकी द्वारा अपनाया जा रहा है, क्योंकि यह लिखना आसान है और माप से परे शक्तिशाली है। लोग हर समय इसके साथ अविश्वसनीय चीजें कर रहे हैं, और मुझे इसमें कोई संदेह नहीं है कि भविष्य में आप उन लोगों में से एक होंगे। HTML5 की जंगली और अद्भुत दुनिया में आपकी यात्रा का हिस्सा बनकर मैं सम्मानित महसूस कर रहा हूं।

मैं आपसे विनती करता हूं कि आप सीखते रहें। कोडिंग करते रहें। स्तर बढ़ाना और सुधार करना जारी रखें, और कुछ ही समय में आप उन तकनीकों का उपयोग करेंगे जो इस संक्षिप्त मार्गदर्शिका में अद्भुत उत्पाद बनाने के लिए पेश की गई हैं।

साझा करना साझा करना कलरव ईमेल क्या यह विंडोज 11 में अपग्रेड करने लायक है?

विंडोज़ को नया रूप दिया गया है। लेकिन क्या यह आपको विंडोज 10 से विंडोज 11 में शिफ्ट होने के लिए मनाने के लिए काफी है?

आगे पढ़िए
संबंधित विषय
  • वर्डप्रेस और वेब डेवलपमेंट
  • एचटीएमएल 5
  • लंबा प्रपत्र
  • लॉन्गफॉर्म गाइड
लेखक के बारे में मैथ्यू ह्यूजेस(386 लेख प्रकाशित)

मैथ्यू ह्यूजेस एक सॉफ्टवेयर डेवलपर और लिवरपूल, इंग्लैंड के लेखक हैं। वह शायद ही कभी अपने हाथ में एक कप मजबूत ब्लैक कॉफी के बिना पाया जाता है और अपने मैकबुक प्रो और अपने कैमरे को बिल्कुल पसंद करता है। आप उनके ब्लॉग को http://www.matthewhughes.co.uk पर पढ़ सकते हैं और ट्विटर पर @matthewhughes पर उनका अनुसरण कर सकते हैं।

मैथ्यू ह्यूजेस की और फ़िल्में या टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें