ওয়েব ডেভোলপমেন্ট ।। পর্ব- ৫ ।। 10% for shy-fox

আসসালামু-আলাইকুম বন্ধুরা
কেমন আছেন সবাই? আশা করছি সকলে ভালো আছেন। আমিও আল্লাহর রহমতে সুস্থ ও ভালো আছি। ওয়েব ডেভোলপমেন্টের ৫ম পর্বে আপনাদের স্বাগত জানাচ্ছি। গত পর্বে আমি আপনাদের HTML এর ইলিমেন্টস, এট্রিবিউট, এবং কিছু ট্যাগ সম্পর্কে আলোচনা করেছিলাম। গত চার পর্বের লিংক আমি নিচে দিয়ে দিচ্ছি। ঐ পর্ব গুলো ভিজিট করে এসে এই আর্টিকেল টি দেখবেন তাহলে সব কিছু ইজিলি বোঝে যাবেন আশা করছি। তো চলুন কোড করা শুরু করি।

• HTML ফরমেটিং ইলিমেন্টস
  ▪️ <i> - Italic text
  ▪️ <mark> - Marked text
  ▪️ <del> - Deleted text
  ▪️ <small> - Smaller text
  ▪️ <ins> - Inserted text
  ▪️ <sub> - Subscript text
  ▪️ <sup> - Superscript text

---

• HTML কুটেশন্স
  ▪️ <q> for Short Quotations
  ▪️ <abbr> for Abbreviations
  ▪️ <address> for Contact Information
  ▪️ <bdo> for Bi-Directional Override

---

• HTML কমেন্টস

---

• HTML কালারস
  ▪️ Background Color
  ▪️ Text Color

<i> </i> দিয়ে টেক্সট এর লেখাকে ইটালিক ফরমে লেখা হয় অর্থাৎ লেখাগুলো একটু বাকা বাকা থাকবে। নিচের কোডটি লক্ষ্য করুন।

<p> ট্যাগের মধ্যে আমি প্রজেক্ট হিরোইজম লিখেছি । সেই সাথে <i> ট্যাগের মধ্যেও সেইম টেক্সট লিখেছি। আউটপুট লক্ষ করলে দেখবেন <i> এর মধ্যে লেখার কারনে লেখাটি একটু
বাকা দেখাচ্ছে।

<mark> </mark> দিয়ে টেক্সট এর যেকোনো অংশকে মার্ক করে দেখানো হয়। অর্থাৎ লেখাটি হলুদ কালার হয়ে মার্ক হয়ে থাকবে। নিচের কোডটি লক্ষ্য করুন।

<mark> </mark> ট্যাগের মধ্যে আমার বাংলা বল্গ লিখেছি এটি হলুদ কালার হয়ে মার্ক হয়ে দেখাচ্ছে ।

<del> </del> দিয়ে টেক্সট এর যেকোনো অংশকে বাদ দেয়ার কাজে ইউজ করা হয়। অর্থাৎ লেখাটির মাঝখান দিয়ে কাঁটা দাগ হয়ে থাকবে। নিচের কোডটি লক্ষ্য করুন।

<del> </del> ট্যাগের মধ্যে blue লেখাটির মাঝখান দিয়ে কাঁটা দাগ হয়ে আছে।

<small> </small> দিয়ে টেক্সট এর লেখাকে ছোট করে দেখানো হয়। অর্থাৎ লেখাটি নরমাল লেখা থেকে ছোট হয়ে থাকবে। নিচের কোডটি লক্ষ্য করুন।

<small> </small> ট্যাগের মধ্যে লেখাটি তুলনামূলক ছোট হয়ে দেখাচ্ছে।

<ins> </ins> দিয়ে টেক্সট এর লেখার নিচে একটি আন্ডারলাইন করে দেখানো হয়। নিচের কোডটি লক্ষ্য করুন।

<ins> </ins> ট্যাগের মধ্যে লেখাটির নিচে আন্ডারলাইন হয়ে দেখাচ্ছে।

<sub> </sub> দিয়ে টেক্সট এর লেখাকে নরলাম লাইন এর চেয়ে একটু নিচে দেখানো হয়। নিচের কোডটি লক্ষ্য করুন।

<sub> </sub> ট্যাগের মধ্যে লেখাটি নরলাম লাইন থেকে নিচের দিকে দেখাচ্ছে।

<sup> </sup> দিয়ে টেক্সট এর লেখাকে নরলাম লাইন এর চেয়ে একটু উপরের দিকে দেখানো হয়। নিচের কোডটি লক্ষ্য করুন।

<sup> </sup> ট্যাগের মধ্যে লেখাটি নরলাম লাইন থেকে উপরের দিকে দেখাচ্ছে।

<q> </q> দিয়ে লেখার দুই পাশে কোটেশন মার্ক দেয়া হয়ে থাকে। নিচের কোডটি লক্ষ করুন।

<q> </q> এর মধ্যে আমি তোমায় ভালোবাসি লেখাটির দুই পাশে কোটেশন হয়ে আছে।

<abbr> </abbr> দিয়ে কোন একটি লেখার সংক্ষিপ্ত রুপকে তার ফুল মিনিং হিসেবে দেখানো হয়ে থাকে। এক্ষেত্রে
<abbr> </abbr> এই ট্যাগ এর এট্রিবিউট হিসেবে title নিতে হবে এবং এর value হিসেবে ফুল মিনিং টি এর মধ্যে লিখে দিতে হবে। নিচের কোডটি লক্ষ করুন।

WHO এর নিচে ডট ডট হয়ে আছে। এখানে মাউস নিলে তার ফুল মিনিং দেখাবে।

<address> </address> ট্যাগ দিয়ে কোন একটি ডকুমেন্ট বা আর্টিকেল এর অথর বা উনার এর সাথে যোগাযোগ করার এড্রেস লেখা থাকে। নিচের কোডটি লক্ষ করুন।

আমার সাথ যোগাযোগ করার এড্রেস উদাহরণ হিসেবে আমি দেখালাম।

<bdo> </bdo> ট্যাগ দিয়ে বোঝায় bi-directional override (bdo)। অর্থাৎ লেখার ডিরেকশনকে যদি চেঞ্জ করতে চান তবে এই ট্যাগ ইউজ করতে হবে আপনাকে। এই ট্যাগ এর ভিতরে এট্রিবিউট হিসেবে dir লিখতে হবে এবং এর ভ্যালু হিসেবে ডিরেকশন বলে দিতে হবে । ডিকেরশন দুই ধরনের হয়ে থাকে- rtl (right to left) এবং ltr (left to right) নিচের কোডটি লক্ষ করুন।

bdo এর মধ্যে direction এ rtl (right to left) বলে দেয়া আছে । তাই লেখাগুলো ডান দিক থেকে শুরু হয়েছে সব ক্যারেক্টার।

HTML কমেন্টস খুবই গুরুত্বপূর্ণ একটি টপিক। কোড করার সময় আপনাকে কমেন্ট ইউজ করতে হবে এতে করে আপনার করা কোডটি যেমন আরেকজনের পড়তে ও বুঝতে সুবিধা হবে তেমনি আপনার কাছেও তা বোধগম্য হবে। কমেন্ট ব্রাউজারে শো করবে না। এটি আপনার কোড ইডিটরের মধ্যেই হাইড হয়ে থাকবে। একজন ভালো কোডার সব সময় তার কোডে কমেন্ট ইউজ করে থাকে। নিচের কোডটি লক্ষ করুন।

প্যারাগ্রাফের উপরে আমরা কমেন্ট ইউজ করেছি। এতে বুঝতে সুবিধা হচ্ছে এটি একটি প্যারাগ্রাফ। কিন্তু আমাদের ওয়েব ব্রাউজারে এটি শো করছে না। আপনি চাইলে যেকোনো এইচ টি এম এল ইলিমেন্টন্সকে কমেন্ট করে রাখতে পারেন। যেটিকে আপনি কমেন্ট করবেন সেটি সিলেক্ট করে কি বোর্ডের (ctrl + /) চাপ দিলেই তা কমেন্ট হয়ে যাবে। আন কমেন্ট করতে চাইলে আবার সেইম কী প্রেস করতে হবে। নিচের কোডটি লক্ষ করুন।

Background Color দিতে চাইলে যেকোন ট্যাগ এর মধ্যে style attribute ব্যবহার করে এর property নেম background-color এবং এর value হিসেবে colour এর নাম বলে দিতে হবে। নিচের কোডটি লক্ষ্য করুন।

Text Color দিতে চাইলে যেকোন ট্যাগ এর মধ্যে style attribute ব্যবহার করে এর property নেম color এবং এর value হিসেবে colour এর নাম বলে দিতে হবে। এতে করে ব্যাকগ্রাউন্ড কালার হবে না শুধুমাত্র সেই টেক্সটগুলো কালার হবে। নিচের কোডটি লক্ষ্য করুন।

আজ এখানেই শেষ করছি। আগামিকাল HTML এর অন্য ট্যাগগুলো নিয়ে লেখার চেষ্টা করবো। ভালো থাকবেন সবাই। আল্লাহ হাফেজ।