দ্রুত HTML কোড লিখুন Zen Coding প্লাগিং দিয়ে!

Zen Coding এইচটিএমএল এর কোন ট্যাগ বা ভার্সন নয়। এটা একটই কোডিং ফ্রেমওয়ার্ক যা দিয়ে আপনি অনেক সহজে কোডিং করতে/ লিখতে পারবেন। এটা শুধু মাত্র একটি প্লাগিং/মডিউল যা আপনার কোডিং করার গতিকে বহুগুনে বাড়িয়ে দিবে। Zen Coding প্লাগিং/মডিউল দিয়ে কোডিং করতে চাইলে আপনাকে এই প্লাগিংটি ডাউনলোড করে নিতে হবে। আপনি নোটপ্যাড, সাব্লাইম টেক্সট এডিটর, ড্রিমওয়েভার সহ অন্যান্য টেক্সট + এইচটিএমএল এডিটর এর জন্য এই প্লাগিং পাবেন এই ঠিকানায়ঃ http://code.google.com/p/zen-coding/

সতন্ত্র ভাবে প্লাগিং গুলোর ডাউনলোড লিঙ্কঃ http://code.google.com/p/zen-coding/downloads/list

Sublime Text Editor এর জন্য লিঙ্কঃ http://www.sublimetext.com/2

Zen Coding সম্পর্কে আরও বিস্তারিত জানতে পারবেনঃ https://tutsplus.com/course/improve-workflow-in-sublime-text-2/ ঠিকানার ভিডিও থেকে।

আপনার এইচটিএমএল এডিটর এর জন্য প্লাগিংটি ডাউনলোড করে এক্টিভেট করুন নির্দেশনা অনুযায়ী। আমি এখানে সাব্লাইম টেক্সট এডিটর দিয়ে Zen Coding লিখবো। এবার চলুন উদাহরণ এর মাধ্যমে শিখি…

আমরা এইচটিএমএল এ ম্যানুয়ালি কোডিং লিখি এভাবে…

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<html>
 
<head>
 
<title>This is HTML Zen Coding  Example<title>
 
</head>
 
<body>
 
<p>Demo text goes here</p>
 
</body>
 
</html>

খেয়াল করুন, উপরের কোড টুকু লিখতে আমার প্রায় ১ মিনিটের মতো সময় লেগেছে। যাদের টাইপিং স্পিড ভাল না বা কোড সম্পর্কে যাদের ভাল আইডিয়া নাই তাদের লিখতে আর সময় লাগবে। কিন্তু Zen Coding এমন একটি প্লাগিং/মডিউল, যার সাহায্যে আপনি অনেক সহজে উপরের এই কোডটুকুকে ১০-১৫ সেকেন্ডের মধ্যে লিখে ফেলতে পারবেন। কিভাবে করবেন সেটা নিচের পদ্ধতি গুলো অনুসরন করুন…

আপনার এইচটিএমএল এডিটরে জেন কোডিং এক্টিভেট থাকার অবস্থায় আপনার বর্তমান ডকুমেন্টকে .html ফরম্যাটে সেভ করে নিন। এবার ডকুমেন্ট এরসেকশনের মধ্যে h2 লিখে ট্যাব কী প্রেস করুন। ফলাফল পাবেন <h2></h2> এবং মাউস কার্সর পাবেন দুই ট্যাগের মাঝে। এবার h2 কে “myH2” আইডি সিলেক্টর নাম দিবো। তাহলে লিখুনঃ h2#myH2 এবং ট্যাব প্রেস করুন। ফলাফল পাবেন <h2 id=”myH2”></h2> এবং মাউস কার্সর পাবেন দুই ট্যাগের মাঝে। এবার h2 ট্যাগ কে আইডি নাম দিবো এবং এর ভিতরে ৩টি anchor ট্যাগ নিবো। মানে কোডটি হবে নিচের মতোঃ

01
02
03
04
05
<h2 id=”myH2”>
<a href=””></a>
<a href=””></a>
<a href=””></a>
</h2>

উপরের এই ফলাফলটি পেতে হলে আপনাকে কোডিংটি লিখতে হবে h2#myH2>। আপনি যদি anchor a এর অ্যাট্রিবিউট href=”” এর মধ্যে # চিহ্নটি পেতে চান তবে এই কোডটি লিখুনঃ h2#myH2>a[href=#] এবার ট্যাব প্রেস করুন।

এবার আসুন একটু কমপ্লেক্স কোড দেখি। নিচের কোডটি http://code.google.com/p/zen-coding/ থেকে নেয়া।

div#page>div.logo+ul#navigation>li*5>a

উপরের কোডগুলো টাইপ করে কোডের সর্ব ডানে(a’র পর) মাউস কার্সর রেখে ট্যাব কী প্রেস করুন। তাহলে ফলাফল পাবেন নিচের কোডগুলোঃ

01
02
03
04
05
06
07
08
09
10
<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

উপরের এই div#page>div.logo+ul#navigation>li*5>a কোডটির বর্ননাঃ

আপনি যদি উপরের #page আইডিটি div ট্যাগের/সেকশনের জন্য ডিক্লেয়ার না করতেন তাহলেও এটি ট্যাগের/সেকশনের মধ্যেই #page ডিক্লেয়ার করতো। প্রমান পেতে নিজেই চেষ্ঠা করুন। আবার আপনি ইচ্ছা করলে এই পেজ আইডিটি লিস্ট আইটেম এর মধ্যেও অ্যাপ্লাই করতে পারবেন।

যাহোক, একই ভাবে পরের div ট্যাগের মধ্যে .logo ক্লাস ডিক্লেয়ার করা হয়েছে। এইখানেও .logo ক্লাস div ট্যাগের/সেকশনের জন্য ডিক্লেয়ার না করতেন তাহলেও এটি ট্যাগের/সেকশনের মধ্যেই .logo ডিক্লেয়ার করতো। এককোথাও, আপনি ইলিমেন্ট(ট্যাগ) ডিক্লেয়ার করে না দিলে সেটি বাই ডিফল্ট div ট্যাগের মধ্যেই অ্যাপ্লাই হবে।

এবার দেখুন, আনঅর্ডারেড লিস্ট ul কে #navigation আইডি দিয়ে ডিক্লেয়ার করে দেয়া হয়েছে। লক্ষ করুন, এখানে কিন্তু কোন ইলিমেন্ট এর উপরে আইডিটি অ্যাপ্লাই হবে সেটি উল্লেখ করে দেয়া হয়েছে। এখানে যদি কোন ইলিমেন্ট বলা না থাকতো তাহলে এটি div এর আন্ডারে আইডি #navigation ডিক্লেয়ার করে দিতো।

এবার আনঅর্ডারেড লিস্ট টাইপ এর মধ্যে ৫টি লিস্ট আইটেম ইনক্লুড করার জন্য li*5 ইউজ করা হয়েছে। * সাইন এর পরে আপনি যত সংখ্যা লিখবেন ততটা লিস্ট আইটেম আসবে। এরপরে লেসদেন সাইন ইউজ ancho ট্যাগ a ডিক্লেয়ার করার অর্থ হল ৫টি লিস্ট আইটেমের মধ্যে ৫টি anchor ট্যাগ ইনক্লুড করা। anchor ট্যাগ বাই ডিফল্ট href=”” অ্যাট্রিবিউট ডিক্লেয়ার করে। আপনি anchor ট্যাগের href=”” অ্যাট্রিবিউট মধ্যে # অটো সাইন দিতে চান তবে anchor ট্যাগ Zen Coding এ anchor ট্যাগ লিখবেন এইভাবেঃ a[href=#]। তাঁরপর ট্যাব কী প্রেস করবেন।

উপরের বলা মত কোডিং করতে পারলেই আপনি নিচের মত ফলাফল পাবেনঃ

01
02
03
04
05
06
07
08
09
10
<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Note: div#page>div.logo+ul#navigation>li*5>a কোডটিতে > সাইন ইউজ করা হয়েছে কোন ইলিমেন্ট এর ভিতরে প্যরেন্ট ট্যাগ বা ইলিমেন্ট তৈরী করতে আর + সাইন ইউজ করা হয়ে সিব্লিং (Sibling) ইলিমেন্ট তৈরী করতে। সিব্লিং বলতে এখানে একটি মেইন প্যারেন্ট ট্যাগ/ইলিমেন্ট এর ভিতরে অনেক গুলো সাব প্যরেন্ট।

Zen Coding নিয়ে মোটামুটি বিস্তারিত আলোচনা এখানেই শেষ। আর জানতে নিজে নিচে চেষ্ঠা + চর্চা করুন!