শিরোনাম এবং বিভাগ

গত অধ্যায়ে আপনি শিখেছেন যে, কোনো পৃষ্ঠার শব্দগুলোর অর্থ আপনার জানা না থাকলেও, যখন শব্দার্থিক উপাদানগুলো ডকুমেন্টটিকে একটি অর্থবহ কাঠামো প্রদান করে, তখন অন্যরা—যেমন সার্চ ইঞ্জিন, সহায়ক প্রযুক্তি, ভবিষ্যৎ রক্ষণাবেক্ষণকারী, বা দলের নতুন সদস্য—ডকুমেন্টটির রূপরেখা বুঝতে পারে।

এই অংশে, আপনি ডকুমেন্টের কাঠামো সম্পর্কে জানবেন; পূর্ববর্তী অংশের বিভাজন উপাদানগুলো পুনরায় আলোচনা করবেন; এবং আপনার অ্যাপ্লিকেশনের রূপরেখা তৈরি করবেন।

কোড করার সময় কাজের জন্য সঠিক এলিমেন্ট বেছে নিলে আপনাকে আপনার HTML রিফ্যাক্টর বা কমেন্ট আউট করতে হবে না। আপনি যদি কাজের জন্য সঠিক এলিমেন্ট ব্যবহার করার কথা ভাবেন, তাহলে বেশিরভাগ ক্ষেত্রেই আপনি সঠিক এলিমেন্টটিই বেছে নেবেন। আর তা না করলে, সম্ভবত তা পারবেন না।

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

সাইট <header>

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

আপনি যদি আমাদের হেডারের শব্দার্থ নিয়ে খুব কম বা একেবারেই চিন্তা না করেন, তাহলে আপনি এই ধরনের কোড ব্যবহার করতে পারেন:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS দিয়ে (প্রায়) যেকোনো মার্কআপকে সুন্দর দেখানো যায়। কিন্তু সবকিছুর জন্য নন-সিম্যান্টিক <div> ব্যবহার করলে আসলে বাড়তি কাজ তৈরি হয়। CSS দিয়ে একাধিক <div> -কে টার্গেট করতে গেলে, কন্টেন্ট শনাক্ত করার জন্য আইডি বা ক্লাস ব্যবহার করতে হয়। এছাড়াও, কোডে প্রতিটি ক্লোজিং </div> এর জন্য একটি করে কমেন্ট থাকে, যা নির্দেশ করে যে কোন </div> ট্যাগটি কোন ওপেনিং ট্যাগকে ক্লোজ করেছে।

যদিও id এবং class অ্যাট্রিবিউটগুলো স্টাইলিং এবং জাভাস্ক্রিপ্টের জন্য হুক প্রদান করে, তবে এগুলো স্ক্রিন রিডার এবং (বেশিরভাগ ক্ষেত্রে) সার্চ ইঞ্জিনগুলোর জন্য কোনো অর্থগত তাৎপর্য যোগ করে না।

স্ক্রিন রিডারদের জন্য একটি ভালো অ্যাক্সেসিবিলিটি অবজেক্ট মডেল (AOM) তৈরি করতে, আপনি শব্দার্থ প্রদানের জন্য role অ্যাট্রিবিউট অন্তর্ভুক্ত করতে পারেন:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

এটি অন্তত শব্দার্থ প্রদান করে এবং CSS-এ অ্যাট্রিবিউট সিলেক্টর ব্যবহার সক্ষম করে, কিন্তু প্রতিটি </div> কোন <div> কে বন্ধ করে তা শনাক্ত করার জন্য এটি এখনও কমেন্ট যোগ করে।

যদি আপনি HTML জানেন, তাহলে আপনাকে শুধু কন্টেন্টের উদ্দেশ্য নিয়ে ভাবতে হবে। তাহলে আপনি role ব্যবহার না করে এবং ক্লোজিং ট্যাগগুলো কমেন্ট করার প্রয়োজন ছাড়াই এই কোডটি অর্থপূর্ণভাবে লিখতে পারবেন:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

এই কোডটিতে দুটি অর্থগত নির্দেশক ব্যবহৃত হয়েছে: <header> এবং <nav> ।

এটিই মূল হেডার। <header> এলিমেন্টটি সবসময় একটি ল্যান্ডমার্ক নয়। এটি কোথায় নেস্টেড আছে তার উপর নির্ভর করে এর অর্থ ভিন্ন হয়। যখন <header> টপ লেভেলে থাকে, তখন এটি সাইট banner , যা একটি ল্যান্ডমার্ক রোল এবং যা আপনি হয়তো role কোড ব্লকে লক্ষ্য করেছেন। যখন একটি <header> <main> , <article> , বা <section> এর মধ্যে নেস্টেড থাকে, তখন এটি শুধু সেই সেকশনের হেডার হিসেবে চিহ্নিত হয় এবং এটি কোনো ল্যান্ডমার্ক হিসেবে গণ্য হয় না।

<nav> এলিমেন্টটি কন্টেন্টকে নেভিগেশন হিসেবে চিহ্নিত করে। যেহেতু এই <nav> এলিমেন্টটি সাইটের হেডিং-এর মধ্যে নেস্টেড রয়েছে, তাই এটিই সাইটের প্রধান নেভিগেশন। যদি এটি কোনো <article> বা <section> এর মধ্যে নেস্টেড থাকত, তবে এটি শুধুমাত্র সেই সেকশনের জন্য অভ্যন্তরীণ নেভিগেশন হিসেবে কাজ করত। সিমান্টিক এলিমেন্ট ব্যবহার করে, আপনি একটি অর্থবহ অ্যাক্সেসিবিলিটি অবজেক্ট মডেল বা AOM তৈরি করেছেন। এই AOM স্ক্রিন রিডারকে ব্যবহারকারীকে জানাতে সক্ষম করে যে, এই সেকশনটিতে একটি প্রধান নেভিগেশন ব্লক রয়েছে, যা ব্যবহারকারী চাইলে অতিক্রম করতে পারেন অথবা এড়িয়ে যেতে পারেন।

</nav> এবং </header> ক্লোজিং ট্যাগ ব্যবহার করলে, কোন এন্ড ট্যাগটি কোন এলিমেন্টকে ক্লোজ করেছে তা শনাক্ত করার জন্য কমেন্টের প্রয়োজন হয় না। এছাড়াও, বিভিন্ন এলিমেন্টের জন্য ভিন্ন ভিন্ন ট্যাগ ব্যবহার করলে id এবং class হুকের প্রয়োজন হয় না। CSS সিলেক্টরগুলোর স্পেসিফিসিটি কম হতে পারে; আপনি সম্ভবত কনফ্লিক্টের চিন্তা না করেই header nav a দিয়ে লিঙ্কগুলোকে টার্গেট করতে পারবেন।

আপনি খুব অল্প HTML ব্যবহার করে এবং কোনো ক্লাস বা আইডি ছাড়াই একটি হেডার লিখেছেন। সিমান্টিক HTML ব্যবহার করার সময় এগুলোর প্রয়োজন হয় না।

সাইট <footer>

সাইটের ফুটার কোড করুন।

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

<header> এর মতোই, ফুটারটি একটি ল্যান্ডমার্ক হবে কিনা তা নির্ভর করে এটি কোথায় নেস্টেড আছে তার উপর। যখন এটি সাইট ফুটার হয়, তখন এটি একটি ল্যান্ডমার্ক, এবং এতে আপনার প্রতিটি পৃষ্ঠায় কাঙ্ক্ষিত সাইট ফুটারের তথ্য থাকা উচিত, যেমন কপিরাইট বিবৃতি, যোগাযোগের তথ্য, এবং আপনার গোপনীয়তা ও কুকি নীতির লিঙ্ক। সাইট ফুটারের ইমপ্লিসিট role হলো contentinfo । অন্যথায়, ফুটারের কোনো ইমপ্লিসিট রোল থাকে না এবং এটি কোনো ল্যান্ডমার্ক নয়, যেমনটি ক্রোমের AOM-এর নিম্নলিখিত স্ক্রিনশটে দেখানো হয়েছে (যেখানে একটি <article> আছে এবং এর মধ্যে একটি <header> ও <header> <footer> <footer> )।

এই স্ক্রিনশটে দুটি ফুটার রয়েছে: একটি <article> ভেতরে এবং অন্যটি টপ লেভেলে। টপ লেভেলের ফুটারটি একটি ল্যান্ডমার্ক, যার ইমপ্লিসিট রোল হলো contentinfo । অন্য ফুটারটি ল্যান্ডমার্ক নয়। ক্রোম এটিকে FooterAsNonLandmark হিসেবে দেখায়; ফায়ারফক্স এটিকে section হিসেবে দেখায়।

এর মানে এই নয় যে আপনার <footer> ব্যবহার করা উচিত নয়। উদাহরণস্বরূপ, আপনার যদি একটি ব্লগ থাকে, তাহলে আপনি একটি ইমপ্লিসিট contentinfo রোলসহ একটি সাইট ফুটার রাখতে পারেন। প্রতিটি ব্লগ পোস্টেও একটি <footer> থাকতে পারে। আপনার ব্লগের প্রধান ল্যান্ডিং পেজে, ব্রাউজার, সার্চ ইঞ্জিন এবং স্ক্রিন রিডার জানে যে প্রধান ফুটারটি হলো সর্বোচ্চ স্তরের ফুটার, এবং অন্য সব ফুটারগুলো সেই পোস্টগুলোর সাথে সম্পর্কিত যেগুলোর ভেতরে সেগুলো নেস্টেড রয়েছে।

যখন একটি <footer> কোনো <article> , <aside> , <main> , <nav> , বা <section> এর পরবর্তী অংশ হয়, তখন এটি একটি ল্যান্ডমার্ক হিসেবে গণ্য হয় না। যদি পোস্টটি আলাদাভাবে প্রদর্শিত হয়, তবে মার্কআপের ওপর নির্ভর করে সেই ফুটারটি সামনে চলে আসতে পারে।

ফুটারেই প্রায়শই যোগাযোগের তথ্য পাওয়া যায়, যা <address> এলিমেন্টের মধ্যে থাকে, অর্থাৎ যোগাযোগের ঠিকানা দেওয়ার এলিমেন্ট। এই এলিমেন্টটির নামকরণ খুব একটা সঠিক নয়; এটি ব্যক্তি বা প্রতিষ্ঠানের যোগাযোগের তথ্য রাখার জন্য ব্যবহৃত হয়, ডাক ঠিকানার জন্য নয়।

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

নথির কাঠামো

এই মডিউলটি <header> এবং <footer> দিয়ে শুরু হয়, কারণ এগুলো কেবল মাঝে মাঝে নির্দেশক (বা "বিভাজনকারী") উপাদান হিসেবে ব্যবহৃত হয়। আরও বেশ কিছু বহুল ব্যবহৃত বিভাজনকারী উপাদান রয়েছে।

একটি হেডার, দুটি সাইডবার এবং একটি ফুটার সমন্বিত লেআউটকে ‘হোলি গ্রেইল লেআউট’ বলা হয়। এই কন্টেন্ট মার্ক আপ করার অনেক উপায় আছে, যার মধ্যে রয়েছে:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

আপনি যদি একটি ব্লগ তৈরি করেন, তাহলে আপনার <main> এ একাধিক নিবন্ধ থাকতে পারে:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

সিমান্টিক এলিমেন্ট ব্যবহার করার মাধ্যমে ব্রাউজারগুলো অর্থপূর্ণ অ্যাক্সেসিবিলিটি ট্রি তৈরি করতে পারে। এটি স্ক্রিন রিডারের নেভিগেশন উন্নত করতে সাহায্য করে। এখানে, একটি সাইটের <header> এবং <footer> এর মাধ্যমে একটি banner এবং contentinfo প্রদান করা হয়েছে। এখানে যোগ করা নতুন এলিমেন্টগুলোর মধ্যে রয়েছে <main> , <aside> , এবং <article> ; এছাড়াও, <h1> এবং <nav> যা আপনি আগে ব্যবহার করেছেন, এবং <section> , যা আপনি এখনও ব্যবহার করেননি।

<main>

এখানে একটিমাত্র <main> ল্যান্ডমার্ক এলিমেন্ট রয়েছে। <main> এলিমেন্টটি ডকুমেন্টের মূল বিষয়বস্তুকে চিহ্নিত করে। প্রতি পৃষ্ঠায় কেবল একটিই <main> থাকা উচিত।

<aside>

<aside> ট্যাগটি এমন কন্টেন্টের জন্য ব্যবহৃত হয় যা ডকুমেন্টের মূল কন্টেন্টের সাথে পরোক্ষভাবে বা প্রাসঙ্গিকভাবে সম্পর্কিত। উদাহরণস্বরূপ, এই ডকুমেন্টটি HTML সম্পর্কিত। তিনটি সাইট হেডার উদাহরণের (div, role, এবং semantic) জন্য CSS সিলেক্টর স্পেসিফিসিটি বিষয়ক একটি সেকশনের ক্ষেত্রে, প্রাসঙ্গিকভাবে সম্পর্কিত অ্যাসাইডটি একটি <aside> মধ্যে রাখা যেতে পারে; এবং বেশিরভাগের মতোই, <aside> ট্যাগটি সম্ভবত একটি সাইডবার বা কল-আউট বক্সে উপস্থাপন করা হবে। <aside> ট্যাগটি একটি ল্যান্ডমার্ক হিসেবেও কাজ করে, যার একটি পরিপূরক complementary ভূমিকা রয়েছে।

<article>

<main> এর ভেতরে আমরা দুটি <article> এলিমেন্ট যুক্ত করেছি। প্রথম উদাহরণে এর প্রয়োজন ছিল না, কারণ তখন মূল বিষয়বস্তু ছিল মাত্র একটি শব্দ, অথবা বাস্তব জগতে, এটি একটিমাত্র কন্টেন্ট সেকশন হতে পারত। কিন্তু, আপনি যদি আমাদের দ্বিতীয় উদাহরণের মতো একটি ব্লগ লেখেন, তবে প্রতিটি পোস্ট <main> এর ভেতরে থাকা একটি <article> -এর মধ্যে থাকা উচিত।

একটি <article> হলো বিষয়বস্তুর একটি সম্পূর্ণ বা স্বয়ংসম্পূর্ণ অংশ, যা নীতিগতভাবে স্বাধীনভাবে পুনঃব্যবহারযোগ্য। একটি আর্টিকেলকে সংবাদপত্রের আর্টিকেলের মতোই ভাবুন। ছাপানো পত্রিকায়, নিউজিল্যান্ডের প্রধানমন্ত্রী জেসিন্ডা আর্ডার্নকে নিয়ে একটি সংবাদ আর্টিকেল হয়তো শুধু একটি বিভাগেই প্রকাশিত হতে পারে, যেমন বিশ্ব সংবাদ বিভাগে। পত্রিকাটির ওয়েবসাইটে, সেই একই সংবাদ আর্টিকেলটি হোম পেজে, রাজনীতি বিভাগে, ওশেনিয়া বা এশিয়া প্যাসিফিক সংবাদ বিভাগে এবং সংবাদের বিষয়বস্তুর ওপর নির্ভর করে, সম্ভবত খেলাধুলা, জীবনধারা বা প্রযুক্তি বিভাগেও প্রকাশিত হতে পারে। আর্টিকেলটি পকেট বা ইয়াহু নিউজের মতো অন্যান্য সাইটেও প্রকাশিত হতে পারে!

<section>

যখন ব্যবহার করার মতো আরও সুনির্দিষ্ট কোনো অর্থবোধক এলিমেন্ট থাকে না, তখন একটি ডকুমেন্টের সাধারণ স্বতন্ত্র বিভাগগুলোকে অন্তর্ভুক্ত করার জন্য <section> এলিমেন্টটি ব্যবহৃত হয়। খুব অল্প কিছু ব্যতিক্রম ছাড়া, বিভাগগুলোর একটি শিরোনাম থাকা উচিত।

জাসিন্ডা আর্ডার্নের উদাহরণে ফিরে গেলে, সংবাদপত্রের হোম পেজে ব্যানারে সংবাদপত্রের নাম থাকবে, তারপরে একটি <main> থাকবে, যা কয়েকটি <section> -এ বিভক্ত থাকবে, এবং প্রতিটির একটি হেডার থাকবে, যেমন "বিশ্ব সংবাদ" এবং "রাজনীতি"; এবং প্রতিটি সেকশনের মধ্যে আপনি একাধিক <article> পাবেন। প্রতিটি <article> এর মধ্যে, আপনি এক বা একাধিক <section> এলিমেন্টও পেতে পারেন। আপনি যদি এই পৃষ্ঠাটি দেখেন, তাহলে পুরো "হেডার এবং সেকশন" অংশটিই হলো <article> । এই <article> আবার কয়েকটি <section> -এ বিভক্ত, যার মধ্যে রয়েছে site header , site footer এবং ডকুমেন্ট স্ট্রাকচার। আর্টিকেলটির নিজের একটি হেডার আছে, যেমনটি প্রতিটি সেকশনেরও আছে।

একটি <section> ততক্ষণ পর্যন্ত ল্যান্ডমার্ক নয়, যতক্ষণ না এর একটি অ্যাক্সেসিবল নাম থাকে; যদি এর একটি অ্যাক্সেসিবল নাম থাকে, তবে এর অন্তর্নিহিত ভূমিকাটি হলো region । ল্যান্ডমার্ক রোলগুলি পরিমিতভাবে ব্যবহার করা উচিত, যাতে ডকুমেন্টের বৃহত্তর সামগ্রিক বিভাগগুলিকে চিহ্নিত করা যায়। খুব বেশি ল্যান্ডমার্ক রোল ব্যবহার করলে স্ক্রিন রিডারে "গোলমাল" তৈরি হতে পারে, যা পৃষ্ঠার সামগ্রিক বিন্যাস বোঝা কঠিন করে তোলে। যদি আপনার <main> এ দুই বা তিনটি গুরুত্বপূর্ণ উপ-বিভাগ থাকে, তবে প্রতিটি <section> এর জন্য একটি অ্যাক্সেসিবল নাম অন্তর্ভুক্ত করা উপকারী হতে পারে।

শিরোনাম: <h1> - <h6>

ছয়টি সেকশন হেডিং এলিমেন্ট রয়েছে: <h1> , <h2> , <h3> , <h4> , <h5> , এবং <h6> । প্রতিটি সেকশন হেডিংয়ের ছয়টি স্তরের একটিকে প্রতিনিধিত্ব করে, যেখানে <h1> হলো সর্বোচ্চ বা সবচেয়ে গুরুত্বপূর্ণ সেকশন স্তর এবং <h6> হলো সর্বনিম্ন।

যখন কোনো হেডিং একটি ডকুমেন্ট ব্যানার <header> এর মধ্যে থাকে, তখন সেটি অ্যাপ্লিকেশন বা সাইটের হেডিং হয়। যখন এটি <main> এর মধ্যে থাকে, সেটি <main> এর ভেতরে <header> এর মধ্যে থাকুক বা না থাকুক, এটি সেই পেজের হেডার হয়, পুরো সাইটের নয়। যখন এটি একটি <article> বা <section> এর মধ্যে থাকে, তখন এটি পেজের সেই উপবিভাগের হেডার হয়।

টেক্সট এডিটরের হেডিং লেভেলের মতোই হেডিং লেভেল ব্যবহার করার পরামর্শ দেওয়া হয়: মূল শিরোনাম হিসেবে <h1> দিয়ে শুরু করুন, উপ-বিভাগের শিরোনাম হিসেবে <h2> ব্যবহার করুন, এবং যদি সেই উপ-বিভাগগুলোরও বিভাগ থাকে তবে <h3> ব্যবহার করুন; কোনো হেডিং লেভেল বাদ দেবেন না। বিভাগের শিরোনাম সম্পর্কে এখানে একটি ভালো নিবন্ধ রয়েছে।

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

এখন আপনার MachineLearningWorkshop.com-এর রূপরেখা তৈরি করার মতো যথেষ্ট জ্ঞান আছে:

MLW.com-এর <body> -এর রূপরেখা

এটি হলো মেশিন লার্নিং ওয়ার্কশপ সাইটের দৃশ্যমান বিষয়বস্তুর রূপরেখা:

যেহেতু কোনো কন্টেন্টই একটি স্বতন্ত্র ও সম্পূর্ণ রচনা নয়, তাই <article> এর চেয়ে <section> বেশি উপযুক্ত; যদিও উভয়েরই একটি শিরোনাম থাকে, কোনো সেকশনই <footer> ব্যবহারের যোগ্য নয়।

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

আপনার বোধগম্যতা যাচাই করুন

শিরোনাম ও বিভাগ সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।