কি কয়েক সেকেন্ড বা মিনিটের মধ্যে একটি সাইটের সকল 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-এ পরিণত করবে।
হেডার স্ট্রাকচার
একটি সাধারণ সাইটের Header-এ এর লোগো এবং এক বা দুটি মেনু থাকে। সেগুলো আপনার পেজে যোগ করতে, আপনি আগের ধাপ থেকে এক্সপ্যান্ডেড HTML রেখে হেডার Div-এ সরাসরি টাইপ করতে পারেন। আপনি এখন কিছুটা এইভাবে টাইপ করতে পারেন:
#logo+#menu_top+#menu_main
আবার Enter চাপুন এক্সপ্যান্ড করতে, এবং আপনার সাইটের লোগো এবং দুটি মেনুর জন্য তিনটি নতুন Div পাবেন আপনার Header-এ ভিতরে।
Emmet-এ গ্রুপিং
Emmet-এ, আপনি এলিমেন্টগুলো পেরেনথেসিসে রাখলে গ্রুপ করতে পারেন। এটি আপনাকে আপনার পেজের জন্য জটিল স্ট্রাকচার তৈরি করতে দেয়। তাই এপর্যন্ত যা করলেন সব Undo করুন এবং শুধু আপনার বেসিক #header+#mainsite+footer কোড রাখুন।
আপনার কোডের #header কে নিচের কোড দিয়ে রিপ্লেস করুন:
(#header>.logo+.menu.top+.menu.main^)
Emmet-এ আপনি > ক্যারেক্টার ব্যবহার করে এক লেভেল নিচে যেতে পারেন এবং ^ ক্যারেক্টার ব্যবহার করে এক লেভেল উপরে যেতে পারেন। এটি আপনাকে একটি এলিমেন্টের ভিতরে ঢুকতে, সেখানে অন্যদের যোগ করতে, এবং তারপর আবার বের হওয়া দেয়।
ফলাফল নিচের মতো দেখাবে:
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
উপরোক্তটি অনুবাদ করলে: "ID #header সহ একটি Div (গ্রুপ) যোগ করুন। এর ভিতরে, তিনটি Div যোগ করুন ক্লাস ".logo", ".menu.top" এবং ".menu.main" সহ। এক লেভেল উপরে ফিরে আসুন, গ্রুপের বাইরে, এবং এর পাশে দুটি আর Div যোগ করুন ID "#mainsite" এবং "#footer" সহ।"
পোস্ট স্ট্রাকচার
একটি সাধারণ সাইটের একটি বেসিক পোস্ট সাধারণত নিচের এলিমেন্টগুলো ধারণ করে:
- Title (শিরোনাম)
- Image (ছবি)
- Excerpt (টেক্সট প্যারাগ্রাফ হিসেবে)
এটিকে ভিজিটরকে আসল পোস্ট পড়তে দেয়ার জন্য একটি লিংকও অফার করা উচিত এবং হয়তো এর ক্যাটাগরি, ট্যাগ ইত্যাদির লিংক। সহজ রাখতে, আমরা ফিলহাল শুধু এই তিনটি এলিমেন্ট ব্যবহার করব।
এটি হলো কোড যা আমরা যোগ করব:
(.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 Emmet-কে বলে পেরেনথেসিসের কন্টেন্ট পাঁচবার রিপিট করবে। $ প্রতিটি পোস্টের ইটেরেশন নম্বরে রিপ্লেস হয়ে যাবে। এই নম্বরকে আপনার পেজে কতগুলো পোস্ট চান সেটি দিয়ে রিপ্লেস করুন।
এটি আসল কোডে যোগ করুন। দেখতে যেন হবে:
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)
ফুটার স্ট্রাকচার
ফুটারের জন্য, আমরা দুটি গ্রুপ যোগ করব—দুটি Div ক্লাস ".design" এবং ".copyright" সহ।
কোডটি নিচের মতো:
(.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 ফাইল লোকেট করুন এবং ম্যানুয়ালি ব্রাউজারে খুলুন।
শেষ কথা
আপনি Emmet ব্যবহার করে HTML ফাইল তৈরির বেসিক শিখেছেন। অবশ্যই, আপনি যেকোনো সময় আপনার কোডে ফিরে আসতে পারেন সেটি টুইক বা আরও স্টাফ যোগ করে এক্সপ্যান্ড করতে।
আপনি কি ইতিমধ্যে Emmet সম্পর্কে জানতেন? সাইট তৈরি করার সময় সাহায্য করে এমন অন্য শর্টকাট ব্যবহার করেন কি? নিচে কমেন্ট সেকশনে আমাদের জানান।
