- HTML টিউটোরিয়ালঃ তৃতীয় পর্ব (ফরম্যাটিং ট্যাগ – পার্ট ১)
- HTML টিউটোরিয়াল: পঞ্চম পর্ব (টেবিল ট্যাগ – পার্ট ১)
- সিএসএস টিউটোরিয়ালঃ ১৪তম পর্ব(Unordered List)
- HTML টিউটোরিয়াল: ষষ্ঠ পর্ব (টেবিল ট্যাগ – পার্ট ২)
- সিএসএস টিউটোরিয়ালঃ ১৫তম পর্ব(Custom List)
- HTML টিউটোরিয়াল: ৭ম পর্ব (HTML List ট্যাগ)
- HTML টিউটোরিয়াল: ৮ম পর্ব (Form & Input ট্যাগ) পার্ট – ১
- HTML টিউটোরিয়াল: ৮ম পর্ব (Form & Input ট্যাগ) পার্ট – ২
- HTML টিউটোরিয়াল: ৯ম পর্ব (URL Redirection)
- HTML টিউটোরিয়াল: ১০ম পর্ব (Character Entities)
- HTML টিউটোরিয়াল: ১১তম পর্ব (HTML5 Tags)
- HTML টিউটোরিয়াল: ১২তম পর্ব (HTML5 Tags)
- HTML টিউটোরিয়াল: ১৩তম পর্ব (HTML5 Tags)
- HTML টিউটোরিয়াল: ১৪তম পর্ব (HTML URL)
- HTML টিউটোরিয়াল: ১৫তম পর্ব (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 লিখবো। এবার চলুন উদাহরণ এর মাধ্যমে শিখি…
আমরা এইচটিএমএল এ ম্যানুয়ালি কোডিং লিখি এভাবে…
[html]<html>
<head>
<title>This is HTML Zen Coding Example</title>
</head>
<body>
<p>Demo text goes here<p>
</body>
</html>[/html]
খেয়াল করুন, উপরের কোড টুকু লিখতে আমার প্রায় ১ মিনিটের মতো সময় লেগেছে। যাদের টাইপিং স্পিড ভাল না বা কোড সম্পর্কে যাদের ভাল আইডিয়া নাই তাদের লিখতে আর সময় লাগবে। কিন্তু Zen Coding এমন একটি প্লাগিং/মডিউল, যার সাহায্যে আপনি অনেক সহজে উপরের এই কোডটুকুকে ১০-১৫ সেকেন্ডের মধ্যে লিখে ফেলতে পারবেন। কিভাবে করবেন সেটা নিচের পদ্ধতি গুলো অনুসরন করুন…
আপনার এইচটিএমএল এডিটরে জেন কোডিং এক্টিভেট থাকার অবস্থায় আপনার বর্তমান ডকুমেন্টকে .html ফরম্যাটে সেভ করে নিন। এবার ডকুমেন্ট এরসেকশনের মধ্যে h2 লিখে ট্যাব কী প্রেস করুন। ফলাফল পাবেন <h2></h2> এবং মাউস কার্সর পাবেন দুই ট্যাগের মাঝে। এবার h2 কে “myH2” আইডি সিলেক্টর নাম দিবো। তাহলে লিখুনঃ h2#myH2 এবং ট্যাব প্রেস করুন। ফলাফল পাবেন <h2 id=”myH2”></h2> এবং মাউস কার্সর পাবেন দুই ট্যাগের মাঝে। এবার h2 ট্যাগ কে আইডি নাম দিবো এবং এর ভিতরে ৩টি anchor ট্যাগ নিবো। মানে কোডটি হবে নিচের মতোঃ
[html]
<h2 id=”myH2”>
<a href=””></a>
<a href=””></a>
<a href=””></a>
</h2>
[/html]
উপরের এই ফলাফলটি পেতে হলে আপনাকে কোডিংটি লিখতে হবে 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’র পর) মাউস কার্সর রেখে ট্যাব কী প্রেস করুন। তাহলে ফলাফল পাবেন নিচের কোডগুলোঃ
[html]
<div id=”page”>
<div></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>
[/html]
উপরের এই 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=#]। তাঁরপর ট্যাব কী প্রেস করবেন।
উপরের বলা মত কোডিং করতে পারলেই আপনি নিচের মত ফলাফল পাবেনঃ
[html]
<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>
[/html]
Note: div#page>div.logo+ul#navigation>li*5>a কোডটিতে > সাইন ইউজ করা হয়েছে কোন ইলিমেন্ট এর ভিতরে প্যরেন্ট ট্যাগ বা ইলিমেন্ট তৈরী করতে আর + সাইন ইউজ করা হয়ে সিব্লিং (Sibling) ইলিমেন্ট তৈরী করতে। সিব্লিং বলতে এখানে একটি মেইন প্যারেন্ট ট্যাগ/ইলিমেন্ট এর ভিতরে অনেক গুলো সাব প্যরেন্ট।
Zen Coding নিয়ে মোটামুটি বিস্তারিত আলোচনা এখানেই শেষ। আর জানতে নিজে নিচে চেষ্ঠা + চর্চা করুন! বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপে, পেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন। 🙂
দারুন লিখেছেন ভাই।.
ধন্যযোগ! 🙂
ধন্যযোগ ভাই! 🙂
vai awsam
Thanks
Zen Coding এর চেয়েও ভালো ছিল Spark-up. কিন্তু আফসুস 🙁 জিনিসটা ৩ বছর ধরে আপডেট করা হয়না। তাই এটার সাবলাইম ভার্সন ও নাই।.
hmm
ops! 🙁
U a Good job!
ধন্যযোগ ! 🙂
Thanks 🙂
ধন্যবাদ আরও একটি অসাধারন টিউটোরিয়াল পোস্ট করার জন্য………।.
আপনাকেও ধন্যযোগ কষ্ট করে পড়ার জন্য! 🙂
ভাল লাগলো ,শিখার মতো অনেক কিছু…
হ্যাঁ!
ভাই নতুন আরও আনেক কিছু শিখছি ধন্যবাদ আপনাকে।
ব্লগের সাথে থাকুন, যাই জানবো শিখবো সব শেয়ার করবো! :
ভাল থাকবেন সব সময়! 🙂
Thanks for your great information about Zen Coding.
আপনাকেও ধন্যযোগ! 🙂
থান্ক্যু
thank u vai