क्या सेकंड में नहीं तो मिनटों में साइट का सभी HTML कोड बनाना संभव है? यह संभव है यदि आप एम्मेट का उपयोग कर रहे हैं! यह नया दृष्टिकोण HTML, XML और अन्य संरचित कोड स्वरूपों में कोड के तेजी से विकास की अनुमति देता है।
एम्मेट कई लोकप्रिय टेक्स्ट एडिटर्स के लिए एक प्लगइन है। एम्मेट के साथ, आप अपने पेज के कंकाल को एक तर्कसंगत लेकिन बहुत संकुचित सिंटैक्स में बनाते हैं और फिर इसे पूर्ण, उचित HTML कोड तक विस्तारित करते हैं। परिणाम जादू जैसा लगता है:पाठ की एक पंक्ति वाक्य रचना की सैकड़ों पंक्तियों तक फैल जाती है, और आपके पास एक स्थिर पृष्ठ, या यहां तक कि एक पूर्ण साइट की संरचना, मिनटों में तैयार हो जाती है।
आप यहां सीखेंगे कि आप एक पूर्ण स्थिर वेब पेज बनाने के लिए एम्मेट का उपयोग कैसे कर सकते हैं। इस ट्यूटोरियल के लिए विजुअल स्टूडियो कोड का उपयोग किया जाता है क्योंकि यह एम्मेट के लिए बिल्ट-इन सपोर्ट के साथ आता है। आप अन्य संपादकों में एम्मेट का उपयोग कर सकते हैं, जैसे सब्लिमे टेक्स्ट और एटम, लेकिन आपको एक्सटेंशन के माध्यम से इसके लिए समर्थन जोड़ना होगा।
अपनी साइट की फ़ाइल बनाएं
आरंभ करने के लिए, विजुअल स्टूडियो कोड खोलें।
नया, रिक्त दस्तावेज़ बनाने के लिए "फ़ाइल -> नई फ़ाइल" चुनें।
अपनी फ़ाइल को "html" एक्सटेंशन देकर सहेजने के लिए "फ़ाइल -> इस रूप में सहेजें" चुनें।
बुनियादी संरचना
प्रत्येक वेब पेज के तत्व समूहों और उपसमूहों में व्यवस्थित होते हैं। एम्मेट के साथ कोडिंग करते समय, आपको हमेशा यह ध्यान रखना होगा कि प्रत्येक समूह में ऐसे आइटम कैसे होते हैं जो स्वयं और भी अधिक तत्वों के समूह हो सकते हैं।
नोट :हालांकि हम मूल बातें समझाएंगे, यह बेहतर होगा कि आप आगे बढ़ने से पहले HTML सिंटैक्स की मूल बातों से परिचित हों।
एक बहुत ही बुनियादी, शीर्ष स्तर पर, अधिकांश साइटों में ऐसे तीन समूह/अनुभाग होते हैं:एक शीर्षलेख, मुख्य सामग्री के लिए एक मुख्य भाग और एक पाद लेख। एम्मेट के साथ बनाने के लिए, टाइप करें:
#header+#mainsite+#footer
प्रत्येक शब्द के सामने "#" का अर्थ है कि प्रत्येक समूह एक आईडी के साथ एक div है। एम्मेट को क्रिया में देखने के लिए पंक्ति के अंत में एंटर दबाएं, इस छोटे से वाक्यांश को संरचित HTML की तीन पंक्तियों में बदल दें।
हेडर संरचना
एक विशिष्ट साइट के शीर्षलेख में उसका लोगो और एक या दो मेनू होते हैं। उन्हें अपने पृष्ठ में जोड़ने के लिए, आप विस्तारित HTML को पिछले चरण से रख सकते हैं और सीधे हैडर डिव में टाइप कर सकते हैं। फिर आप कुछ इस तरह टाइप कर सकते हैं:
#logo+#menu_top+#menu_main
इसे भी विस्तारित करने के लिए एंटर दबाएं, और आपकी साइट के लोगो के लिए आपके पास तीन और डिव होंगे और आपके हेडर के अंदर दो मेनू होंगे।
एम्मेट में समूह बनाना
एम्मेट के साथ, आप तत्वों को कोष्ठक में रखकर समूहित करते हैं। यह आपको अपने पृष्ठों के लिए जटिल संरचनाएँ बनाने की अनुमति देता है। इसलिए अब तक सब कुछ पूर्ववत करें और केवल अपना मूल #header+#mainsite+footer रखें पहले से कोड।
#header बदलें निम्नलिखित के साथ आपके कोड में:
(#header>.logo+.menu.top+.menu.main^)
एम्मेट में आप > . का उपयोग करके एक स्तर गिरा सकते हैं वर्ण और ^ . का उपयोग करके एक स्तर ऊपर जा सकते हैं चरित्र। यह आपको एक तत्व में शामिल होने, वहां अन्य लोगों को जोड़ने और फिर वापस ऊपर जाने की अनुमति देता है।
परिणाम निम्न जैसा दिखना चाहिए:
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
उपरोक्त का अनुवाद होगा:"#हेडर आईडी के साथ एक डिव (समूह) जोड़ें। इसके अंदर, ".logo," ".menu.top" और ".menu.main" वर्गों के साथ तीन Div जोड़ें। समूह के बाहर एक स्तर ऊपर लौटाएं, और उसके आगे दो और Div जोड़ें जिनकी आईडी "#mainsite" और "#footer" है।
पोस्ट स्ट्रक्चर
किसी विशिष्ट साइट पर एक मूल पोस्ट में आमतौर पर निम्नलिखित तत्व होते हैं:
- शीर्षक
- छवि
- अंश (पाठ अनुच्छेद के रूप में)
इसे एक लिंक भी प्रदान करना चाहिए जो विज़िटर को वास्तविक पोस्ट पढ़ने की अनुमति देता है और शायद इसकी श्रेणियों, टैग इत्यादि से लिंक करता है। सादगी के लिए, हालांकि, हम अभी केवल उन तीन तत्वों का उपयोग करेंगे।
यह वह कोड है जिसे हम जोड़ने जा रहे हैं:
(.post>h3{Post Title $}+img+p{Post Excerpt})*5 यह एम्मेट को बताता है "क्लास .post के साथ एक डिव बनाएं। इसके अंदर, H3 शीर्षक का शीर्षक, एक छवि और अंश के लिए एक पैराग्राफ रखें।
किसी तत्व के बाद संलग्न "{TEXT}" के साथ, आप इसकी सामग्री को परिभाषित करते हैं। तो, "{पोस्ट टाइटल}" के साथ, यह एम्मेट को बता रहा है कि प्रत्येक H3 शीर्षक की सामग्री प्लेसहोल्डर टेक्स्ट "पोस्ट टाइटल" होगी। आप "पोस्ट शीर्षक" को अपने नाम या अपनी पसंद की किसी भी टेक्स्ट स्ट्रिंग में बदल सकते हैं, और कोड का विस्तार होने पर इसका उपयोग आपके पोस्ट शीर्षक की सामग्री के रूप में किया जाएगा।
$ "पोस्ट शीर्षक" के बगल में एक संख्यात्मक चर है जो "5" के संयोजन के साथ काम करता है जिसे आप कोष्ठक के बाहर देख सकते हैं। *5 कोष्ठक के बाद एम्मेट को कोष्ठक की सामग्री को पांच बार दोहराने के लिए कहता है। $ प्रत्येक पोस्ट की पुनरावृत्ति संख्या के साथ प्रतिस्थापित किया जाता है। इस नंबर को अपने पेज पर पोस्ट की जाने वाली संख्या से बदलें।
इसे वास्तविक कोड में जोड़ें। यह इस तरह दिखना चाहिए:
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5) 
पाद संरचना
फ़ुटर के लिए, हम दो समूहों को जोड़ रहे हैं - ".design" और ".copyright" वर्गों वाले दो Div.
कोड इस प्रकार है:
(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})) 
यह ".design" वर्ग के साथ एक div बनाएगा। इसके अंदर ".designerslink" वर्ग के साथ एक लिंक है। इसके आगे जोड़ा गया ".कॉपीराइट" वर्ग के साथ एक दूसरा div है। इस डिव के अंदर "कॉपीराइट 2020 माई नेम" सामग्री के साथ सादे पाठ का एक पैराग्राफ है।
परिणाम यह होगा:
(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))) अब, बस एंटर दबाएं, और आपकी साइट तैयार है!
एक कीप्रेस के साथ, हमने अब तक जो कुछ भी देखा है, और वर्णों का यह अति-संघनित समूह, एक पूर्ण पृष्ठ के लिए उचित HTML सिंटैक्स की दर्जनों पंक्तियों में बदल जाएगा!
Ctrl . दबाकर फ़ाइल में परिवर्तन सहेजें + एस या "फ़ाइल -> सहेजें" पर जाकर। अपना काम देखने के लिए, अपने ब्राउज़र को सक्रिय करें। फिर, या तो "फ़ाइल -> खोलें" या किसी बाहरी फ़ाइल प्रबंधक का उपयोग करके, अपनी HTML फ़ाइल का पता लगाएं और इसे ब्राउज़र में मैन्युअल रूप से खोलें।
रैपिंग अप
आपने अपनी HTML फ़ाइल बनाने के लिए एम्मेट का उपयोग करने की मूल बातें सीख ली हैं। बेशक, आप किसी भी समय अपने कोड को संशोधित करने या अधिक सामग्री के साथ इसका विस्तार करने के लिए वापस आ सकते हैं।
क्या आप एम्मेट के बारे में पहले से जानते थे? क्या आप कुछ अन्य शॉर्टकट का उपयोग कर रहे हैं जो साइट बनाते समय मदद करते हैं? हमें नीचे टिप्पणी अनुभाग में बताएं।