একটি সাইটের সমস্ত এইচটিএমএল কোড মিনিটে তৈরি করা কি সম্ভব, যদি সেকেন্ডে না হয়? এটা সম্ভব যদি আপনি Emmet ব্যবহার করছেন! এই নতুন পদ্ধতিটি HTML, XML এবং অন্যান্য কাঠামোগত কোড ফর্ম্যাটে কোডের দ্রুত বিকাশের অনুমতি দেয়৷
Emmet অনেক জনপ্রিয় পাঠ্য সম্পাদকের জন্য একটি প্লাগইন। Emmet এর সাহায্যে, আপনি আপনার পৃষ্ঠার কঙ্কাল একটি যুক্তিসঙ্গত কিন্তু খুব সংকুচিত বাক্য গঠনে তৈরি করেন এবং তারপরে এটি সম্পূর্ণ, সঠিক HTML কোডে প্রসারিত করুন। ফলাফলটি জাদুর মতো মনে হয়:পাঠ্যের একটি লাইন শত শত সিনট্যাক্সের লাইনে প্রসারিত হয় এবং আপনার কাছে একটি স্থির পৃষ্ঠা বা এমনকি একটি সম্পূর্ণ সাইটের গঠনও কয়েক মিনিটের মধ্যে প্রস্তুত।
আপনি এখানে শিখবেন কিভাবে আপনি একটি সম্পূর্ণ স্ট্যাটিক ওয়েব পেজ তৈরি করতে Emmet ব্যবহার করতে পারেন। ভিজ্যুয়াল স্টুডিও কোড এই টিউটোরিয়ালের জন্য ব্যবহার করা হয়েছে কারণ এটি এমমেটের জন্য অন্তর্নির্মিত সমর্থনের সাথে আসে। আপনি সাবলাইম টেক্সট এবং অ্যাটমের মতো অন্যান্য এডিটরগুলিতে Emmet ব্যবহার করতে পারেন, তবে আপনাকে এটির জন্য একটি এক্সটেনশনের মাধ্যমে সমর্থন যোগ করতে হবে।
আপনার সাইটের ফাইল তৈরি করুন
শুরু করতে, ভিজ্যুয়াল স্টুডিও কোড খুলুন।
একটি নতুন, ফাঁকা নথি তৈরি করতে "ফাইল -> নতুন ফাইল" নির্বাচন করুন৷
৷
আপনার ফাইলটিকে একটি "html" এক্সটেনশন দিয়ে সংরক্ষণ করতে "ফাইল -> হিসাবে সংরক্ষণ করুন" চয়ন করুন৷
মৌলিক গঠন
প্রতিটি ওয়েব পৃষ্ঠার উপাদান গ্রুপ এবং সাবগ্রুপে সংগঠিত হয়। Emmet এর সাথে কোডিং করার সময়, আপনাকে সর্বদা মনে রাখতে হবে কিভাবে প্রতিটি গোষ্ঠীতে এমন আইটেম রয়েছে যা নিজেরাই আরও বেশি উপাদানের গোষ্ঠী হতে পারে।
দ্রষ্টব্য :যদিও আমরা মূল বিষয়গুলি ব্যাখ্যা করব, আপনি এগিয়ে যাওয়ার আগে যদি আপনি HTML সিনট্যাক্সের মৌলিক বিষয়গুলির সাথে পরিচিত হন তবে এটি আরও ভাল হবে৷
খুব মৌলিক, শীর্ষ স্তরে, বেশিরভাগ সাইটে এই ধরনের তিনটি গ্রুপ/বিভাগ থাকে:একটি শিরোনাম, মূল বিষয়বস্তুর জন্য একটি প্রধান অংশ এবং একটি ফুটার। Emmet দিয়ে সেগুলি তৈরি করতে, টাইপ করুন:
#header+#mainsite+#footer
প্রতিটি শব্দের সামনে "#" এর অর্থ হল প্রতিটি গ্রুপ একটি আইডি সহ একটি ডিভ। এমেটকে কার্যক্ষম দেখতে লাইনের শেষে এন্টার টিপুন, এই ছোট্ট বাক্যাংশটিকে কাঠামোবদ্ধ HTML এর তিনটি লাইনে পরিণত করুন।
হেডার গঠন
একটি সাধারণ সাইটের হেডারে এর লোগো এবং এক বা দুটি মেনু থাকে। আপনার পৃষ্ঠায় সেগুলি যোগ করতে, আপনি পূর্ববর্তী ধাপ থেকে প্রসারিত HTML রাখতে পারেন এবং সরাসরি হেডার ডিভ-এ টাইপ করতে পারেন। তারপর আপনি কিছু টাইপ করতে পারেন:
#logo+#menu_top+#menu_main
এটিও প্রসারিত করতে এন্টার টিপুন এবং আপনার সাইটের লোগোর জন্য আপনার কাছে আরও তিনটি ডিভ এবং আপনার হেডারের ভিতরে দুটি মেনু থাকবে।
ইমেটে গ্রুপিং
Emmet এর সাথে, আপনি উপাদানগুলিকে বন্ধনীতে স্থাপন করে গোষ্ঠীবদ্ধ করুন। এটি আপনাকে আপনার পৃষ্ঠাগুলির জন্য জটিল কাঠামো তৈরি করতে দেয়। তাই এখন পর্যন্ত সবকিছু পূর্বাবস্থায় ফেরান এবং শুধুমাত্র আপনার মৌলিক #header+#mainsite+footer রাখুন আগে থেকে কোড।
#header প্রতিস্থাপন করুন নিম্নলিখিত সহ আপনার কোডে:
(#header>.logo+.menu.top+.menu.main^)
Emmet এ আপনি > ব্যবহার করে একটি স্তর নামাতে পারেন অক্ষর এবং ^ ব্যবহার করে একটি স্তরে যেতে পারে চরিত্র এটি আপনাকে একটি উপাদানে প্রবেশ করতে, সেখানে অন্যদের যোগ করতে এবং তারপরে ফিরে যেতে দেয়।
ফলাফল নিম্নলিখিত মত হওয়া উচিত:
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
উপরেরটি এতে অনুবাদ করবে:“আইডি #হেডার সহ একটি ডিভ (গ্রুপ) যোগ করুন। এর ভিতরে, “.logo,” “.menu.top” এবং “.menu.main” ক্লাস সহ তিনটি ডিভ যোগ করুন। গোষ্ঠীর বাইরে, একটি স্তর উপরে ফিরে আসুন এবং "#mainsite" এবং "#footer" আইডি সহ এর পাশে আরও দুটি Div যোগ করুন৷
পোস্ট স্ট্রাকচার
একটি সাধারণ সাইটের একটি মৌলিক পোস্টে সাধারণত নিম্নলিখিত উপাদান থাকে:
- শিরোনাম
- ছবি
- উদ্ধৃতি (একটি পাঠ্য অনুচ্ছেদ হিসাবে)
এটি এমন একটি লিঙ্কও অফার করবে যা দর্শকদের প্রকৃত পোস্টটি পড়তে এবং সম্ভবত এর বিভাগ, ট্যাগ ইত্যাদির লিঙ্কগুলিকে অনুমতি দেয়। সরলতার জন্য, যদিও, আমরা আপাতত শুধুমাত্র সেই তিনটি উপাদান ব্যবহার করব।
এই কোড যা আমরা যোগ করতে যাচ্ছি:
(.post>h3{Post Title $}+img+p{Post Excerpt})*5 এটি এমেটকে বলে "ক্লাস .পোস্টের সাথে একটি ডিভ তৈরি করুন৷ এটির ভিতরে, H3 শিরোনামের একটি শিরোনাম, একটি চিত্র এবং উদ্ধৃতির জন্য একটি অনুচ্ছেদ রাখুন।
একটি উপাদানের পরে "{TEXT}" সংযুক্ত করে, আপনি এর বিষয়বস্তু নির্ধারণ করুন৷ সুতরাং, "{পোস্ট শিরোনাম}" এর সাথে, এটি এমেটকে বলছে যে প্রতিটি H3 শিরোনামের বিষয়বস্তু হবে স্থানধারক পাঠ্য "পোস্ট শিরোনাম।" আপনি "পোস্ট শিরোনাম" আপনার নাম বা আপনার পছন্দের যে কোনও পাঠ্য স্ট্রিং পরিবর্তন করতে পারেন এবং কোডটি প্রসারিত হলে এটি আপনার পোস্টের শিরোনামের সামগ্রী হিসাবে ব্যবহার করা হবে৷
$ "পোস্ট শিরোনাম" এর পাশে একটি সংখ্যাসূচক পরিবর্তনশীল যা আপনি বন্ধনীর বাইরে দেখতে পাচ্ছেন "5" এর সাথে একত্রে কাজ করে। *5 বন্ধনীটি এমেটকে বন্ধনীর বিষয়বস্তু পাঁচবার পুনরাবৃত্তি করতে বলে। $ প্রতিটি পোস্টের পুনরাবৃত্তি নম্বর দিয়ে প্রতিস্থাপিত হয়। এই নম্বরটি আপনার পৃষ্ঠায় যতগুলি পোস্ট করতে চান তার সাথে প্রতিস্থাপন করুন৷
আসল কোডে এটি যোগ করুন। এটির মত দেখতে হবে:
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5) 
ফুটার স্ট্রাকচার
পাদলেখের জন্য, আমরা দুটি গ্রুপ যোগ করছি - ". ডিজাইন" এবং ". কপিরাইট" ক্লাস সহ দুটি ডিভ৷
কোডটি নিম্নরূপ:
(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})) 
এটি ".design" ক্লাস সহ একটি ডিভ তৈরি করবে। এর ভিতরে ".designerslink" ক্লাসের সাথে একটি লিঙ্ক রয়েছে৷ এর পাশে ".copyright" ক্লাস সহ একটি দ্বিতীয় ডিভ যুক্ত করা হয়েছে। এই ডিভের ভিতরে "কপিরাইট 2020 আমার নাম" বিষয়বস্তু সহ প্লেইন টেক্সটের একটি অনুচ্ছেদ রয়েছে৷
ফলাফল এই হবে:
(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))) এখন, শুধু এন্টার টিপুন, এবং আপনার সাইট প্রস্তুত!
একটি কী প্রেসের মাধ্যমে, আমরা এখন পর্যন্ত যা দেখেছি, এবং এই অতি ঘনীভূত অক্ষর গুচ্ছ, একটি পূর্ণ পৃষ্ঠার জন্য সঠিক HTML সিনট্যাক্সের কয়েক ডজন লাইনে পরিণত হবে!
Ctrl টিপে ফাইলে পরিবর্তনগুলি সংরক্ষণ করুন + S অথবা "ফাইল -> সংরক্ষণ করুন" এ যান। আপনার কাজ দেখতে, আপনার ব্রাউজার ফায়ার করুন. তারপর, হয় "ফাইল -> খুলুন" বা একটি বহিরাগত ফাইল ম্যানেজার ব্যবহার করে, আপনার HTML ফাইলটি সনাক্ত করুন এবং ব্রাউজারে ম্যানুয়ালি খুলুন৷
র্যাপিং আপ
আপনি আপনার HTML ফাইল তৈরি করতে Emmet ব্যবহার করার প্রাথমিক বিষয়গুলি শিখেছেন। অবশ্যই, আপনি যেকোন সময় আপনার কোডে ফিরে আসতে পারেন যাতে এটি টুইক করা যায় বা এটিকে আরও স্টাফ সহ প্রসারিত করা যায়।
আপনি ইতিমধ্যে Emmet সম্পর্কে জানেন? আপনি কি অন্য কিছু শর্টকাট ব্যবহার করছেন যা সাইট তৈরি করার সময় সাহায্য করে? নীচের মন্তব্য বিভাগে আমাদের বলুন৷
৷