5 things you didn't know you could do with HTML

Sep 12, 2025

कैसे करना है

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

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

Keep code streamlined for clearer understanding — स्पष्ट समझ के लिए कोड को सुव्यवस्थित रखें

एचटीएमएल 5 ने खुद को अच्छे कोडिंग प्रथाओं को प्रोत्साहित करने में मदद के लिए कई नए तत्वों (और कई बहिष्कृत) पेश किए। आपने अर्थपूर्ण मार्कअप के बारे में सुना होगा, जो एचटीएमएल 5 के वर्णनात्मक तत्वों के उपयोग को संदर्भित करता है जैसे कि & lt; अनुच्छेद & gt; तथा & lt; चित्रा & gt; उन सामग्री के प्रकार को इंगित करने के लिए।

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

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

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

01. पहचान और संश्लेषण भाषण

The sound of things to come — आने वाली चीजों की आवाज (छवि क्रेडिट: अनप्लैश पर जेसन रोज़वेल द्वारा फोटो)

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

02. एक रंग पिकर प्रदर्शित करें

Choosing the right colour — सही रंग का चयन (छवि क्रेडिट: अनप्लैश पर स्कॉट वेब द्वारा फोटो)

जैसा कि यह उतना ही छोटा हो सकता है, यह एक महान उदाहरण है कि एचटीएमएल 5 सामान्य कार्यों को सरल बना रहा है, जो पहले एक जटिल यूआई घटक के कस्टम कोडिंग की आवश्यकता होगी। & lt; इनपुट प्रकार = "रंग" & gt; डिवाइस के मूल पिकर का उपयोग करके क्लिक करते समय एक दृश्य रंग पिकर प्रदर्शित करेगा। यह एचटीएमएल कैनवास के साथ विशेष रूप से उपयोगी हो सकता है। यह व्यापक रूप से मोबाइल पर सफारी के अपवाद के साथ समर्थित है।

03. ब्राउज़र UI को पुनः प्राप्त करें

Colour themes for browsers — ब्राउज़रों के लिए रंग थीम (छवि क्रेडिट: Unsplash पर Marko Blažević द्वारा फोटो)

यह मोबाइल प्लेटफ़ॉर्म पर एक अच्छा सौंदर्य स्पर्श प्रदान कर सकता है। & lt; मेटा नाम = "थीम-रंग" सामग्री = "# ffffff" / & gt; अपनी साइट को देखते समय ब्राउज़र को टूलबार को पुनः प्राप्त करने के लिए डिज़ाइन किया गया है। दुर्भाग्य से, यह थोड़ा गैर-मानकीकृत है, इसलिए जबकि "थीम-रंग" आईओएस पर क्रोम, फ़ायरफ़ॉक्स और ओपेरा के साथ काम करता है, आपको इसकी आवश्यकता होगी "ऐप्पल-मोबाइल-वेब-ऐप-स्टेटस-बार-स्टाइल" (केवल पूर्णस्क्रीन मोड में काम करता है)।

04. विभिन्न स्क्रीन के लिए अलग-अलग छवियां

Specifying the image and the resolution — छवि और संकल्प को निर्दिष्ट करना (छवि क्रेडिट: unsplash पर tran mau tri tam द्वारा फोटो)

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

05. अपने फोन को कंपन करें

Shakin' all over — Shakin 'सब खत्म हो गया (छवि क्रेडिट: unsplash पर गिल्स Lambert द्वारा फोटो)

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

[1 9 1] यह लेख मूल रूप से दिखाई दिया [1 9 2] [1 9 3] [1 9 1] वेब डिजाइनर [1 9 2] [1 9 6] [1 9 1] अंक 266। [1 9 2] [1 9 1] यहां खरीदें [1 9 2] [1 9 6] [1 9 1] । [1 9 2]

संबंधित आलेख:

10 सर्वश्रेष्ठ एचटीएमएल 5 टेम्पलेट डिजाइन
20 एचटीएमएल टेम्पलेट्स आपकी वेब डिज़ाइन परियोजनाओं को हेडस्टार्ट देने के लिए
इस धोखा शीट के साथ अपने HTML को नाखून दें

[22 9]

5 things you didn't know you could do with HTML

01. पहचान और संश्लेषण भाषण

02. एक रंग पिकर प्रदर्शित करें

03. ब्राउज़र UI को पुनः प्राप्त करें

04. विभिन्न स्क्रीन के लिए अलग-अलग छवियां

05. अपने फोन को कंपन करें

कैसे करना है - सर्वाधिक लोकप्रिय लेख

Manage React form state with Formik

How to test React sites and apps

घटक को एनिमेट करने के लिए प्रतिक्रिया वसंत का उपयोग कैसे करें

Paint expressive portrait art with ArtRage 5

How to create an Alexa skill for your site

60 सेकंड में फ़ोटोशॉप के साथ एक सिनेमैग्राफ बनाएं

5 tips for sculpting in double-quick time

How to combine Painter's watercolour sets

श्रेणियाँ