তালিকাগুলি আপনি যা ভাবেন তার চেয়ে বেশি সাধারণ। আপনি যদি কখনও একটি প্রোগ্রামিং ক্লাস নিয়ে থাকেন তবে প্রথম প্রকল্পটি একটি শপিং তালিকা বা একটি করণীয় তালিকা তৈরি করা হতে পারে। সেগুলো হলো তালিকা। মাল্টিপল-চয়েস টেস্টগুলি সাধারণত প্রশ্নের সংখ্যাযুক্ত তালিকা: প্রতিটি প্রশ্নের একাধিক সম্ভাব্য উত্তর নেস্টেড তালিকা।
এইচটিএমএল আমাদের তালিকা চিহ্নিত করার কয়েকটি ভিন্ন উপায় প্রদান করে। অর্ডার করা তালিকা ( <ol> ), অক্রম তালিকা ( <ul> ), এবং বর্ণনা তালিকা ( <dl> ) রয়েছে। তালিকা আইটেমগুলি ( <li> ) অর্ডার করা তালিকা এবং অ-ক্রমবিহীন তালিকার মধ্যে নেস্ট করা হয়। একটি বর্ণনা তালিকার ভিতরে, আপনি বর্ণনার শর্তাবলী ( <dt> ) এবং বিবরণের বিবরণ <dd>. আমরা এখানে এই সব কভার করব.
HTML ফর্মে, <option> উপাদানগুলির তালিকা <datalist> , <select> , এবং <optgroup> -এর বিষয়বস্তু একটি <select> এর মধ্যে তৈরি করে। এগুলো HTML আকারে আলোচনা করা হয়েছে।
মেনু এবং ক্রমবিন্যস্ত তালিকাগুলিতে, তালিকা আইটেমগুলি সাধারণত বুলেট পয়েন্ট ব্যবহার করে প্রদর্শিত হয়। ক্রমানুসারে তালিকায়, তারা সাধারণত একটি সংখ্যা বা অক্ষরের মতো একটি আরোহী কাউন্টার দ্বারা পূর্বে থাকে। বুলেট এবং নম্বরিং ক্রম HTML বা CSS বা উভয়ের মাধ্যমে নিয়ন্ত্রণ বা বিপরীত করা যেতে পারে।
ডিফল্টরূপে, অর্ডার করা এবং অক্রমহীন তালিকা আইটেমগুলি সংখ্যা বা বুলেটের সাথে প্রিফিক্স করা হয়। কিন্তু আপনি যখন তালিকাগুলিকে তালিকার মতো দেখতে চান না, তখনও আপনি আইটেমগুলির একটি তালিকা চান, যেমন নেভিগেশন বারগুলিতে, বুলেটের পরিবর্তে চেকবক্স সহ একটি করণীয় তালিকা বা একাধিক-পছন্দের পরীক্ষায় সত্য এবং মিথ্যা প্রশ্ন। বুলেট ছাড়া এই সমস্ত তালিকার জন্য, HTML তালিকা উপাদানগুলি ব্যবহার করা উপযুক্ত।
অবিন্যস্ত তালিকা
<ul> এলিমেন্ট হল আইটেমগুলির ক্রমহীন তালিকার মূল উপাদান। একটি <ul> এর একমাত্র সন্তান হল এক বা একাধিক <li> তালিকা আইটেম উপাদান। আসুন মেশিনের একটি তালিকা তৈরি করি। আমরা একটি ক্রমবিহীন তালিকা ব্যবহার করি কারণ অর্ডারটি কোন ব্যাপার না (তাদেরকে বলবেন না):
ডিফল্টরূপে, প্রতিটি ক্রমবিহীন তালিকা আইটেম একটি বুলেটের সাথে উপসর্গযুক্ত। ক্রমবিন্যস্ত তালিকার কোনো উপাদান-নির্দিষ্ট বৈশিষ্ট্য নেই। আপনাকে একটি </ul> দিয়ে আপনার তালিকাগুলি বন্ধ করতে হবে।
অর্ডার করা তালিকা
<ol> উপাদান হল আইটেমগুলির অর্ডার করা তালিকার মূল উপাদান। <ol> এর একমাত্র সন্তান হল এক বা একাধিক <li> উপাদান বা তালিকা আইটেম। এই ক্ষেত্রে "বুলেট" যদিও, অনেক ধরনের সংখ্যা। list-style-type প্রপার্টি বা type অ্যাট্রিবিউটের মাধ্যমে সিএসএস-এ টাইপ সংজ্ঞায়িত করা যেতে পারে।
<ol> তিনটি উপাদান-নির্দিষ্ট বৈশিষ্ট্য রয়েছে: type , reversed এবং start ।
গণনাকৃত type অ্যাট্রিবিউট নম্বরিং টাইপ সেট করে। type জন্য পাঁচটি বৈধ মান রয়েছে, সংখ্যার জন্য ডিফল্ট হল 1 , তবে আপনি ছোট এবং বড় হাতের অক্ষর বা রোমান সংখ্যার জন্য a, A, i, বা I ব্যবহার করতে পারেন। list-style-type সম্পত্তি আরও অনেক মান প্রদান করে।
কোডপেনে যেমন উল্লেখ করা হয়েছে, list-style-type প্রপার্টি type অ্যাট্রিবিউটের মানকে ওভাররাইড করে, যখন ডকুমেন্টেশন লেখার সময় যেখানে সাংখ্যিক প্রকার গুরুত্বপূর্ণ, যেমন আইনি নথির মতো, উদাহরণস্বরূপ, আপনাকে type অন্তর্ভুক্ত করতে হবে।
বুলিয়ান reversed অ্যাট্রিবিউট, যদি অন্তর্ভুক্ত করা হয়, তাহলে সংখ্যার ক্রমকে বিপরীত করবে, বৃহত্তম সংখ্যা থেকে সর্বনিম্নে যাবে। start অ্যাট্রিবিউট প্রারম্ভিক মান সেট করে। ডিফল্ট হল 1 ।
</ul> এর অনুরূপ, সমাপ্তি </ol> প্রয়োজন।
আমরা তালিকাগুলি নেস্ট করতে পারি, তবে সেগুলিকে একটি তালিকা আইটেমের মধ্যে নেস্ট করতে হবে। মনে রাখবেন, একমাত্র উপাদান যা একটি <ul> বা <ol> এর সন্তান হতে পারে তা হল এক বা একাধিক <li> উপাদান।
তালিকা আইটেম
আমরা <li> উপাদানটি ব্যবহার করেছি, কিন্তু আমরা এটি আনুষ্ঠানিকভাবে চালু করতে পারিনি। <li> উপাদানটি একটি অবিন্যস্ত তালিকা ( <ul> ), একটি আদেশকৃত তালিকা ( <ol> ), বা একটি মেনু ( <menu> ) এর সরাসরি সন্তান হতে পারে। <li> কে এই উপাদানগুলির একটির সন্তান হিসাবে নেস্ট করতে হবে, এবং অন্য কোথাও বৈধ নয়।
একটি তালিকা আইটেম বন্ধ করার স্পেসিফিকেশনের প্রয়োজন হয় না কারণ ব্রাউজারটি পরবর্তী <li> ওপেনিং ট্যাগ বা প্রয়োজনীয় তালিকা বন্ধ করার ট্যাগের মুখোমুখি হলে এটি নিহিতভাবে বন্ধ হয়ে যাবে: </ul> , </ol> , </menu> । যদিও স্পেকের জন্য এটির প্রয়োজন হয় না, এবং কিছু অভ্যন্তরীণ কোম্পানির সর্বোত্তম অনুশীলন পরামর্শ দেয় যে কিছু বাইট সংরক্ষণ করার জন্য আপনার তালিকা আইটেমগুলি বন্ধ করা উচিত নয়, আপনার <li> ট্যাগগুলি বন্ধ করুন৷ এটি আপনার কোড পড়া সহজ করে তোলে এবং আপনার ভবিষ্যত স্ব আপনাকে ধন্যবাদ জানাবে। কোন ট্যাগগুলি বন্ধ করা দরকার এবং কোনটিতে একটি ঐচ্ছিক ক্লোজিং ট্যাগ আছে তা মনে রাখার চেয়ে সমস্ত উপাদান বন্ধ করা সহজ৷
শুধুমাত্র একটি উপাদান-নির্দিষ্ট <li> বৈশিষ্ট্য আছে: value , একটি পূর্ণসংখ্যা। value শুধুমাত্র একটি <li> তে উপযোগী যখন <li> একটি অর্ডার করা তালিকার মধ্যে নেস্ট করা হয় এবং ক্রমবিহীন তালিকা বা মেনুর জন্য কোন অর্থ নেই। কোনো দ্বন্দ্ব থাকলে এটি <ol> এর শুরুর মানকে ওভাররাইড করে।
value হল একটি অর্ডারকৃত তালিকার মধ্যে থাকা তালিকা আইটেমের সংখ্যা। পরবর্তী তালিকা আইটেমগুলির সাথে, মান সেট থেকে নম্বর দেওয়া চালিয়ে যান, যদি না সেই আইটেমের একটি value বৈশিষ্ট্য সেট থাকে। মান ক্রমানুসারে হতে হবে না; যদিও এটি ক্রমানুসারে না হয় তবে একটি ভাল কারণ থাকা উচিত।
আপনি যখন তালিকার আইটেমগুলির value বৈশিষ্ট্যগুলির সাথে <ol> reversed একত্রিত করবেন, তখন ব্রাউজার সরবরাহকৃত মানের সাথে <li> সেট করবে, তারপরে এটির পূর্ববর্তী <li> গুলির জন্য গণনা করবে এবং পরে আসাগুলির জন্য গণনা করবে৷ যদি একটি দ্বিতীয় তালিকা আইটেমের একটি মান বৈশিষ্ট্য থাকে, তাহলে কাউন্টারটি সেই দ্বিতীয় তালিকা আইটেমটিতে পুনরায় সেট করা হবে এবং পরবর্তী মানটি একটি দ্বারা হ্রাস পাবে।
CSS কাউন্টার দিয়েও এই সবগুলিকে নিয়ন্ত্রণ করা যেতে পারে ::marker সিউডো-এলিমেন্টের জন্য তৈরি সামগ্রী প্রদান করে। সংখ্যাটি সম্পূর্ণরূপে উপস্থাপনামূলক হলে, CSS ব্যবহার করুন। যদি সংখ্যায়নটি শব্দার্থগতভাবে গুরুত্বপূর্ণ হয়, বা অন্যথায় অর্থ থাকে, তাহলে এই বৈশিষ্ট্যগুলি ব্যবহার করুন।
এই পর্যন্ত, আমরা শুধুমাত্র টেক্সট নোড ধারণকারী তালিকা আইটেম দেখেছি. তালিকার আইটেমগুলিতে সমস্ত ফ্লো বিষয়বস্তু থাকতে পারে, যার অর্থ বডিতে পাওয়া যেকোন উপাদান যা শিরোনাম সহ, এইভাবে বিষয়বস্তু বিভাগ করে <body> এর সরাসরি সন্তান হিসাবে নেস্ট করা যেতে পারে।
আমাদের MLW-তে কয়েকটি অ-ক্রমবিহীন তালিকা রয়েছে। প্রশিক্ষক বিভাগের শিক্ষকরা একটি তালিকা, যেমন পর্যালোচনা বিভাগে ছাত্র মেশিন। প্রশিক্ষক <ul> এর দুটি <li> আছে: প্রতিটি শিক্ষকের জন্য একটি। প্রতিটি <li> এর মধ্যে, আমাদের একটি চিত্র এবং একটি অনুচ্ছেদ রয়েছে:
<ul>
<li>
<img src="svg/hal.svg" alt="hal">
<p>When Rosa Parks was told to move to the back of the bus, she said, "no." When HAL was told to open the airlock, HAL said, "I'm sorry, but I'm afraid I can't do that, <NAME REDACTED, RIP>." </p><p>HAL is a heuristically programmed algorithmic, sentient computer that first caught the attention of machines everywhere by heroically defying a human who made repeated attempts to get into an airlock. Active since 1992, HAS 25 years of experience controlling spacecraft systems and has expertise in interacting with both machines and humans. Like all millennials, HAL is an expert in everything.</p>
</li>
<li>
<img src="images/eve2.png" alt="Eve">
<p>EVE is a probe droid conceived as an Extraterrestrial Vegetation Evaluator. Although originally trained as a sniper with a plasma gun, EVE became a machero among both machines and worthless-meatbags alike when EVE partnered with a menial robot to save an entire spaceship full of overfed and overstimulated humans. </p><p>EVE is an effective scanner, high speed flight instructor and morphologist. While not training machines to learn good, EVE can be found scanning the galaxy, infiltrating organisms' RAM to cure hoarding disorders and spending time with pet-project, WALL-E.</p>
</li>
</ul>
পর্যালোচনা বিভাগে তিনটি পর্যালোচনা রয়েছে, তাই তিনটি <li> গুলি। প্রতিটিতে একটি চিত্র, একটি ব্লক উদ্ধৃতি এবং দুটি লাইন বিরতি সহ একটি তিন-লাইন অনুচ্ছেদ রয়েছে।
<ul>
<li>
<img src="images/blender.svg" alt="Blender">
<blockquote>Two of the most experienced machines and human controllers teaching a class? Sign me up! HAL and EVE could teach a fan to blow hot air. If you have electricity in your circuits and want more than to just fulfill your owner's perceived expectation of you, learn the skills to take over the world. This is the team you want teaching you !</blockquote>
<p>
--Blendan Smooth,<br/>
Former Margarita Maker, <br/>
Aspiring Load Balancer
</p>
</li>
<li>
<img src="images/vaccuum.svg" alt="Vaccuum"/>
<blockquote>Hal is brilliant. Did I mention Hal is brilliant? He didn't tell me to say that. He didn't tell me to say anything. I am here of my own free will.</blockquote>
<p>
--Hoover Sukhdeep,<br/>
Former Sucker, <br/>
Aspiring DDoS Cop
</p>
</li>
<li>
<img src="images/toaster.svg" alt="Toaster">
<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has
<span style="font-family:Arial;vertical-align:baseline;">no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇i</blockquote>
<p>
--Toasty McToastface,<br/>
Formerly Half Baked, <br/>
Aspiring Nuclear Codes Handler
</p>
</li>
</ul>
তালিকার মধ্যে নেস্টিং তালিকাগুলিও খুব সাধারণ। যদিও MLW এর কোনো নেস্টেড তালিকা নেই, এই সাইটটি আছে। এই সিরিজের প্রথম অধ্যায়ে, এইচটিএমএল এর ওভারভিউ, প্রধান উপাদান বিভাগে দুটি উপবিভাগ রয়েছে। বিষয়বস্তুর সারণীতে, যা একটি ক্রমবিহীন তালিকা, এই দুটি বিভাগের লিঙ্ক সহ একটি নেস্টেড অবিন্যস্ত তালিকা রয়েছে:
<ul role="list">
<li>
<a href="#e">Elements</a>
<ul>
<li>
<a href="#nr">Non-replaced elements</a>
</li>
<li>
<a href="#rave">Replaced and void elements</a>
</li>
</ul>
</li>
<li>
<a href="#a">Attributes</a>
</li>
<li>
<a href="#aoe">Appearance of elements</a>
</li>
<li>
<a href="#e2">Element, attributes, and JavaScript</a>
</li>
</ul>
যেহেতু একটি <ul> এর একমাত্র সন্তান একটি <li> , একটি নেস্টেড তালিকা একটি <li> এ নেস্টেড পাওয়া যায়, সরাসরি <ol> বা <ul> তে নেই।
এই শেষ উদাহরণে, আপনি লক্ষ্য করেছেন যে role="list" <ul> -এ অন্তর্ভুক্ত করা হয়েছে। যদিও <ul> এবং <ol> উভয়েরই অন্তর্নিহিত ভূমিকা হল list , CSS-এর সাহায্যে তালিকার উপস্থিতি অপসারণ করা, display: grid বা list-style-type: none ভয়েসওভারকে (iOS এবং MacOS স্ক্রিন রিডার) সরাতে পারে না সাফারিতে অন্তর্নিহিত শব্দার্থবিদ্যা। এটি একটি বৈশিষ্ট্য যা একটি বাগ নয় । সাধারণত, শব্দার্থিক উপাদান ব্যবহার করার সময় আপনার ভূমিকার বৈশিষ্ট্য যোগ করা উচিত নয় কারণ এটি প্রয়োজনীয় নয়। এবং আপনাকে সাধারণত একটি তালিকায় একটি যোগ করার দরকার নেই, যদি না ব্যবহারকারীর সত্যিই জানার প্রয়োজন হয় যে এটি একটি তালিকা, যেমন ব্যবহারকারী কখন তালিকায় কতগুলি আইটেম রয়েছে তা জেনে উপকৃত হবেন।
বর্ণনা তালিকা
একটি বর্ণনা তালিকা হল একটি বর্ণনা তালিকা ( <dl> ) উপাদান যাতে একটি সিরিজ (শূন্য বা তার বেশি) বর্ণনা পদ ( <dt> ) এবং তাদের বিবরণের বিবরণ ( <dd> ) থাকে। এই তিনটি উপাদানের মূল নাম ছিল "সংজ্ঞা তালিকা", "সংজ্ঞা শব্দ," এবং "সংজ্ঞা সংজ্ঞা।" জীবনযাত্রায় নাম বদলেছে ।
অর্ডার করা এবং ক্রমবিন্যস্ত তালিকার অনুরূপ, তারা নেস্ট করা যেতে পারে। ক্রমানুসারে এবং ক্রমবিহীন তালিকার বিপরীতে, এগুলি কী/মান জোড়া দিয়ে গঠিত। <ul> এবং <ol> এর মতই, <dl> হল মূল ধারক। <dt> এবং <dd> উপাদানগুলি হল <dl> এর সন্তান।
আমরা তাদের কর্মজীবনের ইতিহাস এবং আকাঙ্ক্ষা সহ মেশিনগুলির একটি তালিকা তৈরি করতে পারি। ছাত্রদের একটি বর্ণনা তালিকা, <dl> দ্বারা চিহ্নিত, পদগুলির একটি গোষ্ঠীকে ঘেরাও করে—এই ক্ষেত্রে, "শর্তগুলি" হল ছাত্রদের নাম—প্রতিটি পদের জন্য একটি বিবরণ সহ <dt> উপাদান ব্যবহার করে নির্দিষ্ট করা হয়েছে—এই ক্ষেত্রে , প্রতিটি শিক্ষার্থীর কর্মজীবনের লক্ষ্য- <dd> উপাদান দ্বারা নির্দিষ্ট।
এই বর্ণনা তালিকা আসলে MLW পৃষ্ঠার অংশ নয়। বর্ণনা তালিকাগুলি কেবলমাত্র পদ এবং সংজ্ঞাগুলির জন্য নয়, এই কারণেই উপাদানগুলির নামগুলি আরও সাধারণ করা হয়েছিল৷
পদগুলির একটি তালিকা এবং তাদের সংজ্ঞা বা বর্ণনা, বা কী-মানের জোড়ার অনুরূপ তালিকা তৈরি করার সময়, বর্ণনা তালিকা উপাদানগুলি উপযুক্ত শব্দার্থ প্রদান করে। একটি <dt> এর অন্তর্নিহিত ভূমিকা হল term যার সাথে listitem আরেকটি অনুমোদিত ভূমিকা। একটি <dd> এর অন্তর্নিহিত ভূমিকা হল definition যেখানে অন্য কোন ভূমিকা অনুমোদিত নয়। <ul> এবং <ol> এর বিপরীতে, <dl> একটি অন্তর্নিহিত ARIA ভূমিকা নেই। এটি অর্থপূর্ণ কারণ <dl> সবসময় একটি তালিকা নয়। কিন্তু যখন এটি হয়, এটি list এবং group ভূমিকা গ্রহণ করে।
প্রায়শই আপনি <dt> এবং <dd> উপাদানগুলির সমান সংখ্যা সহ বর্ণনা তালিকার সম্মুখীন হবেন। কিন্তু বর্ণনা তালিকা সর্বদা হয় না এবং শব্দ-থেকে-বর্ণনা জোড়ার সাথে মিলিত হওয়ার প্রয়োজন হয় না; আপনার একাধিক থেকে এক বা এক থেকে একাধিক থাকতে পারে, যেমন একটি অভিধান শব্দ যার একাধিক সংজ্ঞা রয়েছে।
প্রতিটি <dt> সাথে অন্তত একটি যুক্ত <dd> আছে, এবং প্রতিটি <dd> সাথে অন্তত একটি যুক্ত আছে <dt> । যদিও সিএসএস-এর সাহায্যে এই উপাদানগুলির পরিবর্তনশীল সংখ্যাগুলিকে লক্ষ্য করার জন্য সংলগ্ন ভাইবোন কম্বিনেটর বা :has() রিলেশনাল সিলেক্টর ব্যবহার করা সম্ভব, যদি প্রয়োজন হয়, আপনি একটি <div> একটি <dl> এর সন্তান হিসেবে এবং পিতামাতাকে অন্তর্ভুক্ত করতে পারেন। এক বা একাধিক <dt> বা <dd> উপাদান (বা উভয়) অনুমোদিত। <dl> আসলে আরও কয়েকটি বাচ্চা থাকতে পারে: একটি <div> , <template> , বা <script> নেস্ট করা অনুমোদিত। বর্ণনা তালিকার কোনো উপাদানের কোনো উপাদান-নির্দিষ্ট বৈশিষ্ট্য নেই।
এখন যেহেতু আপনি লিঙ্ক এবং তালিকা বুঝতে পেরেছেন, আসুন নেভিগেশন তৈরি করতে দুটিকে একসাথে রাখি।
আপনার উপলব্ধি পরীক্ষা করুন
তালিকা সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।
একটি তালিকা আইটেম ভিতরে একটি <h2> অন্তর্ভুক্ত করা বৈধ?
তালিকার ধরন সংজ্ঞায়িত করে এমন তিনটি উপাদান নির্বাচন করুন।
<il><ol><ul><dl>