Emmet के साथ HTML फाइलें आसानी से कैसे बनाएं

क्या किसी साइट के सभी HTML कोड को मिनटों में, अगर सेकंडों में नहीं, बनाना संभव है? यह संभव है यदि आप Emmet का उपयोग कर रहे हैं! यह नया दृष्टिकोण HTML, XML, और अन्य संरचित कोड फॉर्मेट में कोड के तीव्र विकास की अनुमति देता है।

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

आप यहां सीखेंगे कि कैसे आप एक पूर्ण स्टेटिक वेब पेज बनाने के लिए Emmet का उपयोग कर सकते हैं। इस ट्यूटोरियल के लिए Visual Studio Code का उपयोग किया गया है क्योंकि यह Emmet के लिए बिल्ट-इन सपोर्ट के साथ आता है। आप Emmet को अन्य एडिटर्स में उपयोग कर सकते हैं, जैसे Sublime Text और Atom, लेकिन आपको इसके लिए एक्सटेंशन के माध्यम से सपोर्ट जोड़ना होगा।

अपनी साइट की फाइल बनाएं

शुरू करने के लिए, Visual Studio Code खोलें।

"File -> New File" चुनें एक नया, खाली दस्तावेज़ बनाने के लिए।

"File -> Save As" चुनें अपनी फाइल को सेव करने के लिए, इसे "html" एक्सटेंशन दें।

बुनियादी संरचना

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

नोट: हालांकि हम मूल बातें समझाएंगे, लेकिन यदि आप आगे बढ़ने से पहले HTML सिंटैक्स की मूल बातों से परिचित हैं तो यह बेहतर होगा।

बहुत बुनियादी, शीर्ष स्तर पर, अधिकांश साइटों में तीन ऐसे समूह/खंड होते हैं: एक हेडर, कोर कंटेंट के लिए एक मुख्य भाग, और एक फुटर। Emmet के साथ उन्हें बनाने के लिए, टाइप करें:

#header+#mainsite+#footer

प्रत्येक शब्द के सामने "#" का अर्थ है कि प्रत्येक समूह एक ID के साथ एक div है। लाइन के अंत में Enter दबाएं Emmet को कार्रवाई में देखने के लिए, इस छोटे वाक्यांश को संरचित HTML की तीन लाइनों में बदलते हुए।

हेडर संरचना

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

#logo+#menu_top+#menu_main

इसे विस्तारित करने के लिए Enter दबाएं, और आपके पास आपके साइट के लोगो और दो मेनू के लिए आपके हेडर के अंदर तीन और Divs होंगे।

Emmet में ग्रुपिंग

Emmet के साथ, आप उन्हें पैरेंथेसिस में रखकर तत्वों को समूहित करते हैं। यह आपको अपने पेजों के लिए जटिल संरचनाएं बनाने की अनुमति देता है। तो अब तक सब कुछ पूर्ववत करें और केवल अपना बुनियादी #header+#mainsite+footer कोड पहले से रखें।

अपने कोड में #header को निम्न के साथ बदलें:

(#header>.logo+.menu.top+.menu.main^)

Emmet में आप > कैरेक्टर का उपयोग करके एक स्तर नीचे जा सकते हैं और ^ कैरेक्टर का उपयोग करके एक स्तर ऊपर जा सकते हैं। यह आपको एक तत्व में जाने, वहां दूसरों को जोड़ने, और फिर वापस ऊपर जाने की अनुमति देता है।

परिणाम निम्नलिखित की तरह दिखना चाहिए:

(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer

उपरोक्त का अनुवाद होगा: "ID #header के साथ एक Div (समूह) जोड़ें। इसके अंदर, क्लास ".logo," ".menu.top" और ".menu.main" के साथ तीन Divs जोड़ें। समूह के बाहर एक स्तर ऊपर वापस जाएं, और इसके बगल में ID "#mainsite" और "#footer" के साथ दो और Divs जोड़ें।

पोस्ट संरचना

एक विशिष्ट साइट पर एक बुनियादी पोस्ट में आमतौर पर निम्नलिखित तत्व होते हैं:

• शीर्षक
• इमेज
• अंश (एक टेक्स्ट पैराग्राफ के रूप में)

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

यह वह कोड है जिसे हम जोड़ने जा रहे हैं:

(.post>h3{Post Title $}+img+p{Post Excerpt})*5

यह Emmet को बताता है: "क्लास .post के साथ एक Div बनाएं। इसके अंदर, H3 हेडिंग का एक शीर्षक, एक इमेज, और अंश के लिए एक पैराग्राफ रखें।

"{TEXT}" किसी तत्व के बाद संलग्न होने पर, आप इसकी सामग्री को परिभाषित करते हैं। तो, "{Post Title}" के साथ, यह Emmet को बता रहा है कि प्रत्येक H3 शीर्षक की सामग्री प्लेसहोल्डर टेक्स्ट "Post Title" होगी। आप "Post Title" को अपने नाम या जो भी टेक्स्ट स्ट्रिंग आप पसंद करते हैं, में बदल सकते हैं, और जब कोड विस्तारित होगा तो यह आपके पोस्ट शीर्षक की सामग्री के रूप में उपयोग किया जाएगा।

"Post Title" के बगल में $ एक न्यूमेरिक वेरिएबल है जो पैरेंथेसिस के बाहर देखे जा सकने वाले "5" के साथ संयोजन में काम करता है। पैरेंथेसिस के बाद *5 Emmet को पैरेंथेसिस की सामग्री को पांच बार दोहराने के लिए कहता है। $ को प्रत्येक पोस्ट के पुनरावृत्ति संख्या से बदल दिया जाता है। इस संख्या को अपने पेज पर 원하는 पोस्ट की संख्या से बदलें।

इसे वास्तविक कोड में जोड़ें। यह इस तरह दिखना चाहिए:

(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)

फुटर संरचना

फुटर के लिए, हम दो समूह जोड़ रहे हैं – क्लास ".design" और ".copyright" के साथ दो Divs।

कोड इस प्रकार है:

(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))

यह क्लास ".design" के साथ एक div बनाएगा। इसके अंदर क्लास ".designerslink" के साथ एक लिंक है। इसके बगल में क्लास ".copyright" के साथ एक दूसरा div जोड़ा गया है। इस div के अंदर "Copyright 2020 My Name" सामग्री के साथ सादे टेक्स्ट का एक पैराग्राफ है।

परिणाम यह होगा:

(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})))

अब, बस Enter दबाएं, और आपकी साइट तैयार है!

एक कीस्ट्रोक के साथ, हमने अब तक जो कुछ भी देखा, और वर्णों का यह अल्ट्रा-संकुचित गुच्छा, एक पूर्ण पेज के लिए उचित HTML सिंटैक्स के दर्जनों लाइनों में बदल जाएगा!

Ctrl + S दबाकर या "File -> Save" पर जाकर फाइल में परिवर्तन सेव करें। अपना काम देखने के लिए, अपना ब्राउज़र चालू करें। फिर, या तो "File -> Open" या एक एक्सटर्नल फाइल मैनेजर का उपयोग करके, अपनी HTML फाइल का पता लगाएं और मैन्युअल रूप से इसे ब्राउज़र में खोलें।

समापन

आपने अपनी HTML फाइल बनाने के लिए Emmet का उपयोग करने की मूल बातें सीख ली हैं। बेशक, आप किसी भी समय अपने कोड पर वापस जा सकते हैं इसे ट्वीक करने या अधिक सामान के साथ विस्तारित करने के लिए।

क्या आप पहले से ही Emmet के बारे में जानते थे? क्या आप साइटें बनाते समय कुछ अन्य शॉर्टकट्स का उपयोग कर रहे हैं जो मदद करते हैं? नीचे कमेंट सेक्शन में हमें बताएं।