HTML টিউটোরিয়াল: ১৫তম পর্ব (HTML Zen Coding)

Print Friendly

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 লিখবো। এবার চলুন উদাহরণ এর মাধ্যমে শিখি…

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

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

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

উপরের এই ফলাফলটি পেতে হলে আপনাকে কোডিংটি লিখতে হবে 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’র পর) মাউস কার্সর রেখে ট্যাব কী প্রেস করুন। তাহলে ফলাফল পাবেন নিচের কোডগুলোঃ

উপরের এই 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=#]। তাঁরপর ট্যাব কী প্রেস করবেন।

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

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

Zen Coding নিয়ে মোটামুটি বিস্তারিত আলোচনা এখানেই শেষ। আর জানতে নিজে নিচে চেষ্ঠা + চর্চা করুন! বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপেপেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন। 🙂

Print Friendly

ট্যাগ সমূহঃ

লেখক: আরিফুল ইসলাম শাওন

আরিফুল ইসলাম শাওন, ডাক নামেই বেশি পরিচিত। জন্ম থেকে রংপুরে থাকি। বর্তমানে হিসাববিজ্ঞান নিয়ে জাতীয় বিশ্ববিদ্যালয়ের অধিনে গ্রাজুয়েশন সম্পন্ন করেছি। ফ্রিলান্সিং পেশায় আছি গত ৭ বছর থেকে। নিজের আইটি ফার্ম রংপুরসোর্স এর সিইও এর দায়িত্ব পালন করছি। পাশাপাশি ব্লগিং করছি আমার ইংরেজি ব্লগে। আপনার ফ্রীলান্সিং বা প্রযুক্তি নিয়ে যেকোন প্রয়োজন জানাতে পারেন ফেসবুক গ্রুপ এ। আমাকে ফেসবুকে পাবেন এখানেটুইটারে অনুসরণ করতে পারেন। আমার সম্পর্কে আরো বিস্তারিত এখানে। অথবা আমাকে যেকোন বিষয়ে প্রশ্ন করতে পারেন আমার ব্লগের "জিজ্ঞাসা?" পাতায়।

সম্পূর্ণ প্রোফাইল দেখুন!

বাংলা ভাষায় ওয়েব ডিজাইন, ডেভেলপমেন্ট, ডেক্সটপ অ্যাপ্লিকেশান ডেভেলপমেন্ট শিখতে চান? আমরা রংপুর সোর্স আপনার জন্য হাই কোয়ালিটি এবং প্রোফেসনাল মানের প্রোজেক্ট এবং রিসোর্স ভিত্তিক ভিডিও টিউটোরিয়াল প্রকাশ করছি। আপনি আমাদের থেকে থেকে ভিডিও গুলো পেতে চাইলে অবশ্যই ক্রয় করতে হবে। তবে, ক্রয় করবার পূর্বে ভিডিও দেখে নিতে পারেন এজন্য আমরা আপনাকে দিচ্ছি ৩০ শতাংশ ফ্রী ভিডিও যেকোনো ভিডিও কোর্সের জন্য। ভিডিও কোয়ালিটি এবং প্রেজেন্টেশান দেখে আপনি সন্তুষ্ট হলে, তবেই বাকি টিউটোরিয়াল গুলোর ডিভিডি বা সিডি অর্ডার করুন! জেনে রাখা ভাল, আমাদের একেকটি ভিডিও কোর্স উক্ত ক্ষেত্রে প্রোফেসনালদের দ্বারাই তৈরি করা। তাই আপনি প্রোফেসনাল কাজ শিখবেন সেই দৃষ্টিকোণ থেকে আমাদের ভিডিও টিউটোরিয়াল গুলো ক্রয় করবেন!

২১ responses to “HTML টিউটোরিয়াল: ১৫তম পর্ব (HTML Zen Coding)”

  1. MD Ariful Islam Sonnet says:

    দারুন লিখেছেন ভাই।.

  2. Khondoker Zahidul Hossain Choyan says:

    Zen Coding এর চেয়েও ভালো ছিল Spark-up. কিন্তু আফসুস 🙁 জিনিসটা ৩ বছর ধরে আপডেট করা হয়না। তাই এটার সাবলাইম ভার্সন ও নাই।.

  3. ধন্যবাদ আরও একটি অসাধারন টিউটোরিয়াল পোস্ট করার জন্য………।.

  4. আরিফ আহমেদ says:

    ভাল লাগলো ,শিখার মতো অনেক কিছু…

  5. রাব্বি says:

    ভাই নতুন আরও আনেক কিছু শিখছি ধন্যবাদ আপনাকে।

Leave a Reply

Your email address will not be published. Required fields are marked *