9 उपयोगी HTML ट्रिक्स

अभिवादन, हब्र! मैं आपको क्लॉस द्वारा "9 अत्यंत उपयोगी HTML ट्रिक्स" लेख का अनुवाद प्रस्तुत करता हूं।

HTML में कई व्यावहारिक रहस्य हैं जो आपको उपयोगी लग सकते हैं।


नीचे 9 अत्यंत उपयोगी HTML ट्रिक्स दिए गए हैं।

1. टैग "आंकड़ा"

इसका उपयोग तस्वीरों को चिह्नित करने के लिए किया जा सकता है।

चित्र तत्व में अंजीर भी हो सकता है :

<figure> <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%"> <figcaption>Fig.1 - SWAT Kats</figcaption> </figure> 

और यह इस तरह दिखेगा:


चित्र 1 - स्वाट कैट

2. टैग "वीडियो"

यह आपको वीडियो प्लेबैक के लिए मीडिया प्लेयर को एम्बेड करने की अनुमति देता है।

उदाहरण के लिए, आप अपने वीडियो को AWS S3 पर अपलोड कर सकते हैं और इसे अपनी वेबसाइट पर एम्बेड करने के लिए "वीडियो" टैग का उपयोग कर सकते हैं।

इसके लिए YouTube का उपयोग करना अव्यवसायिक लग सकता है।

और Vimeo आपको भुगतान के बिना अपने वीडियो को एम्बेड करने की अनुमति नहीं देता है।

आप विशिष्ट विशेषताओं को निर्दिष्ट कर सकते हैं, जैसे कि चौड़ाई, ऊंचाई, ऑटोस्टार्ट, चक्र, नियंत्रण, आदि।

 <video autoplay="" loop="" controls="" width="640" height="480"> <source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"> </video> 

और यह इस तरह दिखेगा:


आप getUserMedia () या WebRTC का उपयोग करके लाइव प्रसारण एम्बेड कर सकते हैं

3. टैग "चित्र"

यह टैग सार्वजनिक रूप में छवियों को प्रदर्शित करने में मदद करता है, जो कि छोटी देखने वाली खिड़कियों के लिए छवि का एक वैकल्पिक संस्करण दिखा रहा है।

इसमें एक या अधिक "स्रोत" टैग और एक "img" टैग होना चाहिए।

Img टैग का उपयोग केवल तभी किया जाएगा जब दर्शक किसी भी स्रोत टैग से मेल नहीं खाता या यदि वह ब्राउज़र द्वारा समर्थित नहीं है।

 <picture> <source media="(min-width: 968px)" srcset="large_img.jpg"> <source media="(min-width: 360px)" srcset="small_img.jpg"> <img src="default_img.jpg" alt="avatar"> </picture> 

4. टैग "प्रगति"

प्रगति टैग कार्य की प्रगति को प्रदर्शित करता है।

यह टैग "मीटर" (जो एक सेंसर है) टैग के साथ भ्रमित नहीं होना चाहिए।

 <progress value="63" max="100"> </progress> 

यहाँ यह कैसा दिखता है:


5. टैग "मीटर"

आप दिए गए रेंज (सेंसर) में डेटा को मापने के लिए "मीटर" टैग का उपयोग कर सकते हैं।

परिणाम न्यूनतम और अधिकतम मूल्यों या प्रतिशत में सेट किया जा सकता है।

 <meter value="2" min="0" max="10">2 out of 10</meter> 

 <meter value="0.6">60%</meter> 

और यहाँ वे हैं:

6. टैग "मानचित्र"

मैप टैग का उपयोग क्लाइंट इमेज मैप को परिभाषित करने के लिए किया जाता है।

एक छवि मानचित्र इंटरैक्टिव क्षेत्रों के साथ एक छवि है।

आपको बस इतना करना है कि नक्शे से तत्वों में एक्स और वाई निर्देशांक दर्ज करें ।

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

 <img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth"> <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars"> <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn"> </map> 

7. संतोषप्रद विशेषता

यह विशेषता इंगित करती है कि क्या किसी वस्तु की सामग्री संपादन योग्य है।

 <p contenteditable="true">This is an editable paragraph.</p> 

8. इनपुट के लिए सुझाव

 <input type="text" list="planets"> <datalist id="planets"> <option value="Mercury"></option> <option value="Venus"></option> <option value="Earth"></option> <option value="Mars"></option> <option value="Jupiter"></option> <option value="Saturn"></option> <option value="Uranus"></option> <option value="Neptune"></option> </datalist> 

मुझे आशा है कि आपको इस बात से ऐतराज नहीं है कि मैंने कई तरह की शैलियों को नहीं जोड़ा है।

मैं अपनी पसंद से उदाहरणों को डिजाइन करना पसंद करता हूं, जितना संभव हो उतना सुंदर।


9. "नोस्क्रिप्ट" टैग

Noscript एलिमेंट के अंदर की सामग्री को ब्राउज़र द्वारा तभी प्रदर्शित किया जाता है जब जावास्क्रिप्ट अक्षम होता है।

यह उन घटकों के लिए एक कमबैक तंत्र प्रदान करता है जो जावास्क्रिप्ट के बिना काम करना बंद कर देते हैं।

 <noscript><h2>JavaScript is disabled in your browser.</h2></noscript> 

मुझे लगता है कि यह वास्तव में अच्छा है कि आप HTML ट्रिक्स की तलाश कर रहे हैं, लेकिन क्या आप सुनिश्चित हैं कि आपका वेब एप्लिकेशन सभी ब्राउज़रों और उपकरणों पर सही ढंग से काम करता है?

आप स्वचालित परीक्षण बनाने और उन्हें क्रॉस-ब्राउज़र क्लाउड में चलाने के लिए एंडटेस्ट का उपयोग कर सकते हैं।

इसका उपयोग करने के लिए आपको कोड की भी आवश्यकता नहीं है

गंभीरता से, बस डॉक्स पढ़ें।