এইচটিএমএল লিস্ট এবং কালার কোড

এইচটিএমএল লিস্ট এবং কালার কোড

সবাইকে স্বাগত জানাচ্ছি আজকের লেকচারে। আশা করি তোমরা সবাই ভালো আছো। আজকে আমরা এইচটিএমএল এর খুবই মজার এবং প্রয়োজনীয় দুটি বিষয় শিখব—একটি হলো কীভাবে ওয়েব পেজে লিস্ট বা তালিকা তৈরি করা যায়, এবং অন্যটি হলো কীভাবে ওয়েব পেজকে রঙিন করা যায়। তাহলে চলো দেখে নিই, এই লেকচার শেষে আমরা কী কী শিখতে পারব। এই লেকচার শেষে আমরা- ১। এইচটিএমএল-এ বিভিন্ন ধরণের লিস্ট তৈরি করতে পারব, ২। নেস্টেড লিস্ট এর কোড সঠিকভাবে লিখতে পারব, এবং ৩। ওয়েব পেজে বিভিন্ন পদ্ধতিতে কালার বা রং প্রয়োগ করতে পারব।

দৈনন্দিন জীবনে তালিকা বা লিস্ট

আচ্ছা, আমরা যখন বাজারে যাই, তখন কি করি? একটা কাগজে লিস্ট বা ফর্দ করে নিয়ে যাই, তাই না? আবার যখন পরীক্ষার খাতায় কোনো বড় প্রশ্নের উত্তর লিখি, তখন পয়েন্ট করে ১, ২, ৩ দিয়ে লিখি। কেন করি এমন? যাতে তথ্যগুলো গুছিয়ে উপস্থাপন করা যায় এবং সহজে চোখে পড়ে। ঠিক একইভাবে, ওয়েব পেজেও তথ্যকে সুন্দরভাবে সাজাতে আমরা 'লিস্ট' ব্যবহার করি। আর জীবন যেমন রঙিন, ওয়েব পেজকেও তেমন রঙিন করতে হয় কালার কোড দিয়ে। চলো, আজ আমরা এই সাজানো এবং রাঙানোর কাজটাই শিখব।

এইচটিএমএল লিস্টের প্রকারভেদ

এইচটিএমএল-এ আমরা প্রধানত তিন ধরণের লিস্ট ব্যবহার করি। স্লাইডে দেখো— প্রথমটি হলো অর্ডারড লিস্ট, যা আমরা <ol> ট্যাগ দিয়ে লিখি। দ্বিতীয়টি আনঅর্ডারড লিস্ট, যার জন্য <ul> ট্যাগ ব্যবহার হয়। আর তৃতীয়টি হলো ডেফিনিশন লিস্ট, যা <dl> ট্যাগ দিয়ে লেখা হয়। অর্ডারড এবং আনঅর্ডারড লিস্টের ভেতরে প্রতিটি উপাদানের জন্য আমরা <li> বা List Item ট্যাগটি ব্যবহার করব। নামগুলো শুনেই হয়তো কিছুটা আন্দাজ করতে পারছ এদের কাজ কী, চলো বিস্তারিত দেখে নিই।

অর্ডারড লিস্ট (Ordered List)

<ol>
  <li>Mango</li>
  <li>Apple</li>
</ol>

প্রথমে আসি অর্ডারড লিস্ট বা Ordered List-এ। নাম শুনেই বুঝতে পারছ, এখানে একটা 'অর্ডার' বা ক্রম থাকবে। যেমন ১, ২, ৩ অথবা A, B, C। কোডটি লক্ষ্য করো। আমরা <ol> ট্যাগ দিয়ে শুরু করেছি, যার মানে Ordered List। এরপর ফলের নামগুলো <li> ট্যাগের মধ্যে রেখেছি। ব্রাউজার তখন অটোমেটিকালি এদের সামনে ১, ২ সংখ্যা বসিয়ে দেবে।

অর্ডারড লিস্টের অ্যাট্রিবিউট (Type & Start)

সব সময় কি আমরা ১, ২, ৩ চাই? না-ও চাইতে পারি। হয়তো আমরা চাই A, B, C অথবা রোমান সংখ্যা I, II, III। এর জন্য আমরা `<ol>` ট্যাগের ভেতর `type` অ্যাট্রিবিউট ব্যবহার করি। স্লাইডে দেখো বিভিন্ন type এর মান দেয়া আছে। আর যদি আমরা চাই ১ থেকে শুরু না হয়ে ৫ বা ১০ থেকে লিস্ট শুরু হোক, তখন `start` অ্যাট্রিবিউট ব্যবহার করব। যেমন `start='5'` দিলে লিস্টটি ৫ নম্বর থেকে শুরু হবে। এটা কিন্তু অবজেক্টিভ পরীক্ষার জন্য বেশ গুরুত্বপূর্ণ।

আনঅর্ডারড লিস্ট (Unordered List)

<ul type="square">
  <li>Tea</li>
  <li>Coffee</li>
</ul>

এবার আসি আনঅর্ডারড লিস্ট বা Unordered List-এ। এখানে কোনো ক্রম বা ১, ২, ৩ থাকে না। তার বদলে থাকে বিভিন্ন চিহ্ন বা বুলেট পয়েন্ট। আমরা `<ul>` ট্যাগ ব্যবহার করি। এর `type` অ্যাট্রিবিউট দিয়ে আমরা চিহ্নের আকৃতি পাল্টাতে পারি। ডিফল্ট হিসেবে থাকে 'disc' বা ভরাট বৃত্ত। চাইলে 'circle' বা 'square'-ও ব্যবহার করা যায়। কোড এবং আউটপুটটা একটু ভালো করে লক্ষ্য করো।

ডেফিনিশন লিস্ট (Definition List)

লিস্টের তৃতীয় প্রকারটি হলো ডেফিনিশন লিস্ট। এটা একটু ভিন্ন। ধরো তুমি 'কম্পিউটার' শব্দটি লিখলে এবং তার নিচে কম্পিউটার কী তা বর্ণনা করলে—এই ফরম্যাটটি তৈরির জন্য `<dl>` ব্যবহার হয়। এখানে `<dt>` দিয়ে আমরা সেই শব্দটি লিখি, আর `<dd>` দিয়ে তার বর্ণনা লিখি। এটা ডিকশনারি বা শব্দকোষের মতো কাজ করে। ছবিতে দেখো কীভাবে dt এবং dd একে অপরের সাথে সম্পর্কিত।

নেস্টেড লিস্ট (Nested List)

মাঝেমধ্যে আমাদের একটি লিস্টের ভেতরে আরেকটি লিস্ট তৈরি করতে হয়। একে বলে নেস্টেড লিস্ট। যেমন দেখো, ১ নম্বরে 'Fruits', তার আন্ডারে আবার বুলেট পয়েন্ট দিয়ে আম আর আপেলের নাম। এটা করার জন্য আমরা মূল `<li>` এর শেষ হওয়ার আগেই নতুন একটি `<ul>` বা `<ol>` শুরু করি। কোডটা একটু জটিল মনে হতে পারে, তাই ভিডিওটা পজ করে কোডটা ভালো করে দেখো। ইন্ডেন্টেশন বা কোড সাজিয়ে লেখা এখানে খুব জরুরি।

এইচটিএমএল কালার (HTML Colors)

লিস্ট তো হলো, এবার চলো ওয়েব পেজকে রঙিন করি! কালার বা রং একটি ওয়েবসাইটের সৌন্দর্য এবং ব্র্যান্ডিংয়ের জন্য খুব গুরুত্বপূর্ণ। আমরা সাধারণত ফন্টের কালার, ব্যাকগ্রাউন্ডের কালার বা টেবিলের বর্ডারের কালার পরিবর্তন করি। এইচটিএমএল-এ রং নির্ধারণ করার তিনটি প্রধান পদ্ধতি আছে। চলো একে একে সেগুলো দেখি।

কালার ফরম্যাট: Name ও RGB

প্রথম পদ্ধতিটি সবচেয়ে সহজ—সরাসরি রঙের নাম লিখে দেওয়া। যেমন 'Red', 'Blue', 'Green'। কিন্তু সব রঙের তো নাম হয় না, তাই না? এজন্য আসে RGB পদ্ধতি। RGB মানে Red, Green, Blue। এই তিনটি মৌলিক রং মিশিয়ে সব রং তৈরি হয়। এর মান ০ থেকে ২৫৫ এর মধ্যে হতে পারে। যেমন `rgb(255, 0, 0)` মানে লাল রংটি পূর্ণ মাত্রায় আছে, আর সবুজ ও নীল নেই—তাই এটি পুরোপুরি লাল দেখাবে।

হেক্সাডেসিমেল কালার কোড (Hex Code)

ওয়েব ডিজাইনে সবচেয়ে বেশি ব্যবহৃত হয় হেক্সাডেসিমেল বা হেক্স কোড। এটি একটি হ্যাশ (#) চিহ্ন দিয়ে শুরু হয়। এরপর ৬টি ডিজিট থাকে—প্রথম দুটি লালের জন্য, পরের দুটি সবুজের জন্য এবং শেষের দুটি নীলের জন্য (RRGGBB)। এখানে ০ থেকে ৯ এবং A থেকে F পর্যন্ত ব্যবহার করা হয়। যেমন `#FFFFFF` মানে সব রং মিলে সাদা, আর `#000000` মানে কোনো রং নেই, অর্থাৎ কালো। এফ (F) মানে সর্বোচ্চ মান।

কালার ব্যবহারের নিয়ম (Style Attribute)

<p style="color: blue;">নীল রঙের লেখা</p>
<body style="background-color: #E6E6FA;">

এখন প্রশ্ন হলো, কোডে এই কালার কোথায় লিখব? আধুনিক এইচটিএমএল-এ আমরা `style` অ্যাট্রিবিউট ব্যবহার করি। যেমন `<p style='color: blue;'>` লিখলে প্যারাগ্রাফটি নীল হবে। আবার পুরো পৃষ্ঠার ব্যাকগ্রাউন্ড কালার করতে `<body>` ট্যাগে `style='background-color: ...'` লিখব। আগে `<font>` ট্যাগ ব্যবহার করা হতো, তবে এখন `style` বা CSS ব্যবহার করাই উত্তম। তোমরা প্র্যাকটিস করার সময় `style` অ্যাট্রিবিউটটি বেশি ব্যবহার করবে।

হাতে-কলমে চর্চা (Practice Task)

এবার তোমাদের পালা। ভিডিওটি পজ করো এবং এই কাজটি করার চেষ্টা করো। তোমাকে একটি অর্ডারড লিস্ট তৈরি করতে হবে যেখানে তোমার প্রিয় ৩টি বইয়ের নাম থাকবে। এবং শর্ত হলো—বইয়ের নামগুলো ভিন্ন ভিন্ন রঙের হতে হবে এবং পেজের ব্যাকগ্রাউন্ড হবে হালকা হলুদ। হেক্স কোড ব্যবহার করে এটা করার চেষ্টা করো। হয়ে গেলে আবার ভিডিওটি প্লে করো।

সমাধান: প্র্যাকটিস টাস্ক

<body style="background-color: #FFFFE0;">
  <h3>My Favorite Books</h3>
  <ol type="A">
    <li style="color: #FF0000;">হিমু</li>
    <li style="color: #0000FF;">গীতাঞ্জলি</li>
    <li style="color: #008000;">অগ্নিবীণা</li>
  </ol>
</body>

আশা করি তোমরা চেষ্টা করেছ। চলো সমাধানটি মিলিয়ে নিই। দেখো, আমি `<body>` ট্যাগে ব্যাকগ্রাউন্ড কালার দিয়েছি। আর `<ol>` ট্যাগে `type='A'` দিয়েছি। এরপর প্রতিটি `<li>` এর ভেতরে `style` দিয়ে আলাদা কালার সেট করেছি। তোমাদের কোড কি এর সাথে মিলেছে? না মিললে চিন্তার কিছু নেই, কোথায় ভুল হলো সেটা ছবির কোড থেকে দেখে নাও।

সারসংক্ষেপ

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

সৃজনশীল প্রশ্ন

সৃজনশীল প্রশ্ন ১

তিশা তার পছন্দের ফলের একটি তালিকা তৈরি করল যেখানে ফলের নামের আগে ১, ২, ৩... দেখাচ্ছে। এরপর সে তার ক্লাসের বন্ধুদের নাম দিয়ে আরেকটি তালিকা করল যেখানে নামের আগে বৃত্তাকার চিহ্ন (Bullet points) দেখাচ্ছে। সবশেষে সে 'আইসিটি' শব্দটির সংজ্ঞা লিখল।

ক. নেস্টেড লিস্ট কী?
খ. <ol> এবং <ul> এর মধ্যে পার্থক্য লেখ।
গ. তিশার তৈরি করা তালিকা দুটির জন্য HTML কোড লেখ।
ঘ. আইসিটি শব্দটির সংজ্ঞা লেখার জন্য কোন ধরনের লিস্ট বা ট্যাগ ব্যবহার করা সবচেয়ে যুক্তিযুক্ত? বিশ্লেষণ কর।

উত্তর

ক.
লিস্টের মধ্যে অন্য একটি লিস্ট তৈরি করাকে নেস্টেড লিস্ট (Nested List) বলে। অর্থাৎ, একটি <ol> বা <ul> ট্যাগের ভেতরে যদি অন্য একটি <ol> বা <ul> ট্যাগ ব্যবহার করা হয়, তবে তাকে নেস্টেড লিস্ট বলা হয়।

খ.
<ol> এবং <ul> এর মধ্যে প্রধান পার্থক্যগুলো হলো:
১. পূর্ণরূপ: <ol> এর পূর্ণরূপ হলো Ordered List, আর <ul> এর পূর্ণরূপ হলো Unordered List।
২. ক্রম: <ol> ট্যাগে লিস্ট আইটেমগুলো সংখ্যা বা অক্ষরের ক্রমানুসারে (যেমন: ১, ২, ৩ বা A, B, C) প্রদর্শিত হয়। অন্যদিকে, <ul> ট্যাগে লিস্ট আইটেমগুলো বুলেট বা সিম্বল (যেমন: ●, ■) আকারে প্রদর্শিত হয়, যেখানে কোনো নির্দিষ্ট ক্রম থাকে না।
৩. ব্যবহার: যখন তথ্যের ক্রম বা অগ্রাধিকার গুরুত্বপূর্ণ হয় তখন <ol> ব্যবহৃত হয়, আর যখন তথ্যের ক্রম গুরুত্বপূর্ণ নয় তখন <ul> ব্যবহৃত হয়।

গ.
উদ্দীপকে তিশা দুটি তালিকা তৈরি করেছে—একটি ফলের তালিকা (Ordered List) এবং একটি বন্ধুদের নামের তালিকা (Unordered List)। নিচে এর HTML কোড দেওয়া হলো:

<html>
<head>
    <title>Tisha's Lists</title>
</head>
<body>
    <!-- ফলের তালিকা (Ordered List) -->
    <h3>ফলের তালিকা</h3>
    <ol type="1">
        <li>আম</li>
        <li>জাম</li>
        <li>কাঁঠাল</li>
    </ol>

    <!-- বন্ধুদের নামের তালিকা (Unordered List) -->
    <h3>বন্ধুদের তালিকা</h3>
    <ul type="disc">
        <li>রহিম</li>
        <li>করিম</li>
        <li>সুমনা</li>
    </ul>
</body>
</html>

ঘ.
উদ্দীপকে উল্লেখ করা 'আইসিটি' শব্দটির সংজ্ঞা লেখার জন্য Definition List বা <dl> ট্যাগ ব্যবহার করা সবচেয়ে যুক্তিযুক্ত।

বিশ্লেষণ:
সাধারণত কোনো টার্ম বা শব্দের সংজ্ঞা বা বর্ণনা দেওয়ার জন্য Definition List ব্যবহার করা হয়। এটি তিনটি ট্যাগের সমন্বয়ে গঠিত:
১. <dl> (Definition List): পুরো লিস্টটি শুরু করার জন্য।
২. <dt> (Definition Term): যে শব্দটির সংজ্ঞা দেওয়া হবে (এখানে 'আইসিটি') তা লেখার জন্য।
৩. <dd> (Definition Description): শব্দটির সংজ্ঞা বা বর্ণনা লেখার জন্য।

যদি আমরা প্যারাগ্রাফ <p> ট্যাগ ব্যবহার করি, তবে সেটি সাধারণ টেক্সট হিসেবে দেখাবে। কিন্তু <dl> ব্যবহার করলে ব্রাউজার অটোমেটিক্যালি টার্ম এবং তার বর্ণনার মধ্যে সুন্দর ইন্ডেন্টেশন (Indentation) তৈরি করে, যা দেখতে অভিধান বা গ্লোসারির মতো মনে হয়।

উদাহরণ কোড:

<dl>
    <dt>আইসিটি</dt>
    <dd>তথ্য ও যোগাযোগ প্রযুক্তি হলো এমন প্রযুক্তি যা তথ্যের প্রক্রিয়াকরণ এবং সঞ্চালনে ব্যবহৃত হয়।</dd>
</dl>

সুতরাং, কাঠামোগতভাবে সঠিক এবং অর্থপূর্ণ উপস্থাপনার জন্য সংজ্ঞা লেখার ক্ষেত্রে Definition List বা <dl> ট্যাগ ব্যবহার করাই সর্বোৎকৃষ্ট।

সৃজনশীল প্রশ্ন ২

একটি ওয়েব পেজের ব্যাকগ্রাউন্ড কালার নীল এবং টেক্সট কালার সাদা। পেজটিতে বাজারের তালিকার ভেতরে আবার কাঁচাবাজার ও মুদিবাজার নামে দুটি সাব-লিস্ট আছে।

ক. RGB কালার কোড কী?
খ. হেক্সাডেসিমেল কালার কোড কেন ব্যবহার করা হয়?
গ. উদ্দীপকের নেস্টেড লিস্টটি তৈরির HTML কোড দেখাও।
ঘ. কালার কোড বা কালার নেম ব্যবহারের সুবিধা-অসুবিধা আলোচনা কর।

উত্তর

ক.
RGB কালার কোড হলো রেড (Red), গ্রিন (Green) এবং ব্লু (Blue)—এই তিনটি মৌলিক রঙের মিশ্রণ ব্যবহার করে রং প্রকাশের একটি পদ্ধতি। এর মান ০ থেকে ২৫৫ এর মধ্যে হয়ে থাকে, যেমন: rgb(255, 0, 0) লাল রং নির্দেশ করে।

খ.
হেক্সাডেসিমেল কালার কোড ব্যবহারের প্রধান কারণগুলো হলো:
১. মেমোরি সাশ্রয়: এটি কম ক্যারেক্টার ব্যবহার করে প্রায় ১ কোটি ৬০ লক্ষেরও বেশি রঙের সংমিশ্রণ প্রকাশ করতে পারে।
২. স্ট্যান্ডার্ড: এটি ওয়েব ডিজাইনে সর্বজনীনভাবে স্বীকৃত এবং সব ব্রাউজারে সমানভাবে সমর্থিত।
৩. সুনির্দিষ্টতা: রঙের নাম (যেমন: Red, Blue) ব্যবহার করলে নির্দিষ্ট শেড পাওয়া যায় না, কিন্তু হেক্স কোড (যেমন: #FF5733) দিয়ে নিখুঁতভাবে নির্দিষ্ট শেড নির্ধারণ করা যায়।

গ.
উদ্দীপকের বর্ণনা অনুযায়ী, একটি বাজারের তালিকার ভেতরে কাঁচাবাজার ও মুদিবাজার নামে দুটি সাব-লিস্ট বা নেস্টেড লিস্ট তৈরি করতে হবে। নিচে এর HTML কোড দেওয়া হলো:

<html>
<head>
    <title>Market List</title>
</head>
<body style="background-color: blue; color: white;">

    <h3>বাজারের তালিকা</h3>
    <ul>
        <li>কাঁচাবাজার
            <ul> <!-- নেস্টেড লিস্ট শুরু -->
                <li>আলু</li>
                <li>পেঁয়াজ</li>
                <li>মরিচ</li>
            </ul> <!-- নেস্টেড লিস্ট শেষ -->
        </li>
        <li>মুদিবাজার
            <ul> <!-- নেস্টেড লিস্ট শুরু -->
                <li>চাল</li>
                <li>ডাল</li>
                <li>তেল</li>
            </ul> <!-- নেস্টেড লিস্ট শেষ -->
        </li>
    </ul>

</body>
</html>

ঘ.
ওয়েব পেজ ডিজাইনে কালার নেম (Color Name) এবং কালার কোড (Color Code) উভয়ই ব্যবহার করা যায়, তবে এদের প্রত্যেকের নিজস্ব সুবিধা ও অসুবিধা রয়েছে।

কালার নেম ব্যবহারের সুবিধা ও অসুবিধা:
* সুবিধা: এটি মনে রাখা সহজ। যেমন—Red, Green, Blue ইত্যাদি নামগুলো সহজেই কোডে লেখা যায়। নতুনদের জন্য এটি সুবিধাজনক।
* অসুবিধা: HTML এ মাত্র ১৪০টি স্ট্যান্ডার্ড কালার নেম সমর্থিত। এর বাইরের কোনো নির্দিষ্ট শেড বা কাস্টম কালার নাম দিয়ে ব্যবহার করা সম্ভব নয়।

কালার কোড (Hex/RGB) ব্যবহারের সুবিধা ও অসুবিধা:
* সুবিধা: কালার কোড (যেমন: #FF5733 বা rgb(255, 87, 51)) ব্যবহার করে ১ কোটি ৬০ লক্ষেরও বেশি রঙের শেড তৈরি করা যায়। ডিজাইনের নিখুঁত সামঞ্জস্য বজায় রাখার জন্য এটি অপরিহার্য। এটি সব ব্রাউজারে সঠিকভাবে রেন্ডার হয়।
* অসুবিধা: কোডগুলো মনে রাখা কঠিন। সাধারণত চার্ট দেখে বা গ্রাফিক্স সফটওয়্যার থেকে কোড কপি করে ব্যবহার করতে হয়।

মূল্যায়ন:
সাধারণ বা দ্রুত কাজের জন্য কালার নেম ব্যবহার করা সহজ হলেও, প্রফেশনাল ওয়েব ডিজাইনে নির্দিষ্ট ব্র্যান্ডিং এবং ডিজাইনের মান বজায় রাখার জন্য কালার কোড ব্যবহার করাই উত্তম। উদ্দীপকের নীল ব্যাকগ্রাউন্ডের জন্য Blue লিখলে যে সাধারণ নীল আসবে, তার চেয়ে #0000FF বা অন্য কোনো শেড ব্যবহার করলে ডিজাইনটি আরও আকর্ষণীয় করা সম্ভব।

সৃজনশীল প্রশ্ন ৩

নিচের উদ্দীপকটি লক্ষ্য কর এবং প্রশ্নগুলোর উত্তর দাও:

চিত্র-১:
* HSC ICT
* Chapter 1
* Chapter 2
* Physics
* Motion
* Force

চিত্র-২:
রঙের নাম: লাল
হেক্স কোড: #FF0000

ক. <li> ট্যাগের কাজ কী?
খ. হাইপারলিংক টেক্সটের ডিফল্ট রঙ কী এবং কেন?
গ. চিত্র-১ এর তালিকাটি তৈরির জন্য প্রয়োজনীয় HTML কোড লেখ।
ঘ. চিত্র-২ এ নির্দেশিত রংটি ওয়েব পেজের ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করলে টেক্সটের পঠনযোগ্যতা (Readability) রক্ষায় ফন্টের রঙের ক্ষেত্রে কী পরিবর্তন আনা উচিত? বিশ্লেষণ কর।

উত্তর

ক.
<li> ট্যাগের পূর্ণরূপ হলো List Item। এটি Ordered (<ol>) বা Unordered (<ul>) লিস্টের প্রতিটি উপাদান বা আইটেমকে সংজ্ঞায়িত বা প্রদর্শন করার জন্য ব্যবহৃত হয়।

খ.
হাইপারলিংক টেক্সটের ডিফল্ট রঙ সাধারণত নীল (Blue) এবং এর নিচে একটি আন্ডারলাইন থাকে।
কারণ: ওয়েব ব্রাউজারগুলো ব্যবহারকারীদের সুবিধার জন্য লিংক এবং সাধারণ টেক্সটের মধ্যে পার্থক্য বোঝাতে ডিফল্টভাবে এই স্টাইল ব্যবহার করে। ভিজিট করা লিংকের রঙ সাধারণত বেগুনি (Purple) হয়ে যায়, যা ব্যবহারকারীকে বুঝতে সাহায্য করে যে তিনি ওই লিংকে আগে প্রবেশ করেছিলেন।

গ.
চিত্র-১ এ একটি আনঅর্ডারড লিস্টের (Unordered List) ভেতরে নেস্টেড আকারে আরও কিছু আনঅর্ডারড লিস্ট রয়েছে। এর HTML কোড নিচে দেওয়া হলো:

<ul>
    <li>HSC ICT
        <ul type="circle">
            <li>Chapter 1</li>
            <li>Chapter 2</li>
        </ul>
    </li>
    <li>Physics
        <ul type="circle">
            <li>Motion</li>
            <li>Force</li>
        </ul>
    </li>
</ul>

ঘ.
চিত্র-২ এ নির্দেশিত রংটি হলো লাল (Red), যার হেক্স কোড #FF0000। এটি একটি অত্যন্ত গাঢ় এবং উজ্জ্বল রং। যদি ওয়েব পেজের ব্যাকগ্রাউন্ড হিসেবে এই লাল রং ব্যবহার করা হয়, তবে ডিফল্ট কালো (Black) রঙের টেক্সট পড়া খুব কষ্টসাধ্য হবে। একে বলা হয় 'লো কন্ট্রাস্টিং' সমস্যা।

পঠনযোগ্যতা রক্ষায় করণীয়:
১. ফন্টের রং পরিবর্তন: ব্যাকগ্রাউন্ড লাল হলে, টেক্সটের রং সাদা (#FFFFFF) বা খুব হালকা হলুদ (#FFFFE0) ব্যবহার করা উচিত। এতে 'হাই কন্ট্রাস্ট' তৈরি হবে এবং লেখা স্পষ্টভাবে পড়া যাবে।
২. ফন্টের স্টাইল: ফন্টের আকার কিছুটা বড় করা এবং 'Bold' করা যেতে পারে যাতে উজ্জ্বল ব্যাকগ্রাউন্ডের মধ্যেও লেখাটি ফুটে ওঠে।

বিশ্লেষণ:
ওয়েব ডিজাইনের নিয়ম অনুযায়ী, ব্যাকগ্রাউন্ড এবং ফোরগ্রাউন্ডের (টেক্সট) মধ্যে পর্যাপ্ত কন্ট্রাস্ট থাকতে হবে। লালের উপর কালো লেখা চোখের জন্য পীড়াদায়ক। তাই, body { background-color: #FF0000; color: #FFFFFF; } ব্যবহার করা হলে সাইটটি ইউজার-ফ্রেন্ডলি হবে। অর্থাৎ, ব্যাকগ্রাউন্ডের তীব্রতার সাথে সামঞ্জস্য রেখে ফন্টের রং অবশ্যই হালকা বা বিপরীতধর্মী হতে হবে।

এমসিকিউ

১। HTML-এ লিস্ট তৈরির জন্য প্রধানত কয় ধরনের ট্যাগ ব্যবহৃত হয়?

ক) ২
খ) ৩
গ) ৪
ঘ) ৫

সঠিক উত্তর: খ) ৩

ব্যাখ্যা: HTML-এ প্রধানত তিন ধরনের লিস্ট ব্যবহৃত হয়: Ordered List (<ol>), Unordered List (<ul>) এবং Definition List (<dl>)।

২। রোমান সংখ্যায় লিস্ট তৈরি করতে <ol> ট্যাগে কোন অ্যাট্রিবিউট ব্যবহার করা হয়?

ক) start="I"
খ) type="I"
গ) list="roman"
ঘ) style="roman"

সঠিক উত্তর: খ) type="I"

ব্যাখ্যা: <ol> ট্যাগের type অ্যাট্রিবিউটের মান "I" দিলে রোমান সংখ্যায় (I, II, III...) লিস্ট প্রদর্শিত হয়।

৩। লিস্টের ক্রম ৫০ থেকে শুরু করতে কোন অ্যাট্রিবিউট প্রয়োজন?

ক) begin="50"
খ) start="50"
গ) value="50"
ঘ) init="50"

সঠিক উত্তর: খ) start="50"

ব্যাখ্যা: <ol> ট্যাগের start অ্যাট্রিবিউট ব্যবহার করে লিস্টের শুরুর সংখ্যা নির্ধারণ করা যায়। start="50" দিলে লিস্ট ৫০ থেকে শুরু হবে।

৪। লালের হেক্সাডেসিমেল কোড কোনটি?

ক) #FF0000
খ) #00FF00
গ) #0000FF
ঘ) #FFFFFF

সঠিক উত্তর: ক) #FF0000

ব্যাখ্যা: হেক্সাডেসিমেল কোড #RRGGBB ফরম্যাটে লেখা হয়। এখানে প্রথম দুটি ক্যারেক্টার লালের মান নির্দেশ করে। তাই লালের জন্য #FF0000 (Red=FF, Green=00, Blue=00) সঠিক।

৫। Definition List-এ টার্ম বা শব্দ বোঝাতে কোন ট্যাগ ব্যবহৃত হয়?

ক) <dl>
খ) <dd>
গ) <dt>
ঘ) <li>

সঠিক উত্তর: গ) <dt>

ব্যাখ্যা: Definition List-এ <dt> (Definition Term) ট্যাগটি সংজ্ঞায়িত শব্দ বা টার্ম বোঝাতে ব্যবহৃত হয়। আর <dd> ব্যবহৃত হয় বর্ণনা বা সংজ্ঞার জন্য।

৬। আনঅর্ডারড লিস্টের ডিফল্ট বুলেট স্টাইল কোনটি?

ক) circle
খ) square
গ) disc
ঘ) none

সঠিক উত্তর: গ) disc

ব্যাখ্যা: কোনো type উল্লেখ না করলে <ul> বা আনঅর্ডারড লিস্টে ডিফল্ট হিসেবে ভরাট বৃত্ত বা disc বুলেট প্রদর্শিত হয়।

৭। নিচের কোনটি সঠিক RGB ফরম্যাট?

ক) rgb(255, 0, 0)
খ) rgb(#FF0000)
গ) rgb(100%, 0, 0)
ঘ) color: 255, 0, 0

সঠিক উত্তর: ক) rgb(255, 0, 0)

ব্যাখ্যা: CSS-এ rgb() ফাংশনের ভেতরে লাল, সবুজ ও নীল রঙের মান কমা দিয়ে লিখতে হয়। সঠিক সিনট্যাক্স হলো rgb(red, green, blue)।

৮। <ul type="square"> কোডটির আউটপুট কেমন হবে?

ক) ভরাট বৃত্ত
খ) ফাঁকা বৃত্ত
গ) ভরাট চারকোনা বাক্স
ঘ) কোনো চিহ্ন থাকবে না

সঠিক উত্তর: গ) ভরাট চারকোনা বাক্স

ব্যাখ্যা: type="square" ব্যবহার করলে লিস্ট আইটেমের আগে একটি ভরাট চারকোনা বাক্স বা বর্গাকৃতি বুলেট প্রদর্শিত হয়।

৯। সাদা রঙের হেক্সাডেসিমেল কোড কোনটি?

ক) #000000
খ) #FFFFFF
গ) #FF00FF
ঘ) #CCCCCC

সঠিক উত্তর: খ) #FFFFFF

ব্যাখ্যা: সাদা রং মানে সব রঙের সর্বোচ্চ উপস্থিতি। তাই লাল, সবুজ ও নীল সবগুলোর মান পূর্ণ বা FF হলে সাদা রং পাওয়া যায় (#FFFFFF)। কালো রঙের কোড হলো #000000।

১০। নেস্টেড লিস্ট তৈরিতে কোন ট্যাগটি বারবার ব্যবহৃত হতে পারে?

ক) <ol> ও <ul>
খ) <table>
গ) <img>
ঘ) <a>

সঠিক উত্তর: ক) <ol> ও <ul>

ব্যাখ্যা: একটি লিস্টের ভেতরে আরেকটি লিস্ট তৈরি করতে <ol> বা <ul> ট্যাগকে পুনরায় ব্যবহার করা হয়, একেই নেস্টেড লিস্ট বলে।

১১। লিস্ট আইটেমবিহীন লিস্ট তৈরি করলে ব্রাউজারে কী দেখাবে?

ক) এরর দেখাবে
খ) ফাঁকা দেখাবে
গ) ডিফল্ট টেক্সট আসবে
ঘ) শুধু বুলেট পয়েন্ট আসবে

সঠিক উত্তর: খ) ফাঁকা দেখাবে

ব্যাখ্যা: যদি <ol> বা <ul> ট্যাগের ভেতরে কোনো <li> (List Item) না থাকে, তবে ব্রাউজারে কিছুই প্রদর্শিত হবে না বা জায়গাটি ফাঁকা থাকবে।

১২। type="A" ব্যবহার করলে লিস্টের ক্রম কেমন হবে?

ক) A, B, C...
খ) a, b, c...
গ) i, ii, iii...
ঘ) I, II, III...

সঠিক উত্তর: ক) A, B, C...

ব্যাখ্যা: type="A" দিলে লিস্টটি ইংরেজি বড় হাতের অক্ষর (Capital Letters) দিয়ে শুরু হয়।

১৩। নিচের কোনটি সঠিক রঙ নির্ধারণ পদ্ধতি নয়?

ক) Hex Code
খ) RGB Value
গ) HSL Value
ঘ) Binary Code

সঠিক উত্তর: ঘ) Binary Code

ব্যাখ্যা: ওয়েবে রঙ নির্ধারণের জন্য Hex Code, RGB, RGBA, HSL এবং কালার নেম ব্যবহৃত হয়। বাইনারি কোড দিয়ে সরাসরি রঙ নির্ধারণ করা যায় না।

১৪। <li value="5"> অ্যাট্রিবিউটটি কোন ট্যাগের মধ্যে কাজ করবে?

ক) <ul>
খ) <ol>
গ) <dl>
ঘ) <table>

সঠিক উত্তর: খ) <ol>

ব্যাখ্যা: value অ্যাট্রিবিউটটি শুধুমাত্র Ordered List (<ol>) এর মধ্যে কাজ করে। এটি নির্দিষ্ট কোনো আইটেমের ক্রম পরিবর্তন করতে ব্যবহৃত হয়।

১৫। Definition List-এ <dd> ট্যাগের কাজ কী?

ক) টার্ম নির্ধারণ করা
খ) লিস্ট শুরু করা
গ) টার্মের বর্ণনা দেওয়া
ঘ) ক্রমিক নম্বর দেওয়া

সঠিক উত্তর: গ) টার্মের বর্ণনা দেওয়া

ব্যাখ্যা: <dd> এর পূর্ণরূপ Definition Description। এটি <dt> তে লেখা টার্ম বা শব্দের বিস্তারিত বর্ণনা বা সংজ্ঞা প্রদান করে।

১৬। HTML-এ কালার কোড #00FF00 কোন রং নির্দেশ করে?
i. লাল
ii. সবুজ
iii. নীল

নিচের কোনটি সঠিক?
ক) i
খ) ii
গ) iii
ঘ) i ও ii

সঠিক উত্তর: খ) ii

ব্যাখ্যা: হেক্স কোডের বিন্যাস #RRGGBB। এখানে মাঝখানের দুটি ক্যারেক্টার FF বা সর্বোচ্চ মান, যা সবুজ (Green) নির্দেশ করে। বাকি দুটি 00 হওয়ায় এটি বিশুদ্ধ সবুজ রং।

১৭। লিস্ট ট্যাগ <ul> এর অ্যাট্রিবিউট হতে পারে—
i. type="disc"
ii. type="circle"
iii. type="square"

নিচের কোনটি সঠিক?
ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ঘ) i, ii ও iii

ব্যাখ্যা: আনঅর্ডারড লিস্টে বুলেটের স্টাইল পরিবর্তন করতে type অ্যাট্রিবিউটে disc, circle এবং square—এই তিনটি মানই ব্যবহার করা যায়।

১৮। নেস্টেড লিস্টের ক্ষেত্রে—
i. একটি লিস্টের ভেতর অন্য লিস্ট থাকে
ii. মাল্টি-লেভেল মেনু তৈরিতে ব্যবহৃত হয়
iii. কোড জটিল হতে পারে

নিচের কোনটি সঠিক?
ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ঘ) i, ii ও iii

ব্যাখ্যা: নেস্টেড লিস্ট মানেই একটির ভেতর আরেকটি লিস্ট। এটি ড্রপ-ডাউন মেনু বা সাইটম্যাপ তৈরিতে বহুল ব্যবহৃত হয় এবং গভীরতা বাড়লে কোড জটিল আকার ধারণ করতে পারে।

নিচের উদ্দীপকটি পড় এবং ১৯ ও ২০ নং প্রশ্নের উত্তর দাও:
মিথিলা তার ওয়েবসাইটে ফলের নামের একটি তালিকা তৈরি করল যেখানে ক্রম হিসেবে A, B, C... দেখাচ্ছে। পরে সে রঙের আরেকটি তালিকা করল যেখানে রঙের নামের আগে ছোট ভরাট বৃত্ত দেখাচ্ছে।

১৯। মিথিলা প্রথম তালিকার জন্য কোন ট্যাগ ও অ্যাট্রিবিউট ব্যবহার করেছে?

ক) <ol type="I">
খ) <ol type="A">
গ) <ul type="A">
ঘ) <ul type="disc">

সঠিক উত্তর: খ) <ol type="A">

ব্যাখ্যা: উদ্দীপকে বলা হয়েছে ক্রম হিসেবে A, B, C দেখাচ্ছে। এটি একটি Ordered List (<ol>) এবং এর টাইপ হবে বড় হাতের অক্ষর বা type="A"।

২০। দ্বিতীয় তালিকার জন্য মিথিলা কোন কোডটি ব্যবহার করবে?

ক) <ul type="circle">
খ) <ul type="square">
গ) <ul type="disc">
ঘ) <ol type="disc">

সঠিক উত্তর: গ) <ul type="disc">

ব্যাখ্যা: উদ্দীপকে বলা হয়েছে 'ছোট ভরাট বৃত্ত'। আনঅর্ডারড লিস্টে (<ul>) ডিফল্ট বুলেটের স্টাইল হলো ভরাট বৃত্ত, যার নাম disc।

২১। রঙের হেক্সাডেসিমেল কোড #ABC—
i. এটি সংক্ষিপ্ত রূপ
ii. এর পূর্ণরূপ #AABBCC
iii. এটি ব্রাউজারে সমর্থিত

নিচের কোনটি সঠিক?
ক) i ও ii
খ) i ও iii
গ) ii ও iii
ঘ) i, ii ও iii

সঠিক উত্তর: ঘ) i, ii ও iii

ব্যাখ্যা: CSS-এ ৩-ডিজিটের হেক্স কোড (#RGB) লেখা যায়, যা ব্রাউজার অটোমেটিক্যালি ৬-ডিজিটে (#RRGGBB) রূপান্তর করে নেয়। তাই #ABC মানে #AABBCC। এটি সব আধুনিক ব্রাউজারে সমর্থিত।

২২। নিচের কোনটি সঠিক HTML কালার সিনট্যাক্স?

ক) <body bgcolor="red">
খ) <body color="red">
গ) <body background="red">
ঘ) <body style="back-color: red">

সঠিক উত্তর: ক) <body bgcolor="red">

ব্যাখ্যা: HTML4 বা পুরোনো ভার্সনে bgcolor অ্যাট্রিবিউট ব্যবহার করা হতো। যদিও আধুনিক HTML5-এ এটি deprecated এবং style="background-color: red;" ব্যবহার করা বাঞ্ছনীয়, কিন্তু অপশনগুলোর মধ্যে ক সঠিক সিনট্যাক্স।

২৩। rgba(255, 0, 0, 0.5) এ 0.5 কী নির্দেশ করে?

ক) রঙের উজ্জ্বলতা
খ) রঙের স্বচ্ছতা (Opacity)
গ) রঙের শেড
ঘ) রঙের ঘনত্ব

সঠিক উত্তর: খ) রঙের স্বচ্ছতা (Opacity)

ব্যাখ্যা: RGBA মডেলে শেষের মানটি (Alpha) রঙের অপাসিটি বা স্বচ্ছতা নির্দেশ করে। এর মান ০.০ (পুরো স্বচ্ছ) থেকে ১.০ (পুরো দৃশ্যমান) এর মধ্যে হয়।

নিচের উদ্দীপকটি পড় এবং ২৪ ও ২৫ নং প্রশ্নের উত্তর দাও:
নিহাল একটি ওয়েব পেজ ডিজাইন করছে যেখানে সে ব্যাকগ্রাউন্ড হিসেবে নীল রং ব্যবহার করতে চায় এবং টেক্সট হিসেবে হলুদ রং ব্যবহার করতে চায়।

২৪। নিহালের ব্যাকগ্রাউন্ডের জন্য সঠিক কোড কোনটি?

ক) bgcolor="#0000FF"
খ) bgcolor="#FF0000"
গ) bgcolor="#00FF00"
ঘ) bgcolor="#FFFF00"

সঠিক উত্তর: ক) bgcolor="#0000FF"

ব্যাখ্যা: নীল রঙের হেক্স কোড হলো #0000FF (Red=00, Green=00, Blue=FF)।

২৫। হলুদ রঙের টেক্সট দেখানোর জন্য সঠিক হেক্স কোড কোনটি?

ক) #FF00FF
খ) #FFFF00
গ) #00FFFF
ঘ) #FFFFFF

সঠিক উত্তর: খ) #FFFF00

ব্যাখ্যা: হলুদ রং তৈরি হয় লাল ও সবুজের মিশ্রণে। তাই লাল (FF) এবং সবুজ (FF) পূর্ণমাত্রায় থাকলে হলুদ হয় (#FFFF00)।