এইচটিএমএল ব্লক-স্তরের এবং ইনলাইন উপাদানসমূহ
এই প্রবন্ধটি এইচটিএমএল ব্লক-স্তরের এবং ইনলাইন উপাদানসমূহ ব্যাখ্যা করে।
এটি ব্লক-স্তরের উপাদান এবং ইনলাইন উপাদানগুলির মধ্যে পার্থক্য ব্যাখ্যা করে, পাশাপাশি প্রধান ব্লক-স্তরের উপাদান এবং ইনলাইন উপাদানগুলিকেও ব্যাখ্যা করে।
YouTube Video
ব্লক-স্তরের উপাদান এবং ইনলাইন উপাদান
এইচটিএমএল-এর দুটি প্রধান উপাদান রয়েছে যা স্ক্রীনে প্রদর্শনের পদ্ধতি নির্ধারণ করে: 'ব্লক-লেভেল এলিমেন্টস' এবং 'ইনলাইন এলিমেন্টস'। এই উপাদানগুলি পৃষ্ঠার বিন্যাসে গুরুত্বপূর্ণ ভূমিকা পালন করে এবং তাদের অবস্থান নির্ধারণের উপর সরাসরি প্রভাব ফেলে। এখানে আমরা প্রতিটি উপাদানের বৈশিষ্ট্য এবং ব্যবহারের বিস্তারিত ব্যাখ্যা করব।
ব্লক-লেভেল এলিমেন্ট কী?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>ব্লক-লেভেল এলিমেন্টস সাধারণত পৃষ্ঠার পুরো প্রস্থ দখল করে এবং অন্য উপাদান থেকে পৃথক লাইনে প্রদর্শিত হয়। এই উপাদানগুলি তাদের অভ্যন্তরে অন্যান্য ব্লক-লেভেল বা ইনলাইন এলিমেন্টস ধারণ করতে পারে এবং একটি ডকুমেন্টের বৃহত্তর কাঠামো সংজ্ঞায়িত করে।
বৈশিষ্ট্যসমূহঃ
- এই উপাদানগুলি একটি নতুন লাইনে শুরু হয় এবং যতটা সম্ভব প্রস্থ দখল করে (সাধারণত প্যারেন্ট এলিমেন্টের পুরো প্রস্থ)।
- এগুলি অন্য ব্লক এলিমেন্ট থেকে উল্লম্বভাবে আলাদা হয় এবং তাদের মধ্যে মার্জিন প্রয়োগ করা হয়।
- তারা তাদের মধ্যে অন্যান্য ব্লক বা ইনলাইন উপাদান ধারণ করতে পারে।
এখানে নিম্নলিখিত ব্লক-লেভেল এলিমেন্টস ব্যবহৃত হয়েছে:।
<div>ট্যাগ সাধারণত লেআউট তৈরি করতে ব্যবহৃত হয়।<p>ট্যাগ একটি প্যারাগ্রাফ সংজ্ঞায়িত করতে ব্যবহৃত হয়।<h1>থেকে<h6>হল শিরোনাম সংজ্ঞায়িত করার জন্য ব্যবহার করা হয় এমন উপাদান।<h1>সবচেয়ে বড় শিরোনাম এবং<h6>সবচেয়ে ছোট।<ul>ট্যাগ একটি অগোছালো তালিকা তৈরি করে।<ol>ট্যাগ একটি সুশৃঙ্খল তালিকা তৈরি করে।<section>ট্যাগ একটি ডকুমেন্টের মধ্যে একটি সেকশন সংজ্ঞায়িত করে।
একটি ইনলাইন উপাদান কী?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>ইনলাইন এলিমেন্টস অন্যান্য উপাদানের সাথে একই লাইনে থাকে এবং সাধারণত তাদের কনটেন্টের প্রস্থ অনুযায়ী জায়গা নেয়। এই উপাদানগুলি পাঠ্যের অংশ হিসেবে বিবেচিত হয় এবং ব্লক স্তরের উপাদানগুলির বিপরীতে সম্পূর্ণ লাইন দখল করে না।
বৈশিষ্ট্যসমূহঃ
- উপাদানসমূহ একই লাইনে প্রদর্শিত হয় এবং অন্যান্য ইনলাইন উপাদানগুলির পাশে স্থাপিত হয়।
- প্রস্থ উপাদানের সামগ্রী (পাঠ্য বা ছবি) দ্বারা নির্ধারিত হয়।
- এগুলো ব্লক-লেভেল এলিমেন্টের অভ্যন্তরে রাখা যায়, তবে বিপরীতটি সম্ভব নয়।
এখানে নিম্নলিখিত ইনলাইন এলিমেন্টস ব্যবহৃত হয়েছে:।
<span>ট্যাগটি একটি নির্দিষ্ট স্টাইলের সাথে টেক্সটের একটি অংশে জোর দিতে ব্যবহার হয়।<a>ট্যাগ একটি হাইপারলিঙ্ক সংজ্ঞায়িত করে।<img>ট্যাগ একটি উপাদান যা ইমেজ এম্বেড করতে ব্যবহৃত হয়।<strong>গুরুত্বপূর্ণ টেক্সট হাইলাইট করে (সাধারণত বল্ডে প্রদর্শিত হয়)।<em>জোর দেওয়া টেক্সট নির্দেশ করে (সাধারণত ইটালিকসে প্রদর্শিত হয়)।
ব্লক-লেভেল এলিমেন্ট এবং ইনলাইন এলিমেন্টের মধ্যে পার্থক্য
- প্রদর্শন পদ্ধতি: ব্লক-লেভেল এলিমেন্ট নতুন লাইনে প্রদর্শিত হয় এবং পৃষ্ঠার পুরো প্রস্থ দখল করে, অন্যদিকে ইনলাইন এলিমেন্টস একই লাইনে প্রদর্শিত হয় এবং তাদের প্রস্থ তাদের কনটেন্ট দ্বারা নির্ধারিত হয়।
- অভ্যন্তরীণ উপাদান পরিচালনা: ব্লক-লেভেল এলিমেন্ট অন্যান্য ব্লক-লেভেল এলিমেন্ট এবং ইনলাইন এলিমেন্ট অন্তর্ভুক্ত করতে পারে, কিন্তু ইনলাইন এলিমেন্ট ব্লক-লেভেল এলিমেন্ট ধারণ করতে পারে না।
- লেআউট ভূমিকা: ব্লক-লেভেল এলিমেন্টস প্রধানত একটি পৃষ্ঠার লেআউট কাঠামো তৈরি করতে ব্যবহৃত হয়, অন্যদিকে ইনলাইন এলিমেন্টস টেক্সট এবং লিঙ্কের মতো ছোট উপাদান সংজ্ঞায়িত করে।
পার্থক্যের মূল বিষয়গুলি
লেআউট তৈরি: <div>, <section>, <article> এর মতো ব্লক-লেভেল এলিমেন্ট ব্যবহার করে বড় সেকশন এবং কনটেন্ট ব্লক সংজ্ঞায়িত করুন।
টেক্সট সজ্জা এবং লিঙ্ক: টেক্সটের অংশ সজ্জা করতে বা লিঙ্ক যোগ করতে <span>, <a>, <strong>, <em> এর মতো ইনলাইন এলিমেন্ট ব্যবহার করুন।
ব্লক-লেভেল এবং ইনলাইন উপাদান মিশ্রণ
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- ব্লক-স্তরের উপাদান যেমন
<main>,<header>, এবং<section>ব্যবহার করা হয় এবং সাধারণত সেগুলি একটি নতুন লাইনে রেন্ডার করা হয়, তাদের প্যারেন্ট উপাদানের সম্পূর্ণ প্রস্থ দখল করে। - ইনলাইন উপাদান যেমন
<a>,<strong>,<span>, এবং<img>ব্যবহার করা হয় এবং সেগুলি লাইনের মধ্যে স্থাপন করা হয় ব্লক-স্তরের উপাদানের সম্পূর্ণ প্রস্থ না নিয়ে।
ব্লক-লেভেল উপাদানের মধ্যে ইনলাইন উপাদান অন্তর্ভুক্ত করা একটি সাধারণ প্যাটার্ন। উদাহরণস্বরূপ, একটি প্যারাগ্রাফ (<p>) এর ভিতরে লিঙ্ক (<a>) বা জোর দেওয়া (<strong>) অন্তর্ভুক্ত করা সাধারণ বিষয়। তবে, যেহেতু ইনলাইন উপাদানের মধ্যে ব্লক-স্তরের উপাদান অন্তর্ভুক্ত করা সম্ভব নয়, তাই সেগুলো যথোপযুক্তভাবে ব্যবহার করা গুরুত্বপূর্ণ।
সারসংক্ষেপ
ব্লক-স্তরের উপাদান এবং ইনলাইন উপাদান হল HTML উপাদানের দুটি মৌলিক ধরন, প্রতিটির নিজস্ব ভূমিকা রয়েছে। ব্লক-স্তরের উপাদান পৃষ্ঠার বিন্যাসের ভিত্তি তৈরি করে, যেখানে ইনলাইন উপাদানগুলো তাদের ভিতরে সূক্ষ্ম কন্টেন্ট সাজাতে এবং নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এই দুই ধরনের উপাদান বোঝা এবং সঠিকভাবে ব্যবহার করা কার্যকর HTML কোডিং সক্ষম করে।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।