অতিরিক্ত HTML উপাদান

আগের ক্রিয়াকলাপে, আপনি শিখেছেন:

  • এইচটিএমএল ট্যাগ এবং উপাদানের মৌলিক বিষয়।
  • কিভাবে একটি ওয়েব পেজ গঠন করতে হয়।
  • শব্দার্থিক এইচটিএমএল এবং সেরা অনুশীলন।

এই নিবন্ধটির মাধ্যমে, আপনি আপনার HTML জ্ঞানের উপর ভিত্তি করে তৈরি করা চালিয়ে যান এবং অতিরিক্ত HTML উপাদানগুলিকে কভার করেন।

পাঠ্য বিষয়বস্তুর উপাদান

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

এই উপাদানগুলি পাঠ্য বিষয়বস্তু তৈরি করতে সহায়তা করে এবং গঠন, শৈলী এবং অর্থ যোগ করে। পাঠ্য বিষয়বস্তুর একাধিক অংশ রয়েছে যা নিম্নলিখিত উপাদানগুলিকে অন্তর্ভুক্ত করতে পারে।

ব্লককোট উপাদান

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

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

উদ্ধৃতি ব্যবহার করার সময় এবং উৎস থেকে তথ্য উল্লেখ করার সময় <blockquote> উপাদানটি ব্যবহার করুন। <blockquote> উপাদানটি উপস্থাপনায় একটি অনন্য ইন্ডেন্টেশন এবং সারিবদ্ধকরণ তৈরি করে এবং একটি খোলা এবং বন্ধ উভয় ট্যাগ ব্যবহার করে। একটি <blockquote> বিশেষত সহায়ক যখন দীর্ঘ কোটেশন ব্যবহার করে যা পাঠ্যের একাধিক লাইন কভার করে।

আপনি একটি <blockquote> উপাদানের মধ্যে বিভিন্ন উপাদান ব্যবহার করতে পারেন, যেমন একটি শিরোনাম, অনুচ্ছেদ বা তালিকা।

<details> উপাদান

<details>
   <summary>Details</summary>
   Additional Information
</details>

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

<details> উপাদানটি অতিরিক্ত তথ্য ধারণ করে এমন একটি প্রকাশ করা উইজেট ব্যবহার করে সহায়ক। উপাদানটিতে একটি অন্তর্নির্মিত টগল কার্যকারিতা রয়েছে এবং ব্যবহারকারী টগলটি খুলতে এবং বন্ধ করতে পারে। যখন টগল খোলা থাকে, অতিরিক্ত তথ্য সামগ্রী প্রসারিত হয় এবং ব্যবহারকারীর দ্বারা পড়তে পারে। যখন টগল বন্ধ করা হয়, অতিরিক্ত তথ্য সামগ্রী ব্যবহারকারীর কাছ থেকে লুকানো হয়। <details> উইজেটের নাম দিতে, <summary> উপাদান ব্যবহার করুন।

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

এটি হল <figure> অ্যাকশনের উপাদান। এখানে আপনি দেখতে পাচ্ছেন যে <figcaption> উপাদানের সাথে ব্যবহৃত <figure> , ভিজ্যুয়াল অভিজ্ঞতা বাড়াতে ব্যবহার করা যেতে পারে।

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

<time> উপাদান

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

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

<time> উপাদান সময় উল্লেখ করে, এবং একটি 24 ঘন্টা ঘড়ি বা একটি নির্দিষ্ট তারিখের জন্য সময় উপস্থাপন করতে পারে যা সময় অঞ্চল এবং অবস্থানের জন্য সামঞ্জস্য করতে পারে। এই উপাদানটির জন্য ওপেনিং এবং ক্লোজিং ট্যাগ উভয়ই প্রয়োজন, <time> এবং </time> । আপনি datetime অ্যাট্রিবিউট যোগ করতে পারেন যাতে তারিখগুলি মেশিন রিডেবল ফরম্যাটে পড়া যায়।

নথি মেটাডেটা

<title>Sarah's Favorite Food Recipes</title>

যে কোনো সময় আপনি একটি ওয়েবসাইটের URL টাইপ করেন, সেখানে একটি <title> নাম থাকে যা ব্রাউজার বার বা ওয়েব পৃষ্ঠা ট্যাবে পড়া যায়। এটি একটি ওয়েব পৃষ্ঠার জন্য দেওয়া শিরোনামের নাম। এই উপাদানটি গুরুত্বপূর্ণ এবং অনুসন্ধান ফলাফলে সম্পর্কিত ওয়েব পৃষ্ঠাগুলির একটি তালিকা প্রদর্শন করতে একটি অনুসন্ধান ইঞ্জিন দ্বারা ব্যবহৃত হয়৷ শিরোনামের দৈর্ঘ্য সংক্ষিপ্ত এবং বর্ণনামূলক থেকে দীর্ঘ এবং আরও বর্ণনামূলক হতে পারে।

দৃশ্যকল্প: আপনার কাছে একটি ওয়েব পৃষ্ঠা আছে যার বিষয়ে আপনি ভাবছেন, কিন্তু নির্দিষ্ট ওয়েবসাইটের URLটি মনে রাখতে পারছেন না৷ একটি সার্চ ইঞ্জিনে কীওয়ার্ড টাইপ করুন। সার্চ ইঞ্জিন আপনি যে ওয়েব পৃষ্ঠাটি খুঁজছেন তা ট্র্যাক করতে সাহায্য করে এবং আপনি অনুসন্ধানে প্রদর্শিত <title> নামটি দেখতে পারেন।

এম্বেড করা বিষয়বস্তু উপাদান

পাঠ্য বিষয়বস্তু ছাড়াও, ব্যবহার করার জন্য বিভিন্ন ধরনের অতিরিক্ত সামগ্রী উপাদান রয়েছে৷

<iframe> উপাদান

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

অনলাইনে আইটেম কেনাকাটা শেষ করার সময় এবং আপনার পেমেন্ট বিকল্পে ক্লিক করার সময়, যেমন Paypal বা Apple Pay, এই বৈশিষ্ট্যগুলি সাধারণত একটি <iframe> সহ একটি ওয়েব পৃষ্ঠাতে যোগ করা হয়। স্থানীয় ব্যবসা খোঁজার জন্য অনলাইনে একটি মানচিত্র দেখা আরেকটি সাধারণ অভিজ্ঞতা। একটি ওয়েব পৃষ্ঠায় এই ধরনের ব্যবহারকারীর অভিজ্ঞতা একটি iframe দিয়ে যোগ করা যেতে পারে। উপরের উদাহরণে, আপনি একটি আইফ্রেমের মধ্যে উইকিপিডিয়া URL দেখতে পাচ্ছেন, যার শিরোনাম "উইকিপিডিয়া"।

<iframe> উপাদান আপনাকে অন্য উৎস থেকে সামগ্রী সন্নিবেশ করতে এবং একটি ওয়েব পৃষ্ঠার মধ্যে একটি ফ্রেম এম্বেড করতে দেয়। এটি একটি আয়তক্ষেত্রাকার আকৃতির ফ্রেম তৈরি করে এবং ব্রাউজারে সামগ্রী প্রদর্শন করে। একটি ফ্রেম <iframe> উপাদানের মধ্যে একটি উইন্ডো আকৃতির লেআউট উপস্থাপনের জন্য অনুমতি দেয়। অভিজ্ঞতা বাড়ানোর জন্য এটি আপনার ওয়েব পৃষ্ঠায় সামগ্রী যোগ করার একটি শক্তিশালী উপায়।

ফর্ম উপাদান

<progress max="100" value="30"> 30% </progress>

একটি দীর্ঘ ভিডিও দেখার সময়, বক্তৃতা বা একটি বিস্তৃত অ্যাপ্লিকেশন পূরণ করার সময়, একটি ভিজ্যুয়াল প্রগ্রেস বার থাকা আপনার অগ্রগতি ট্র্যাক করতে সহায়ক হতে পারে। এই ধরনের পরিস্থিতির জন্য <progress> উপাদানটি সহায়ক।

এই উপাদানটিকে একটি পটভূমির রঙ সহ একটি ভিজ্যুয়াল বার হিসাবে চিত্রিত করা হয়েছে। ভিজ্যুয়াল বারটি আকার এবং পটভূমির রঙের মধ্যে হতে পারে। অগ্রগতি বারের সাথে, আপনি ঐচ্ছিকভাবে max এবং value বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন৷ max অ্যাট্রিবিউট ফ্লোটিং পয়েন্ট নম্বর সেট করে এবং value অ্যাট্রিবিউট নোট করে যে একটি টাস্কে কতটা অগ্রগতি হয়েছে।

স্ক্রিপ্টিং

<canvas id="canvas"></canvas>

রিয়েল টাইমে গ্রাফিক্স এবং অ্যানিমেশন আঁকতে সক্ষম হতে, <canvas> উপাদানটি ব্যবহার করুন। একটি ক্যানভাস তৈরি করতে আপনার HTML ওয়েব পৃষ্ঠায় <canvas> উপাদানটি রাখুন। গ্রাফিক্স আঁকতে এবং তৈরি করতে কার্যকারিতার জন্য এই উপাদানটির জন্য JavaScript কোড প্রয়োজন।

টেবিল বিষয়বস্তু উপাদান

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

<table> উপাদান

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

<th> উপাদান

<th> উপাদানটি কোষের একটি গ্রুপের শিরোনাম।

<tr> উপাদান

<tr> উপাদানটি একটি টেবিলের মধ্যে ঘরের একটি সারি সংজ্ঞায়িত করে। এখান থেকে, আপনি নির্দিষ্ট সেল ডেটা যোগ করতে পারেন।

<td> উপাদান

<td> উপাদানটি প্রয়োজনীয় সামগ্রী যোগ করে ঘর তৈরি করে।

উপসংহার

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