() translation by (you can also view the original English article)
कभी-कभी, हम Tuts+ के पूरे इतिहास से हमारे कुछ रीडर्स की पसंदीदा पोस्टों को रीविजिट करते हैं। यह ट्यूटोरियल पहली बार अगस्त, 2010 में प्रकाशित हुआ था।
यह इंडस्ट्री तेजी से चलती है - वास्तव में बहुत तेज़! यदि आप सावधान नहीं हैं, तो आपको इसकी धूल में छोड़ दिया जाएगा। इसलिए, यदि आप HTML5 में आने वाले परिवर्तन / अपडेट के साथ थोड़ा अभिभूत महसूस कर रहे हैं, तो इसे उन चीज़ों के प्राइमर के रूप में उपयोग करें जिन्हें आपको अवश्य जानना चाहिए।
1. नया Doctype
अभी भी उस अजीब, याद रखने में असंभव XHTML doctype का उपयोग कर रहे हैं?
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
2 |
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
यदि हां, तो क्यों? नए HTML 5 doctype पर स्विच करें। आप लंबे समय तक काम कर सकेंगे - जैसे डगलस क्वायड कहता है।
1 |
<!DOCTYPE html>
|
असल में, क्या आप जानते थे कि यह सचमुच HTML 5 के लिए भी जरूरी नहीं है? हालांकि, यह वर्तमान, और पुराने ब्राउज़र के लिए उपयोग किया जाता है जिसके लिए एक निर्दिष्ट doctype की आवश्यकता होती है। ब्राउज़र जो इस सिद्धांत को समझ में नहीं आता है, बस स्टैण्डर्ड मोड में निहित मार्कअप प्रस्तुत करेगा। तो, चिंता के बिना, सावधानी बरतने को हवा में उड़ाकर स्वतंत्र महसूस करें, और नए HTML5 doctype को गले लगाओ।
2. Figure एलिमेंट
किसी इमेज के लिए निम्न मार्क-अप पर विचार करें:
1 |
<img src="path/to/image" alt="About image" /> |
2 |
<p>Image of Mars. </p> |
दुर्भाग्यवश इमेज एलिमेंट के साथ पैराग्राफ टैग में लिपटे कैप्शन को जोड़ने के लिए कोई आसान या अर्थपूर्ण तरीका नहीं है। HTML 5 <figure> एलिमेंट की शुरूआत के साथ इसे सुधारता है। <figcaption> एलिमेंट के साथ संयुक्त होने पर, हम अब अपने इमेज समकक्षों के साथ कैप्शन को जोड़ सकते हैं।
1 |
<figure>
|
2 |
<img src="path/to/image" alt="About image" /> |
3 |
<figcaption>
|
4 |
<p>This is an image of something interesting. </p> |
5 |
</figcaption>
|
6 |
</figure>
|
3. <small> को रीडिफाइन करना
बहुत समय पहले, मैंने <small> एलिमेंट का उपयोग उपशीर्षक बनाने के लिए किया था जो लोगो से निकटता से संबंधित हैं। यह एक उपयोगी प्रेसेंटेशनल एलिमेंट है; हालांकि, अब, इसका उपयोग करना गलत होगा। छोटे प्रिंट को संदर्भित करने के लिए small एलिमेंट को और अधिक उचित रूप से परिभाषित किया गया है। अपनी साइट के फुटर में एक कॉपीराइट कथन की कल्पना करो; इस एलिमेंट की नई HTML 5 परिभाषा के अनुसार; इस जानकारी के लिए <small> सही रैपर होगा।
smallएलिमेंट अब "small print" को संदर्भित करता है।
4. स्क्रिप्ट और लिंक के लिए कोई और Types नहीं
आप संभवतः अभी भी अपने link और script टैग में type एट्रिब्यूट जोड़ते हैं।
1 |
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> |
2 |
<script type="text/javascript" src="path/to/script.js"></script> |
यह अब आवश्यक नहीं है। यह निहित है कि इन दोनों टैग क्रमशः स्टाइलशीट्स और स्क्रिप्ट को रेफेर लेते हैं। इस प्रकार, हम सभी प्रकार के type एट्रिब्यूट को हटा सकते हैं।
1 |
<link rel="stylesheet" href="path/to/stylesheet.css" /> |
2 |
<script src="path/to/script.js"></script> |
5. quote दें या quote न दें।
...यह सवाल है। याद रखें, HTML 5 XHTML नहीं है। यदि आप नहीं चाहते हैं तो आपको अपने ऐट्रिब्यूट्स quotation मार्क्स में लपेटने की ज़रूरत नहीं है। आपको अपने एलिमेंट्स को बंद करने की ज़रूरत नहीं है। इसके साथ ही, ऐसा करने में कुछ भी गलत नहीं है, अगर यह आपको अधिक आरामदायक महसूस कराता है। मैंने इसे एकदम सही पाया है।
1 |
<p class=myClass id=someId> Start the reactor. |
इस पर अपना मन बनाओ। यदि आप अधिक स्ट्रक्चर्ड डॉक्यूमेंट पसंद करते हैं, तो हर तरह से, quotes के साथ करते रहें।
6. अपनी कंटेंट एडिट करने योग्य बनाओ
नए ब्राउज़रों में एक निफ्टी नया एट्रिब्यूट है जिसे कंटेंट के लिए लागू किया जा सकता है, जिसे contenteditable कहा जाता है। जैसा कि नाम का तात्पर्य है, यह यूजर को अपने चिल्ड्रन सहित एलिमेंट के भीतर निहित किसी भी टेक्स्ट को एडिट करने की अनुमति देता है। इस तरह के कुछ के लिए कई प्रकार के उपयोग हैं, जिसमें एक टू-डू लिस्ट जैसी ऐप भी शामिल है, जो लोकल स्टोरेज का लाभ भी लेता है।
1 |
<!DOCTYPE html>
|
2 |
|
3 |
<html lang="en"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>untitled</title> |
7 |
</head>
|
8 |
<body>
|
9 |
<h2> To-Do List </h2> |
10 |
<ul contenteditable="true"> |
11 |
<li> Break mechanical cab driver. </li> |
12 |
<li> Drive to abandoned factory
|
13 |
<li> Watch video of self </li> |
14 |
</ul>
|
15 |
</body>
|
16 |
</html>
|
या, जैसा कि हमने पिछली टिप में सीखा है, हम इसे इस प्रकार लिख सकते हैं:
1 |
<ul contenteditable=true> |
7. ईमेल इनपुट
यदि हम फॉर्म के इनपुट के type को "email" अप्लाई करते हैं, तो हम ब्राउज़र को केवल उन स्ट्रिंग को अनुमति देने के लिए निर्देश दे सकते हैं जो वैध ईमेल पता स्ट्रक्चर के अनुरूप हैं। ये सही है; बिल्ट-इन फॉर्म वेलिडेशन जल्द ही यहां होगा! स्पष्ट कारणों से हम इस पर अभी तक 100% भरोसा नहीं कर सकते हैं। पुराने ब्राउज़र में जो इस "email" टाइप को नहीं समझते हैं, वे बस नियमित टेक्स्टबॉक्स पर वापस आ जाएंगे।
1 |
<!DOCTYPE html>
|
2 |
|
3 |
<html lang="en"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>untitled</title> |
7 |
</head>
|
8 |
<body>
|
9 |
<form action="" method="get"> |
10 |
<label for="email">Email:</label> |
11 |
<input id="email" name="email" type="email" /> |
12 |
|
13 |
<button type="submit"> Submit Form </button> |
14 |
</form>
|
15 |
</body>
|
16 |
</html>
|
इस समय, हम ब्राउज़र वेलिडेशन पर निर्भर नहीं कर सकते हैं। एक सर्वर/क्लाइंट साइड सलूशन अभी भी इम्प्लीमेंट किया जाना चाहिए।
यह भी ध्यान दिया जाना चाहिए कि जब सभी एलिमेंट्स और ऐट्रिब्यूट्स को वे करते हैं और सपोर्ट नहीं करते हैं तो सभी मौजूदा ब्राउज़र थोड़ा भद्दा होते हैं। उदाहरण के लिए, Opera ईमेल वेलिडेशन का सपोर्ट करता है, जब तक कि name एट्रिब्यूट निर्दिष्ट हो। हालांकि, यह placeholder एट्रिब्यूट का सपोर्ट नहीं करता है, जिसे हम अगले टिप में सीखेंगे। बॉटम लाइन, अभी तक वेलिडेशन के इस रूप पर निर्भर नहीं है... लेकिन आप अभी भी इसका उपयोग कर सकते हैं!
8. Placeholders
इससे पहले, हमें टेक्स्टबॉक्स के लिए प्लेसहोल्डर बनाने के लिए थोड़ा सा जावास्क्रिप्ट उपयोग करना पड़ा। निश्चित रूप से, आप शुरू में value एट्रिब्यूट को सेट कर सकते हैं कि आप फिट कैसे देखते हैं, लेकिन, जैसे ही यूजर उस टेक्स्ट और क्लिक को हटा देता है, इनपुट फिर से खाली हो जाएगा। placeholder एट्रिब्यूट इसका उपचार करती है।
1 |
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" /> |
फिर, ब्राउज़र में अच्छा सपोर्ट कुछ संदेहपूर्ण है, हालांकि, यह हर नई रिलीज के साथ सुधार जारी रहेगा। इसके अलावा, यदि Firefox और Opera जैसे ब्राउज़र, वर्तमान में placeholder एट्रिब्यूट का सपोर्ट नहीं करते हैं, तो कोई नुकसान नहीं हुआ है।
9. Local Storage
लोकल स्टोरेज के लिए धन्यवाद (आधिकारिक तौर पर HTML 5 नहीं, बल्कि सुविधा के लिए समूहबद्ध), हम ब्राउज़र को बंद होने या रीफ्रेश होने के बावजूद एडवांस ब्राउज़र को हमारी टाइपिंग के लिए "remember" बना सकते हैं।
"localStorage डोमेन पर फ़ील्ड सेट करता है। यहां तक कि जब आप ब्राउज़र बंद करते हैं, इसे फिर से खोलें, और साइट पर वापस जाएं, यह लोकल स्टोरेज में सभी फ़ील्ड को याद रखता है।"
-QuirksBlog
स्पष्ट रूप से सभी ब्राउज़रों में सपोर्टेड नहीं है, हम इस मेथड को काम करने की उम्मीद कर सकते हैं, विशेष रूप से, Internet Explorer 8, Safari 4 और Firefox 3.5 में। ध्यान दें कि पुराने ब्राउज़र को कम्पेन्सेट करने के लिए जो लोकल स्टोरेज को पहचान नहीं पाएंगे, आपको पहले यह निर्धारित करने के लिए परीक्षण करना चाहिए कि window.localStorage मौजूद है या नहीं।
10. अर्थपूर्ण Header और Footer
बीते दिन है:
1 |
<div id="header"> |
2 |
... |
3 |
</div>
|
4 |
|
5 |
<div id="footer"> |
6 |
... |
7 |
</div>
|
प्रकृति से divs, कोई सिमेंटिक स्ट्रक्चर नहीं है - एक id लागू होने के बाद भी। अब, HTML 5 के साथ, हमारे पास <header> और <footer> एलिमेंट्स तक पहुंच है। उपरोक्त मार्क-अप को अब इसके साथ बदला जा सकता है:
1 |
<header>
|
2 |
... |
3 |
</header>
|
4 |
|
5 |
<footer>
|
6 |
... |
7 |
</footer>
|
आपकी प्रोजेक्ट्स में एकाधिक
headerऔरfooterरखने के लिए यह पूरी तरह उपयुक्त है।
इन एलिमेंट्स को अपनी वेबसाइट के "header" और "footer" से भ्रमित न करने का प्रयास करें। वे बस अपने कंटेनर का संदर्भ लें। इस प्रकार, यह जगह बनाने के लिए समझ में आता है, उदाहरण के लिए, footer एलिमेंट के भीतर ब्लॉग पोस्ट के नीचे मेटा जानकारी। header के लिए भी यही सच है।
11. अधिक HTML 5 फॉर्म फीचर्स
इस क्विक वीडियो टिप में अधिक उपयोगी HTML5 फॉर्म फीचर्स के बारे में जानें।
12. इंटरनेट एक्सप्लोरर और HTML 5
दुर्भाग्यवश, नए HTML 5 एलिमेंट्स को समझने के लिए उस डांग Internet Explorer को कुछ तकरार की आवश्यकता है।
डिफ़ॉल्ट रूप से सभी एलिमेंट्स में
inlineकाdisplayहोता है।
यह सुनिश्चित करने के लिए कि नए HTML 5 एलिमेंट ब्लॉक लेवल एलिमेंट्स के रूप में सही ढंग से प्रस्तुत हो, इस समय उन्हें स्टाइल करने के लिए आवश्यक है।
1 |
header, footer, article, section, nav, menu { |
2 |
display: block; |
3 |
}
|
दुर्भाग्यवश, Internet Explorer अभी भी इन स्टाइलिंग को अनदेखा कर देगा, क्योंकि इसके पास कोई संकेत नहीं है, उदाहरण के तौर पर, header एलिमेंट क्या है। सौभाग्य से, एक आसान फिक्स है:
1 |
document.createElement("article"); |
2 |
document.createElement("footer"); |
3 |
document.createElement("header"); |
4 |
document.createElement("nav"); |
5 |
document.createElement("menu"); |
आश्चर्यजनक रूप से पर्याप्त, यह कोड Internet Explorer को ट्रिगर करने लगता है। प्रत्येक नए एप्लिकेशन के लिए बस इस प्रक्रिया के लिए, रेमी शार्प ने एक स्क्रिप्ट बनाई, जिसे आमतौर पर HTML 5 shiv के रूप में जाना जाता है। यह स्क्रिप्ट कुछ प्रिंटिंग इश्यूज को भी ठीक करती है।
1 |
<!--[if IE]>
|
2 |
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
3 |
<![endif]-->
|
13. hgroup*
* इस आलेख के पहले प्रकाशन के बाद, hgroup एलिमेंट पूरी तरह से अप्रचलित हो गया है और अब इसका उपयोग नहीं किया जाना चाहिए।
14. Required एट्रिब्यूट
फॉर्म एक नई required एट्रिब्यूट के लिए अनुमति देते हैं, जो स्वाभाविक रूप से निर्दिष्ट करता है कि कोई विशेष इनपुट आवश्यक है या नहीं। आपके कोडिंग वरीयता पर निर्भर, आप इस एट्रिब्यूट को दो तरीकों से घोषित कर सकते हैं:
1 |
<input type="text" name="someInput" required> |
या, एक अधिक स्ट्रक्चर्ड एप्रोच के साथ।
1 |
<input type="text" name="someInput" required="required"> |
कोई भी तरीका काम करेगा। इस कोड के साथ, और इस एट्रिब्यूट का सपोर्ट करने वाले ब्राउज़र के भीतर, यदि कोई "someInput" इनपुट खाली है तो एक फॉर्म सबमिट नहीं किया जा सकता है। यहां एक क्विक उदाहरण है; हम प्लेसहोल्डर एट्रिब्यूट भी जोड़ देंगे, क्योंकि इसका कोई कारण नहीं है।
1 |
<form method="post" action=""> |
2 |
<label for="someInput"> Your Name: </label> |
3 |
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> |
4 |
<button type="submit">Go</button> |
5 |
</form>
|
अगर इनपुट खाली छोड़ दिया गया है, और फॉर्म सबमिट किया गया है, तो टेक्स्टबॉक्स को हाइलाइट किया जाएगा।
15. Autofocus एट्रिब्यूट
फिर, HTML 5 जावास्क्रिप्ट समाधान की आवश्यकता को हटा देता है। यदि डिफ़ॉल्ट रूप से कोई विशेष इनपुट "selected" या फोकस्ड होना चाहिए, तो हम अब autofocus एट्रिब्यूट का उपयोग कर सकते हैं।
1 |
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus> |
दिलचस्प बात यह है कि, जबकि मैं व्यक्तिगत रूप से अधिक XHTML एप्रोच (quotation मार्क्स का उपयोग करके) पसंद करता हूं, "autofocus=autofocus" लिखना अजीब लगता है। इस प्रकार, हम एक कीवर्ड एप्रोच के साथ रहेंगे।
16. Audio सपोर्ट
ऑडियो प्रस्तुत करने के लिए हमें अब तीसरे पक्ष के प्लगइन पर भरोसा नहीं करना है। HTML 5 अब <audio> एलिमेंट प्रदान करता है। खैर, कम से कम, आखिरकार, हमें इन प्लगइन्स के बारे में चिंता करने की ज़रूरत नहीं होगी। समय के लिए, केवल हाल ही के ब्राउज़र ही HTML 5 ऑडियो के लिए सपोर्ट प्रदान करते हैं। इस समय, बैकवर्ड कम्पेटिबिलिटी के कुछ फॉर्म की पेशकश करने के लिए अभी भी एक अच्छा अभ्यास है।
1 |
<audio autoplay="autoplay" controls="controls"> |
2 |
<source src="file.ogg" /> |
3 |
<source src="file.mp3" /> |
4 |
<a>Download this file.</a> |
5 |
</audio>
|
जब ऑडियो फॉर्मेट की बात आती है तो Mozilla और Webkit अभी तक पूरी तरह से नहीं मिलते हैं। Firefox एक .ogg फ़ाइल देखना चाहता है, जबकि Webkit ब्राउज़र सामान्य .mp3 एक्सटेंशन के साथ ठीक काम करेंगे। इसका मतलब है कि, कम से कम अब के लिए, आपको ऑडियो के दो संस्करण बनाना चाहिए।
जब Safari पेज लोड करता है, तो वह उस .ogg फॉर्मेट को पहचान नहीं पाएगा, और इसे छोड़ देगा और तदनुसार mp3 संस्करण पर आगे बढ़ जाएगा। कृपया ध्यान दें कि IE, प्रति सामान्य, इसका सपोर्ट नहीं करता है, और Opera 10 और इसके नीचे केवल .wav फ़ाइलों के साथ काम कर सकता है।
17. Video सपोर्ट
<audio> एलिमेंट की तरह, हम भी, नए ब्राउज़र में HTML 5 वीडियो भी हैं! असल में, हाल ही में, YouTube ने अपने वीडियो के लिए एक नया HTML 5 वीडियो एम्बेड किया है, जो ब्राउज़र का सपोर्ट करता है। दुर्भाग्य से, फिर से, क्योंकि HTML5 spec वीडियो के लिए एक विशिष्ट कोडेक निर्दिष्ट नहीं करता है, यह निर्णय लेने के लिए ब्राउज़र पर छोड़ दिया गया है। जबकि Safari और Internet Explorer 9 को H.264 फॉर्मेट (जो फ़्लैश प्लेयर को चला सकते हैं) में वीडियो का सपोर्ट करने की उम्मीद की जा सकती है, Firefox और Opera ओपन सोर्स Theora और Vorbis फोर्मट्स के साथ चिपके हुए हैं। जैसे, HTML 5 वीडियो डिस्प्ले करते समय, आपको दोनों फोर्मट्स की पेशकश करनी होगी।
1 |
<video controls preload> |
2 |
<source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> |
3 |
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> |
4 |
<p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> |
5 |
</video>
|
क्रोम सही ढंग से वीडियो प्रदर्शित कर सकता है जो "ogg" और "mp4" फोर्मट्स में एन्कोड किया गया हो।
यहाँ ध्यान देने योग्य कुछ चीजें हैं।
- हमे
typeएट्रिब्यूट को सेट करने के लिए तकनीकी रूप से आवश्यकता नहीं हैं; हालांकि, अगर हम नहीं करते हैं, तो ब्राउज़र को स्वयं को टाइप करना होगा। कुछ बैंडविड्थ बचाये, और इसे स्वयं घोषित करें। - सभी ब्राउज़र HTML5 वीडियो नहीं समझते हैं।
sourceएलिमेंट्स के नीचे, हम या तो डाउनलोड लिंक प्रदान कर सकते हैं या वीडियो के फ्लैश संस्करण को एम्बेड कर सकते हैं। यह आप पर निर्भर करता है। - अगले दो टिप्स में
controlsऔरpreloadएट्रिब्यूट पर चर्चा की जाएगी।
18. Preload वीडियो
preload एट्रिब्यूट वास्तव में वही करती है जो आप अनुमान लगाते हैं। हालांकि, इसके साथ ही, आपको यह तय करना चाहिए कि क्या आप ब्राउज़र को वीडियो को प्रीलोड करना चाहते हैं या नहीं। क्या ये ज़रूरी हैं? शायद, यदि विज़िटर एक पेज तक पहुंचता है, जिसे विशेष रूप से एक वीडियो प्रदर्शित करने के लिए बनाया जाता है, तो आपको निश्चित रूप से वीडियो को प्रीलोड करना चाहिए, और विज़िटर को प्रतीक्षा समय का थोड़ा सा बचा लेना चाहिए। preload="preload", या बस preload जोड़कर वीडियो को प्रीलोड किया जा सकता है। मैं बाद के समाधान को पसंद करता हूँ; यह थोड़ा कम अनावश्यक है।
1 |
<video preload> |
19. Display कंट्रोल्स
यदि आप इनमें से प्रत्येक टिप्स और तकनीकों के साथ काम कर रहे हैं, तो आपने देखा होगा कि, ऊपर दिए गए कोड के साथ, ऊपर दिया गया वीडियो केवल एक इमेज है, बिना किसी नियंत्रण के। इन प्ले कंट्रोल्स को प्रस्तुत करने के लिए, हमें video एलिमेंट के भीतर controls एट्रिब्यूट निर्दिष्ट करना होगा।
1 |
<video preload controls> |
कृपया ध्यान दें कि प्रत्येक ब्राउज़र अपने प्लेयर को एक दूसरे से अलग करता है।
20. Regular Expressions
किसी विशेष टेक्स्टबॉक्स को वैलिडेट करने के लिए आपने कितनी बार कुछ क्विक नियमित regular expression लिखा है। नए pattern एट्रिब्यूट के लिए धन्यवाद, हम सीधे हमारे मार्कअप में एक रेगुलर एक्सप्रेशन डाल सकते हैं।
1 |
<form action="" method="post"> |
2 |
<label for="username">Create a Username: </label> |
3 |
<input type="text" |
4 |
name="username" |
5 |
id="username" |
6 |
placeholder="4 <> 10" |
7 |
pattern="[A-Za-z]{4,10}" |
8 |
autofocus
|
9 |
required> |
10 |
<button type="submit">Go </button> |
11 |
</form>
|
यदि आप रेगुलर एक्सप्रेशंस से मामूली परिचित हैं, तो आपको पता चलेगा कि यह पैटर्न: [A-Za-z] {4,10} केवल अपर और लोअरकेस अक्षरों को स्वीकार करता है। इस स्ट्रिंग में कम से कम चार करैक्टर और अधिकतम दस होना चाहिए।
ध्यान दें कि हम इन सभी नए बेहतरीन ऐट्रिब्यूट्स को गठबंधन करना शुरू कर रहे हैं!
यदि रेगुलर एक्सप्रेशंस आपके लिए किसी विदेशी की तरह हैं, तो यहां देखें।
21. ऐट्रिब्यूट्स के लिए सपोर्ट का पता लगाएं
इन ऐट्रिब्यूट्स में क्या अच्छा है यदि हमारे पास यह निर्धारित करने का कोई तरीका नहीं है कि ब्राउज़र उन्हें पहचानता है या नहीं? वेल, अच्छा पॉइंट; लेकिन इसे समझने के कई तरीके हैं। हम दो की चर्चा करेंगे। पहला ऑप्शन उत्कृष्ट Modernizr लाइब्रेरी का उपयोग करना है। वैकल्पिक रूप से, हम यह निर्धारित करने के लिए इन एलिमेंट्स को क्रिएट और डिसेक्ट कर सकते हैं कि ब्राउज़र क्या सक्षम हैं। उदाहरण के लिए, हमारे पिछले उदाहरण में, यदि हम यह निर्धारित करना चाहते हैं कि ब्राउज़र pattern एट्रिब्यूट को इम्प्लीमेंट कर सकता है, तो हम अपने पेज पर कुछ जावास्क्रिप्ट जोड़ सकते हैं:
1 |
alert( 'pattern' in document.createElement('input') ) // boolean;
|
वास्तव में, यह ब्राउज़र कम्पेटिबिलिटी निर्धारित करने की एक लोकप्रिय विधि है। JQuery लाइब्रेरी इस चाल का उपयोग करता है। ऊपर, हम एक नया input एलिमेंट बना रहे हैं, और यह निर्धारित कर रहे हैं कि pattern एट्रिब्यूट को पहचान लिया गया है या नहीं। यदि ऐसा है, तो ब्राउज़र इस फंक्शनलिटी का सपोर्ट करता है। अन्यथा, यह निश्चित रूप से नहीं है।
1 |
<script> |
2 |
if (!'pattern' in document.createElement('input') ) {
|
3 |
// do client/server side validation |
4 |
} |
5 |
</script> |
ध्यान रखें कि यह जावास्क्रिप्ट पर निर्भर करता है!
22. Mark एलिमेंट
<mark> एलिमेंट को हाइलाइटर के रूप में सोचें। इस टैग के भीतर लिपटे एक स्ट्रिंग यूजर के वर्तमान कार्यों के लिए प्रासंगिक होना चाहिए। उदाहरण के लिए, यदि मैंने कुछ ब्लॉग पर "Open your Mind" की खोज की है, तो मैं इस स्ट्रिंग की प्रत्येक दोहराव को <mark> टैग के भीतर लपेटने के लिए कुछ जावास्क्रिप्ट का उपयोग कर सकता हूं।
1 |
<h3> Search Results </h3> |
2 |
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p> |
23. <div> का प्रयोग कब करें
हम में से कुछ ने शुरू में सवाल किया कब हमें सादे divs का उपयोग करना चाहिए। अब हमारे पास header, article, section और footer तक पहुंच है, क्या कभी भी इसका उपयोग करने का समय है ...div? निश्चित रूप से।
जॉब के लिए कोई बेहतर एलिमेंट नहीं होने पर
divs का उपयोग किया जाना चाहिए।
उदाहरण के लिए, यदि आपको लगता है कि विशेष रूप से कंटेंट को पोजीशन करने के उद्देश्य से आपको एक रैपर एलिमेंट के भीतर कोड के ब्लॉक को लपेटने की आवश्यकता है, तो <div> सही समझ में आता है। हालांकि, यदि आप इसके बजाय एक नया ब्लॉग पोस्ट व्रैप कर रहे हैं, या शायद, आपके फुटर में लिंक की एक सूची, क्रमशः <article> और <nav> एलिमेंट्स का उपयोग करने पर विचार करें। वे अधिक अर्थपूर्ण हैं।
24. तुरंत उपयोग करना शुरू करें
HTML 5 के बारे में इस बात के साथ 2022 तक पूरा नहीं हो रहा है, कई लोग इसे पूरी तरह से अवहेलना करते हैं - जो एक बड़ी गलती है। असल में, HTML 5 फीचर्स हैं जो हम अभी हमारी सभी प्रोजेक्ट्स में उपयोग कर सकते हैं! सिंपल, क्लीनर कोड हमेशा एक अच्छी बात है। आज के वीडियो क्विक टिप में, मैं आपको कुछ ऑप्शन दिखाऊंगा।
25. HTML 5 क्या नहीं है
लोगों को यह मानने के लिए क्षमा किया जा सकता है कि बेहतरीन जावास्क्रिप्ट-लेस ट्रांजीशन सभी अंतर्निहित HTML5 में समूहित किए गए हैं। अरे - यहां तक कि Apple ने अनजाने में इस विचार को बढ़ावा दिया है। गैर-डेवलपर्स के लिए, कौन परवाह करता है; यह आधुनिक वेब स्टैंडर्ड्स को संदर्भित करने का एक आसान तरीका है। हालांकि, हमारे लिए, यह केवल semantic हो सकता है, यह समझना महत्वपूर्ण है कि HTML 5 क्या नहीं है।
- SVG: HTML 5 नहीं। यह कम से कम पांच साल का है।
- CSS3: HTML 5 नहीं। यह है...CSS।
- Geolocation: HTML 5 नहीं।
- Client Storage: HTML 5 नहीं। यह एक पॉइंट पर था, लेकिन इस तथ्य के कारण, इस तथ्य के कारण कि बहुत से चिंतित थे, पूरी तरह से जटिल हो रहा था। अब इसका अपना स्पेसिफिकेशन है।
- Web Sockets: HTML 5 नहीं। फिर, अपने स्पेसिफिकेशन के लिए एक्सपोर्ट किया गया था।
भले ही आपको कितना भेद चाहिए, इन सभी तकनीकों को आधुनिक वेब स्टैक में समूहीकृत किया जा सकता है। वास्तव में, इनमें से कई ब्रांडेड स्पेसिफिकेशन को अभी भी एक ही लोगों द्वारा प्रबंधित किया जाता है।
26. Data एट्रिब्यूट
अब हम आधिकारिक तौर पर सभी HTML एलिमेंट्स के भीतर कस्टम ऐट्रिब्यूट्स के लिए सपोर्ट प्राप्त करते हैं। हालांकि, इससे पहले, हम अभी भी चीजों से दूर हो सकते हैं जैसे:
1 |
<h1 id=someId customAttribute=value> Thank you, Tony. </h1> |
...validator एक समस्या को उठाना होगा! लेकिन अब तक, जब तक हम "data" के साथ हमारी कस्टम एट्रिब्यूट का प्रस्ताव देते हैं, हम आधिकारिक तौर पर इस मेथड का उपयोग कर सकते हैं। यदि आपने कभी भी class एट्रिब्यूट की तरह कुछ महत्वपूर्ण डेटा संलग्न किया है, शायद जावास्क्रिप्ट उपयोग के लिए, यह एक बड़ी मदद के रूप में आएगा!
HTML स्निपेट
1 |
<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div> |
कस्टम विशेषता की वैल्यू रिट्रीव करें
1 |
var theDiv = document.getElementById('myDiv');
|
2 |
var attr = theDiv.getAttribute('data-custom-attr');
|
3 |
alert(attr); // My Val |
यह आपके CSS में भी इस्तेमाल किया जा सकता है, जैसे कि इस सिली और लेम CSS टेक्स्ट बदलने के उदाहरण के लिए।
1 |
<!DOCTYPE html>
|
2 |
|
3 |
<html lang="en"> |
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>Sort of Lame CSS Text Changing</title> |
7 |
<style>
|
8 |
|
9 |
h1 { position: relative; } |
10 |
h1:hover { color: transparent; } |
11 |
|
12 |
h1:hover:after { |
13 |
content: attr(data-hover-response); |
14 |
color: black; |
15 |
position: absolute; |
16 |
left: 0; |
17 |
|
18 |
}
|
19 |
</style>
|
20 |
</head>
|
21 |
<body>
|
22 |
|
23 |
<h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me </h1> |
24 |
|
25 |
</body>
|
26 |
</html>
|
आप JSBIN पर उपरोक्त प्रभाव का डेमो देख सकते हैं।
27. Output एलिमेंट
जैसा कि आपने शायद अनुमान लगाया है, output एलिमेंट का उपयोग किसी प्रकार की गणना को प्रदर्शित करने के लिए किया जाता है। उदाहरण के लिए, यदि आप माउस की स्थिति के कोआर्डिनेट, या नंबर्स की सीरीज के योग को डिस्प्ले करना चाहते हैं, तो यह डेटा output एलिमेंट में डाला जाना चाहिए।
एक साधारण उदाहरण के रूप में, जब submit बटन दबाया जाता है, तो जावास्क्रिप्ट के साथ खाली output में दो संख्याओं का योग डालें।
1 |
<form action="" method="get"> |
2 |
<p>
|
3 |
10 + 5 = <output name="sum"></output> |
4 |
</p>
|
5 |
<button type="submit"> Calculate </button> |
6 |
</form>
|
7 |
|
8 |
<script>
|
9 |
(function() { |
10 |
var f = document.forms[0]; |
11 |
|
12 |
if ( typeof f['sum'] !== 'undefined' ) { |
13 |
f.addEventListener('submit', function(e) { |
14 |
f['sum'].value = 15; |
15 |
e.preventDefault(); |
16 |
}, false); |
17 |
}
|
18 |
else { alert('Your browser is not ready yet.'); } |
19 |
})();
|
20 |
</script>
|
कृपया ध्यान दें कि output एलिमेंट के लिए सपोर्ट अभी भी थोड़ा सा है। इस लेखन के समय, मैं केवल Opera को अच्छा प्ले करने में सक्षम था। यह उपरोक्त कोड में रिफ्लेक्ट होता है। यदि ब्राउजर एलिमेंट को पहचान नहीं पाता है, तो ब्राउजर आपको एक नोटिस को अलर्ट करेगा जो आपको उतना ही सूचित करेगा। अन्यथा, यह आउटपुट "sum" के नाम से पाता है और फॉर्म के प्रस्तुत होने के बाद, उसके वैल्यू को 15 पर सेट करता है।
यह एलिमेंट एक for एट्रिब्यूट के लिए भी प्राप्त कर सकता है, जो उस एलिमेंट के नाम को दर्शाता है जो output से संबंधित है, जैसा label काम करता है।
28. Range इनपुट के साथ स्लाइडर्स बनाएँ
HTML 5 नए range टाइप इनपुट प्रस्तुत करता है।
1 |
<input type="range"> |
सबसे विशेष रूप से, यह दूसरों के बीच min, max, step और value एट्रिब्यूट को प्राप्त कर सकता है। यद्यपि केवल Opera इस प्रकार के इनपुट का सपोर्ट करने के लिए प्रतीत होता है, लेकिन यह वास्तव में शानदार होगा जब हम वास्तव में इसका उपयोग कर सकते हैं!
एक क्विक डिस्प्ले के लिए, आइए एक गेज बनाएं जो यूज़र्स को यह तय करने की अनुमति देगा कि "Total Recall" कितना शानदार है। हम एक रियल वर्ल्ड पोलिंग समाधान नहीं बनाएंगे, लेकिन हम समीक्षा करेंगे कि इसे आसानी से कैसे किया जा सकता है।
Step 1: Mark-up
सबसे पहले, हम अपना मार्क-अप बनाते हैं।
1 |
<form method="post"> |
2 |
<h1> Total Recall Awesomness Gauge </h1> |
3 |
<input type="range" name="range" min="0" max="10" step="1" value=""> |
4 |
<output name="result"> </output> |
5 |
</form>
|
ध्यान दें कि, min और max वैल्यूज को सेट करने के अलावा, हम हमेशा स्पेसिफी कर सकते हैं कि प्रत्येक transition के लिए step क्या होगा। यदि step 1 पर सेट किया गया है, तो चुनने के लिए 10 वैल्यूज होंगे। हम नए output एलिमेंट का भी लाभ उठाते हैं जिसे हमने पिछली टिप में सीखा था।
Step 2: CSS
इसके बाद, हम इसे थोड़ा सा style देंगे। हम :before और :after का उपयोग भी करेंगे ताकि यूजर को सूचित कर सके कि हमारी min और max वैल्यूज क्या है। "Introducing HTML 5" के माध्यम से मुझे इस ट्रिक को सिखाने के लिए Remy और Bruce का बहुत बहुत धन्यवाद।
1 |
body { |
2 |
font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif; |
3 |
text-align: center; |
4 |
}
|
5 |
input { font-size: 14px; font-weight: bold; } |
6 |
|
7 |
input[type=range]:before { content: attr(min); padding-right: 5px; } |
8 |
input[type=range]:after { content: attr(max); padding-left: 5px;} |
9 |
|
10 |
output { |
11 |
display: block; |
12 |
font-size: 5.5em; |
13 |
font-weight: bold; |
14 |
}
|
ऊपर, हम range इनपुट से पहले और बाद में कंटेंट बनाते हैं, और क्रमशः min और max वैल्यूज के बराबर अपने वैल्यू बनाते हैं।
Step 3: JavaScript
अंत में, हम:
- निर्धारित करें कि वर्तमान ब्राउज़र जानते है कि range इनपुट क्या है। यदि नहीं, तो हम यूजर को चेतावनी देते हैं कि डेमो काम नहीं करेगा।
-
outputएलिमेंट को डायनामिक रूप से अपडेट करें, क्योंकि यूजर स्लाइडर को ले जाता है। - सुनें जब यूजर स्लाइडर से माउस को बाहर करता है, वैल्यू को ले लें और इसे लोकल स्टोरेज में save कर लें।
- फिर, अगली बार जब यूजर पेज को रीफ्रेश करता है, तो range और output स्वचालित रूप से उनके द्वारा चुने गए कार्यों पर सेट हो जाएगा।
1 |
(function() {
|
2 |
var f = document.forms[0], |
3 |
range = f['range'], |
4 |
result = f['result'], |
5 |
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; |
6 |
|
7 |
// Determine if browser is one of the cool kids that |
8 |
// recognizes the range input. |
9 |
var o = document.createElement('input');
|
10 |
o.type = 'range'; |
11 |
if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
|
12 |
|
13 |
// Set initial values of the input and ouput elements to |
14 |
// either what's stored locally, or the number 5. |
15 |
range.value = cachedRangeValue; |
16 |
result.value = cachedRangeValue; |
17 |
|
18 |
// When the user makes a selection, update local storage. |
19 |
range.addEventListener("mouseup", function() {
|
20 |
alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
|
21 |
localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
|
22 |
}, false); |
23 |
|
24 |
// Display chosen value when sliding. |
25 |
range.addEventListener("change", function() {
|
26 |
result.value = range.value; |
27 |
}, false); |
28 |
|
29 |
})(); |
असली दुनिया के लिए तैयार है? शायद अभी तक नहीं; लेकिन यह अभी भी मजेदार है और इसके लिए तैयार है!
सोर्स कोड डाउनलोड करें, और अपने लिए इसे आज़माएं। लेकिन Opera का उपयोग करें।
पढ़ने के लिए धन्यवाद! हमने बहुत कुछ शामिल किया है, लेकिन अभी भी HTML 5 के साथ क्या संभव है इसकी सतह खरोंच कर देखा है। मुझे आशा है कि यह एक सहायक प्राइमर के रूप में कार्य करेगा!
