अगर आप अपना करियर वेब डेवलपमेंट में बनाना चाहते है तो आपको HTML ,CSS, JS आदि सिखाना पड़ता है इसी से एमेट भी टूल है तो आपको फ़ास्ट कोड लिखें में मदद करता है इस ब्लॉग में आप Emmet for HTML: A Beginner’s Guide to Writing Faster Markup के बारें में जानेंगे
एमेट क्या है (बहुत आसान शब्दों में) -What Emmet is (in very simple terms)
Emmet एक टूल है जो मुख्य रूप से वेब डेवलपमेंट करते समय कोड को फ़ास्ट लिखने में मदद करता है | इसे उदाहरण से समझते है की यह डेवलपमेंट करते समय कैसे मदद करता है |
जैसे - ul>li*3 लिखते है तो एमेट अपने आप इसे एक ul टैग के अन्दर ३ li टैग बना देगा |
Why Emmet is useful for HTML beginners
इसे सिखने के कई सारें फायदे है जैसे की
- समय बचाता है |
- गलतियाँ कम होता है |
- स्ट्रक्चर समझने में मदद करता है |
- हम फ़ास्ट सिखा पातें है |
- इससे हमारा विश्वास बढ़ता है |
- एमेट बिगिनर को html जल्दी ,सही और आसान तरीके से सिखने में मदद करता है |
HTML शुरुआती लोगों के लिए Emmet क्यों उपयोगी है-How Emmet works inside code editors
जैसे ही हम कोड एडिटर में कुछ टाइप करते है कोड एडिटर हमें सजेसन देता है और उसके बाद जब भी हम टेब बटन या इंटर बटन दबाते है तो पूरा कोड अपने आप लिखा जाता है |
जैसे -
div>ul>li*3
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
एमेट कई लोकप्रिय कोड एडिटर में पहले से मौजूद होता है या इसका प्लगइन इनस्टॉल करना पड़ता है | कुछ लोकप्रिय एडिटर निम्नलिखित है |
- VS Code
- Sublime Text
- Atom
- Brackets
बेसिक एम्मेट सिंटैक्स और संक्षिप्तीकरण-Basic Emmet syntax and abbreviations
टैग बनाना : जैसे ही हम किसी टैग का नाम लिखते है एमेट उसे ओपनिंग और क्लोजिंग टैग साथ पूरा लिख देता है |
जैसे : मैं कोड एडिटर में div लिखूंगा एमेट उसे <div ></div > में कम्पलीट कर देगा |
नेस्टिंग (Tags के अंदर Tags )
> इस सिम्बोल का का मतलब है अंदर यानि की किसी टैग के अन्दर दूसरा टैग जैसे -अगर हम div>p लिखते है तो वो कुछ इस तरह से दिखेगा |
<div>
<p></p>
</div>
यहाँ Child Operator (>) का इस्तेमाल होता है |
मल्टीपल टैग : जब हमें एक की तरह के कई सारें टैग चाहिए होता है तो हम कुछ इस तरह से tag*number लिखते है | * का मतलब है multiple करना इसका यूज़ हम कुछ इस कर सकते है |
syntax : tag*number
Example : li*3
<li></li>
<li></li>
<li></li>
कई तरह के टैग एक साथ चाहिए (सिब्लिंग Sibling Operator (+) )
h1+p यह लिखने का शॉर्टकट तरीका है लेकिन यह कुछ इस तरह से कम्पलीट होकर आएगा
<h1></h1>
<p></p>
क्लास और आईडी के साथ
शॉर्टकट
div.container
div#main
कम्पलीट होने के बाद कुछ इस तरह से पूरा होगा
<div class="container"></div>
<div id="main"></div>
Creating HTML elements using Emmet
मान लेते है हमें एक div टैग चाहिए अब जैसे ही एडिटर में div लिखेंगे एमेट हमें div को कम्पलीट करने का सजेसन देगा और उसके बाद जैसे ही हम कीबोर्ड से tab बटन या इंटर बटन दबाएँगे है टैग पूरा कम्पलीट लिखा जाता है |
div=<div> </div >
ये तो एक नार्मल टैग को पूरा कम्पलीट किया हमने लेकिन अगर हमें किसी टैग के अन्दर टैग चाहिए होगा तो उसमे भी एमेट हमारी मदद करता है | यह कैसे होता है चलिए देखते है वास्तव में इसे नेस्टिंग के नाम से जाना जाता है यानि की टैग के अन्दर टैग
अब मान लीजिये हमें एक div के अन्दर एक पैराग्राफ टैग चाहिए तो इसे एमेट की सहायता से लिखने के लिए कुछ इस तरह से हमें टाइप करना होगा
div >p ये एक शॉर्टकट हुआ अब जैसे ही हम कीबोर्ड से tab या इंटर बटन दबाएँगे तो यह कुछ इस तरह बन जायेगा |
<div>
<p></p>
</div>
Adding classes, IDs, and attributes
जैसा की हमने अभी जाना की एमेट कम से कम टाइप करके ज्यादा से ज्यादा कोड लिखने में मदद करता है जो हमारा टाइम बचाता है इसी तरह से हम एमेट के सहायता से classes, IDs, and attributes को ऐड कर सकते है चलिए इसे भी सिख लेते है |
जब हमें कोई क्लास बनाना होता है तो उसमे हम (.) डॉट सिंबल का यूज़ करते है चलिए उदाहरण देखते है -
div.box अगर हम कुछ इस प्रकार से टाइप करते है तो हमें कुछ इस प्रकार का आउटपुट देखने को मिलता है <div class="box"></div>
जब हमें कोई ID जोड़ना होता है तो उसमे हम (#) हेश सिंबल का यूज़ करते है चलिए उदाहरण देखते है -
div#header अगर हम इस तरह से टाइप करते है तो हमारा आउटपुट कुछ इस तरह से आएगा <div id="header"></div>
और जब हमें कोई Attributes add करना होता है तो उसके लिए हम [] square brackets का इस्तेमाल करते है चलिए इसे भी करके देख लेते है -
input[type=text] अगर हम कुछ इस प्रकार से टाइप करते है तो हमारा आउटपुट कुछ इस प्रकार से आएगा <input type="text">
Creating nested elements
Nested elements का मतलब है एक HTML टैग के अंदर दूसरा टैग बनाना। Emmet की सहायता से हम इसे बड़ी आसानी से बना सकते है जो हमारे टाइम को बचाता है |
नेस्टेड एलेमेंट्स को क्रिएट करने के लिए हमें कुछ सिंबल का आवश्यकता होता है जो की निम्नलिखित है |
> -Parent से Child
+ -Same level (Sibling)
* -Multiple elements
. -Class
{ } -Text
Basic Nested Structure
अगर हम कुछ इस तरह से लिखते है तो div>p हमारा आउटपुट कुछ इस प्रकार आता है |
<div>
<p></p>
</div>
यहाँ <p> टैग, <div> टैग के अंदर है ।
Multiple Levels Nested Structure
अगर हम कुछ इस प्रकार से लिखते है तो div>ul>li तो हमारा आउटपुट कुछ इस प्रकार से आता है |
<div>
<ul>
<li></li>
</ul>
</div>
Nesting + Class + Text
अगर हमें एक साथ Nesting + Class + Text चाहिए तो हम कुछ इस प्रकार से लिख सकते है
div.container>h1{Welcome}+p{This is my website}
आउटपुट:
<div class="container">
<h1>Welcome</h1>
<p>This is my website</p>
</div>
Repeating elements using multiplication
एमेट के सहायता से हम एक की तरह के टैग को कई बार लिख (*) स्टार सिंबल का यूज़ करके लिख सकते है | चलिए उदाहरण देखते है |
अगर हमें किसी चीज का लिस्ट बना तो हमें ५ बार li टैग को लिखना पड़ेगा लेकिन एमेट के सहायता हम एक बार में कुछ इस तरह से लिख सकते है li*5 तो हमर आउटपुट कुछ इस प्रकार आएगा -
<li></li>
<li></li>
<li></li>
<li></li
><li></li>
Generating full HTML boilerplate with Emmet
जब भी हम कोई नया HTML पेज बनाते है तो हमें एक बेसिक स्ट्रक्चर की आवश्यकता होती है जो एक प्रोग्राम को रन होने के लिए चाहिए इसे बार बार न लिखना पड़े इसके लिए बॉयलरप्लेट के सहायता हम उस कोड को इम्पोर्ट कर लेते है जो हमारा टाइम बचाता है | बॉयलरप्लेट में वह कोड पहले से लिखा होता है बस उसे शॉर्टकट key से इम्पोर्ट करना होता है |
एमेट की सहायता से हम exclamation mark (!) टाइप करके HTML बॉयलरप्लेट कोड को इम्पोर्ट कर सकते है जिसमे html पेज का बेसिक स्ट्रक्चर होता है |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
निष्कर्ष :
इस ब्लॉग में Emmet for HTML: A Beginner’s Guide to Writing Faster Markup में आपने जाना की हम एमेट का यूज़ करके कैसे फ़ास्ट कोडिंग कर सकते है |
