ডিভ এবং স্প্যান এলিমেন্টস

এক্সএইচটিএমএল (XHTML)-এ <div> এবং <span> দুটি এলিমেন্ট অত্যন্ত গুরুত্বপূর্ণ এবং প্রচলিত। এই দুটি এলিমেন্টকে সাধারণত কন্টেইনার এলিমেন্ট হিসেবে ব্যবহার করা হয়, যা HTML বা XHTML পেজের বিভিন্ন উপাদানকে গ্রুপ করার জন্য ব্যবহার হয়। তবে, তাদের মধ্যে পার্থক্য রয়েছে যেটি স্টাইলিং এবং লেআউট ব্যবস্থাপনায় গুরুত্বপূর্ণ ভূমিকা পালন করে।

১. <div> এলিমেন্ট

<div> এলিমেন্টটি একটি ব্লক-লেভেল কন্টেইনার এলিমেন্ট যা সাধারণত বড় সেগমেন্ট বা সেকশনের জন্য ব্যবহার করা হয়। এটি মূলত ব্যবহার করা হয় একাধিক উপাদানকে একটি ব্লক আকারে গ্রুপ করতে। <div>-এর ভিতর আপনার পেজের বিভিন্ন উপাদান যেমন, প্যারাগ্রাফ, ইমেজ, হেডিং ইত্যাদি রাখা যায় এবং CSS অথবা JavaScript দিয়ে এর স্টাইল বা আচরণ কাস্টমাইজ করা যায়।

১.১ ব্লক-লেভেল এলিমেন্ট

ব্লক-লেভেল এলিমেন্ট হিসাবে, <div> এলিমেন্ট সাধারণত পুরো ওয়েব পেজের প্রস্থ পূর্ণ করে, এবং এর পরবর্তী উপাদানটি সাধারণত নতুন লাইনে চলে যায়।

১.২ ব্যবহার

<div>
    <h1>এটি একটি ডিভ এলিমেন্ট</h1>
    <p>এই প্যারাগ্রাফটি ডিভ এলিমেন্টের ভিতরে রয়েছে।</p>
</div>

১.৩ স্টাইলিং

<div> ট্যাগের মাধ্যমে বড় সেগমেন্ট বা বিভাগ (section) তৈরি করে CSS দিয়ে এর স্টাইল কাস্টমাইজ করা যায়। উদাহরণস্বরূপ:

<div style="background-color: lightblue; padding: 20px;">
    <h2>ডিভের মধ্যে কিছু কন্টেন্ট</h2>
    <p>এটি একটি প্যারাগ্রাফ যা ডিভে রয়েছে।</p>
</div>

এখানে, <div> ট্যাগের মাধ্যমে একটি ব্লক সেগমেন্ট তৈরি করা হয়েছে এবং এর ব্যাকগ্রাউন্ড রঙ এবং প্যাডিং সেট করা হয়েছে।

২. <span> এলিমেন্ট

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

২.১ ইনলাইন এলিমেন্ট

<span> একটি ইনলাইন এলিমেন্ট, এর মানে হলো এটি শুধুমাত্র প্রাসঙ্গিক টেক্সট বা এলিমেন্টের মধ্যে ইনলাইন অবস্থায় থাকে এবং পরবর্তী উপাদানগুলি একই লাইনে থাকে।

২.২ ব্যবহার

<p>এটি একটি <span style="color: red;">লাল রঙের</span> শব্দ।</p>

এখানে, <span> ট্যাগের মাধ্যমে শুধুমাত্র "লাল রঙের" শব্দটির রঙ পরিবর্তন করা হয়েছে, বাকি টেক্সট অপরিবর্তিত থাকল।

২.৩ স্টাইলিং

<span> ট্যাগটি ছোট টুকরা বা এলিমেন্টের জন্য স্টাইল প্রয়োগ করার জন্য উপযুক্ত, যেমন:

<p><span style="font-weight: bold; color: green;">এই টেক্সটটি গ্রিন এবং বোল্ড হবে।</span></p>

এখানে, <span> এলিমেন্টটি ব্যবহার করে একটি নির্দিষ্ট টেক্সট অংশে গ্রিন রঙ এবং বোল্ড স্টাইল প্রয়োগ করা হয়েছে।

৩. <div> এবং <span> এর মধ্যে পার্থক্য

৪. <div> এবং <span> এর কমন ব্যবহার

৪.১ নেভিগেশন মেনু

<div> এলিমেন্ট দিয়ে আপনি একটি ওয়েব পেজের নেভিগেশন মেনু তৈরি করতে পারেন:

<div style="background-color: #333;">
    <a href="#home" style="color: white; padding: 10px;">হোম</a>
    <a href="#services" style="color: white; padding: 10px;">সার্ভিস</a>
    <a href="#contact" style="color: white; padding: 10px;">কন্টাক্ট</a>
</div>

এখানে, <div> এলিমেন্ট দিয়ে পুরো মেনু তৈরি করা হয়েছে, যেখানে প্রতিটি লিঙ্ক ইনলাইন অবস্থায় থাকে।

৪.২ স্টাইলিং টেক্সট অংশ

<span> ট্যাগের মাধ্যমে টেক্সটের নির্দিষ্ট অংশে স্টাইল প্রয়োগ করা যায়:

<p>এই বাক্যের <span style="font-size: 20px; color: red;">বিশেষ অংশটি</span> বড় এবং লাল রঙের।</p>

এখানে, শুধুমাত্র "বিশেষ অংশটি" লাল রঙ এবং বড় সাইজে প্রদর্শিত হবে।

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

এক্সএইচটিএমএল (XHTML) ডকুমেন্টে <div> এবং <span> ট্যাগ দুটি অত্যন্ত গুরুত্বপূর্ণ। এগুলো সেমান্টিকভাবে নির্দিষ্ট কিছু কাজ করে না, তবে CSS (Cascading Style Sheets) বা JavaScript (JS) ব্যবহার করে এই উপাদানগুলিকে কাস্টমাইজ বা নিয়ন্ত্রণ করা যায়। এই ট্যাগগুলোর সাহায্যে HTML স্ট্রাকচার গঠন করা যায় এবং ওয়েব পেজের ভিজ্যুয়াল লেআউট এবং ফর্ম্যাটিং উন্নত করা যায়।

১. <div> ট্যাগের ব্যবহার

১.1 <div> ট্যাগের উদ্দেশ্য

<div> ট্যাগ একটি ব্লক-লেভেল উপাদান (block-level element) যা পেজের বড় অংশ বা সেকশনের বিভাজন করতে ব্যবহৃত হয়। এটি সাধারণত ওয়েব পেজের বিভিন্ন সেকশন বা গ্রুপিংয়ের জন্য ব্যবহৃত হয়, যেমন হেডার, ফুটার, সাইডবার ইত্যাদি।

১.2 <div> ট্যাগের গঠন

<div>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph inside a div element.</p>
</div>

এখানে <div> ট্যাগটি একটি সেকশন বা গ্রুপ তৈরি করেছে এবং তার মধ্যে একটি <h1> হেডিং এবং একটি <p> প্যারাগ্রাফ রয়েছে।

১.3 <div> ট্যাগের ব্যবহার কেস

• কন্টেন্ট গ্রুপিং: একাধিক উপাদানকে একত্রিত করতে এবং সেগুলোর জন্য একসাথে CSS প্রযোজ্য করতে <div> ট্যাগ ব্যবহার করা হয়।

<div class="header">
    <h1>My Website</h1>
    <p>Welcome to my site!</p>
</div>

• লেআউট কন্ট্রোল: ওয়েব পেজের লেআউটের জন্য div ট্যাগের ব্যবহার প্রচলিত। সিএসএস দিয়ে লেআউট কাস্টমাইজ করা যায়।

<div class="content">
    <p>This is the main content of the webpage.</p>
</div>

১.4 <div> এবং CSS

<div> ট্যাগের মধ্যে থাকা উপাদানগুলোর ডিজাইন বা স্টাইল কাস্টমাইজ করতে সিএসএস ব্যবহার করা হয়।

<head>
    <style>
        .content {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="content">
        <p>This section has a light blue background.</p>
    </div>
</body>

২. <span> ট্যাগের ব্যবহার

২.1 <span> ট্যাগের উদ্দেশ্য

<span> ট্যাগ একটি ইনলাইন উপাদান (inline element) যা সাধারণত একটি নির্দিষ্ট অংশের স্টাইল বা কার্যকারিতা পরিবর্তন করতে ব্যবহৃত হয়। এটি ব্লক লেভেল উপাদানের তুলনায় ছোট এবং প্রাথমিকভাবে টেক্সট বা একক উপাদানগুলোর মধ্যে প্রয়োগ করা হয়।

২.2 <span> ট্যাগের গঠন

<p>Welcome to <span style="color: red;">my website</span>!</p>

এখানে <span> ট্যাগটি শুধুমাত্র "my website" টেক্সটটির রঙ পরিবর্তন করেছে। এটি পুরো প্যারাগ্রাফকে প্রভাবিত না করে শুধুমাত্র টেক্সটের একটি অংশকে প্রভাবিত করেছে।

২.3 <span> ট্যাগের ব্যবহার কেস

• টেক্সট অংশের স্টাইল পরিবর্তন: একক টেক্সটের একটি অংশে স্টাইল প্রয়োগ করতে <span> ট্যাগ ব্যবহার করা হয়। যেমন:

<p>My favorite color is <span style="color: blue;">blue</span>.</p>

• আইকন বা ছোট উপাদান যোগ করা: <span> ট্যাগ ব্যবহার করে ছোট আইকন বা চিত্রও যোগ করা যেতে পারে।

<p>Click <span class="icon">😀</span> to smile!</p>

২.4 <span> এবং CSS

<span> ট্যাগে স্টাইল প্রয়োগ করতে সিএসএস ব্যবহার করা যেতে পারে, যেমন:

<head>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>We are learning about <span class="highlight">XHTML</span> and <span class="highlight">CSS</span>.</p>
</body>

এখানে span ট্যাগের মধ্যে থাকা টেক্সটের ব্যাকগ্রাউন্ড রঙ হল হলুদ এবং এটি বোল্ড ফন্টে প্রদর্শিত হবে।

৩. <div> এবং <span> এর মধ্যে পার্থক্য

৩.1 ব্লক-লেভেল বনাম ইনলাইন

• <div> একটি ব্লক-লেভেল ট্যাগ। এটি নতুন লাইন থেকে শুরু হয় এবং পূর্ণ প্রস্থে জায়গা নেয়।
• <span> একটি ইনলাইন ট্যাগ। এটি টেক্সটের মধ্যে অংশ হিসাবে ব্যবহৃত হয় এবং টেক্সটের পরবর্তী উপাদানের পাশে অবস্থান নেয়।

৩.2 কন্টেন্টের আকার এবং স্টাইল

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

৩.3 প্রধান ব্যবহারের ক্ষেত্র

• <div> সাধারণত বড় স্কেল লেআউট বা সেকশনের জন্য ব্যবহৃত হয়, যেমন কন্টেন্ট, নেভিগেশন, হেডার বা ফুটার সেকশন।
• <span> সাধারণত ছোট টেক্সট অংশ বা উপাদানগুলি স্টাইল করার জন্য ব্যবহৃত হয়।

<div> এবং <span> ট্যাগ এক্সএইচটিএমএল (XHTML) ডকুমেন্টে সাধারণত কাঠামোগত এবং ভিজ্যুয়াল স্টাইলিংয়ের জন্য ব্যবহৃত হয়। <div> ট্যাগ বড় সেকশনের জন্য ব্যবহৃত হয়, যেখানে একাধিক উপাদান থাকতে পারে, এবং <span> ট্যাগ ছোট উপাদান বা টেক্সট অংশের জন্য ব্যবহৃত হয়। সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে এগুলোর মাধ্যমে ডিজাইন ও কার্যকারিতা কাস্টমাইজ করা যায়।

XHTML ডকুমেন্টে লেআউট ডিজাইন এবং কন্টেইনার তৈরি করা ওয়েব পেজের কাঠামো এবং উপস্থাপনাকে নির্ধারণ করে। এক্সএইচটিএমএল, যা XML-এর সাথে সম্পূর্ণরূপে সামঞ্জস্যপূর্ণ, তা ব্যবহার করে আপনি সঠিকভাবে কন্টেইনার এবং কন্টেন্ট এলিমেন্ট তৈরি করতে পারেন যা একটি ওয়েব পেজের লেআউট ডিজাইন তৈরি করবে।

এখানে আমরা এক্সএইচটিএমএল ব্যবহার করে কিভাবে লেআউট ডিজাইন এবং কন্টেইনার তৈরি করা যায়, সেই সম্পর্কে আলোচনা করব।

১. কন্টেইনার এলিমেন্টের ভূমিকা

এক্সএইচটিএমএল-এ কন্টেইনার এলিমেন্টগুলি এমন ট্যাগ যা অন্যান্য উপাদানকে ধারণ করে। এগুলি সাধারণত এমনভাবে ব্যবহৃত হয় যাতে পেজের বিভিন্ন অংশগুলোকে গ্রুপ করা যায় এবং সেগুলোর মধ্যে সঠিক স্টাইল এবং অ্যালাইনমেন্ট দেওয়া যায়।

১.1 <div> কন্টেইনার

<div> ট্যাগ হল সবচেয়ে সাধারণ কন্টেইনার ট্যাগ যা সাধারণত ওয়েব পেজের বিভিন্ন সেকশন বা ব্লক এলিমেন্টের জন্য ব্যবহৃত হয়। এটি অন্য সব HTML উপাদানকে ধরে রাখার জন্য একটি ব্লক-লেভেল কন্টেইনার হিসেবে কাজ করে।

<div>
    <h1>My Website</h1>
    <p>Welcome to my website. This is a sample layout.</p>
</div>

১.2 <section> কন্টেইনার

<section> ট্যাগটি HTML5 থেকে এসেছে এবং এটি পেজের বিশেষ কিছু সেকশন বা উপ-বিভাগ তৈরি করতে ব্যবহৃত হয়। এটি পেজের বিভিন্ন বিষয়বস্তু বা কনটেন্টকে সেমান্টিকভাবে ভাগ করতে সাহায্য করে।

<section>
    <h2>About Us</h2>
    <p>We are a team of web developers.</p>
</section>

১.3 <article> কন্টেইনার

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

<article>
    <h2>Latest News</h2>
    <p>This is the latest update on our website.</p>
</article>

১.4 <aside> কন্টেইনার

<aside> ট্যাগটি সাধারণত পেজের মূল কনটেন্টের বাইরে থাকা সহায়ক তথ্য বা সাইডবার তৈরি করতে ব্যবহৃত হয়।

<aside>
    <h2>Related Links</h2>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
</aside>

২. লেআউট ডিজাইন কৌশল

এক্সএইচটিএমএল ডকুমেন্টে লেআউট ডিজাইন করার জন্য CSS (Cascading Style Sheets) ব্যবহার করা হয়, তবে এক্সএইচটিএমএল-এ কন্টেইনার ব্যবহার করে লেআউটের কাঠামো তৈরি করতে হয়। এখানে কিছু জনপ্রিয় লেআউট কৌশল তুলে ধরা হলো।

২.1 বক্স মডেল

এক্সএইচটিএমএল ডকুমেন্টে যেকোনো কন্টেইনারের আকার, মার্জিন, প্যাডিং, এবং বর্ডার নিয়ন্ত্রণ করতে CSS বক্স মডেল ব্যবহার করা হয়। এই মডেলটি কন্টেইনারের ভিতরের এবং বাইরের স্থান কিভাবে ম্যানেজ করা যায় তা নির্ধারণ করে।

<div style="width: 300px; margin: 10px; padding: 20px; border: 1px solid black;">
    <h2>Box Model Example</h2>
    <p>This is a box model example with margin, padding, and border.</p>
</div>

২.2 ফ্লোট লেআউট

CSS-এ float প্রোপার্টি ব্যবহারের মাধ্যমে আপনি কন্টেইনারকে বাম বা ডান দিকে ফ্লোট করাতে পারেন, যাতে অন্যান্য উপাদান তাদের চারপাশে ঘোরে। এটি বিশেষ করে একাধিক কলাম লেআউট তৈরি করার জন্য ব্যবহৃত হয়।

<div style="width: 50%; float: left; margin-right: 10px;">
    <h2>Left Column</h2>
    <p>This is the left column.</p>
</div>

<div style="width: 50%; float: left;">
    <h2>Right Column</h2>
    <p>This is the right column.</p>
</div>

২.3 ফ্লেক্সবক্স (Flexbox)

ফ্লেক্সবক্স একটি শক্তিশালী লেআউট মডেল যা কন্টেইনারের মধ্যে এলিমেন্টগুলোকে সমানভাবে বা সঠিকভাবে সাজাতে সাহায্য করে। এটি কন্টেইনারের ভিতর উপাদানগুলির আকার, অ্যালাইনমেন্ট, এবং ডিসট্রিবিউশন নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

<div style="display: flex; justify-content: space-between;">
    <div style="width: 30%;">Item 1</div>
    <div style="width: 30%;">Item 2</div>
    <div style="width: 30%;">Item 3</div>
</div>

২.4 গ্রিড লেআউট

CSS গ্রিড সিস্টেম ব্যবহার করে আপনি একাধিক কলাম এবং সারি তৈরি করতে পারেন, যা জটিল লেআউট ডিজাইন করার জন্য খুবই উপকারী। CSS গ্রিড কন্টেইনারের মধ্যে এলিমেন্টগুলোকে নির্দিষ্ট কলাম এবং সারিতে সাজাতে সাহায্য করে।

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

৩. এক্সএইচটিএমএল কন্টেইনারের ব্যবহার

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

এক্সএইচটিএমএল ডকুমেন্টে কন্টেইনার এবং লেআউট ডিজাইন তৈরি করা ওয়েব পেজের কাঠামো এবং ভিজ্যুয়াল আঙ্গিককে শক্তিশালী করে। <div>, <section>, <article>, এবং <aside> ট্যাগগুলো কন্টেইনার হিসেবে ব্যবহৃত হয়, যা পেজের কনটেন্ট সেগমেন্টগুলোকে আলাদা ও সংগঠিত করে। CSS এর মাধ্যমে আপনি এই কন্টেইনারগুলোর মধ্যে বিভিন্ন লেআউট কৌশল যেমন বক্স মডেল, ফ্লোট, ফ্লেক্সবক্স, এবং গ্রিড লেআউট ব্যবহার করতে পারেন।

XHTML-এ, HTML-এর মতোই দুটি প্রধান ধরনের এলিমেন্ট থাকে: ব্লক এলিমেন্ট (Block Elements) এবং ইনলাইন এলিমেন্ট (Inline Elements)। প্রতিটি এলিমেন্টের ভূমিকা এবং প্রদর্শন প্রক্রিয়া আলাদা, যা ওয়েব পেজের গঠন এবং ডিজাইনে প্রভাব ফেলে। ব্লক এবং ইনলাইন এলিমেন্ট সম্পর্কে ভালোভাবে বুঝলে, আপনি XHTML ডকুমেন্টের গঠনকে আরও কার্যকরীভাবে সাজাতে পারবেন।

১. ব্লক এলিমেন্ট (Block Elements)

ব্লক এলিমেন্টস হলো সেই এলিমেন্টস, যেগুলো সাধারণত নতুন লাইনে শুরু হয় এবং পুরো প্রস্থে (full width) প্রসারিত হয়ে থাকে। এগুলোর মধ্যে অনেকগুলি উপাদান থাকে, যেমন টেক্সট, ছবি, তালিকা ইত্যাদি। ব্লক এলিমেন্টগুলো সাধারণত একে অপরের উপরে উপরে রাখা হয়।

১.1 ব্লক এলিমেন্টের বৈশিষ্ট্য

• ব্লক এলিমেন্ট একটি নতুন লাইন থেকে শুরু হয় এবং সম্পূর্ণ প্রস্থ দখল করে।
• এটি পরবর্তী উপাদানগুলির উপরে বা নিচে থাকে, অর্থাৎ, এটি "ব্লক" আকারে থাকে।
• সাধারণত ব্লক এলিমেন্টগুলোর মধ্যে অন্যান্য ব্লক বা ইনলাইন এলিমেন্ট থাকতে পারে।

১.2 ব্লক এলিমেন্টের উদাহরণ

• <div>: সাধারণ ব্লক কনটেইনার।
• <p>: প্যারাগ্রাফ, টেক্সটের জন্য ব্যবহৃত।
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: হেডিং ট্যাগগুলো।
• <ul>, <ol>: অর্ডারড এবং আনঅর্ডারড লিস্ট।
• <table>: টেবিল।

১.3 ব্লক এলিমেন্টের উদাহরণ কোড

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Block Elements Example</title>
</head>
<body>
    <h1>Welcome to XHTML</h1>
    <p>This is a paragraph. It is a block element and takes up the full width of the page.</p>
    <div>
        <h2>Subheading Inside a div</h2>
        <p>This paragraph is inside a block-level div element.</p>
    </div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

২. ইনলাইন এলিমেন্ট (Inline Elements)

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

২.1 ইনলাইন এলিমেন্টের বৈশিষ্ট্য

• ইনলাইন এলিমেন্টগুলি একটি লাইনের মধ্যে অবস্থান করে, তাই তারা ব্লক এলিমেন্টের তুলনায় কম জায়গা দখল করে।
• এটি পরবর্তী এলিমেন্টগুলির সাথে একই লাইনে থাকে, যেমন টেক্সটের মধ্যে লিঙ্ক বা বোল্ড টেক্সট।
• ইনলাইন এলিমেন্ট সাধারণত ব্লক এলিমেন্টের মধ্যে ব্যবহৃত হয়, কিন্তু একটি ইনলাইন এলিমেন্ট অন্য ইনলাইন এলিমেন্টের মধ্যে থাকতে পারে।

২.2 ইনলাইন এলিমেন্টের উদাহরণ

• <a>: লিঙ্ক (Anchor Tag)
• <span>: ছোট অংশে স্টাইল প্রয়োগ করার জন্য ব্যবহৃত।
• <strong>, <em>: বোল্ড এবং ইটালিক টেক্সট।
• <img>: ছবি (Image)।
• <br>: লাইনের ব্রেক (Line Break)।

২.3 ইনলাইন এলিমেন্টের উদাহরণ কোড

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Inline Elements Example</title>
</head>
<body>
    <p>This is a <strong>strong</strong> word in a sentence.</p>
    <p>Visit <a href="https://www.example.com">this link</a> for more information.</p>
    <p>Inline images can be inserted like this: <img src="image.jpg" alt="Image" /> in the text.</p>
</body>
</html>

৩. ব্লক এবং ইনলাইন এলিমেন্টের পার্থক্য

৪. ব্লক এবং ইনলাইন এলিমেন্টের সংমিশ্রণ

ব্লক এবং ইনলাইন এলিমেন্ট একসাথে ব্যবহৃত হতে পারে, এবং একে অপরের মধ্যে সন্নিবেশিত থাকতে পারে। যেমন, আপনি একটি ব্লক এলিমেন্টে ইনলাইন এলিমেন্টগুলি ব্যবহার করতে পারেন, কিন্তু ইনলাইন এলিমেন্টগুলো ব্লক এলিমেন্টের বাইরে ব্যবহার করা যাবে না।

উদাহরণ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Block and Inline Elements Together</title>
</head>
<body>
    <div>
        <h2>Welcome to Our Site</h2>
        <p>This is a <strong>paragraph</strong> that contains <em>inline</em> elements like <span>span</span> and <a href="#">links</a>.</p>
    </div>
</body>
</html>

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

XHTML ডকুমেন্টে CSS (Cascading Style Sheets) ব্যবহার করে ডিভ (div) এবং স্প্যান (span) ট্যাগগুলোকে স্টাইল করা হয়। CSS ব্যবহার করলে আপনি HTML বা XHTML ট্যাগের চেহারা এবং উপস্থাপনাকে নিয়ন্ত্রণ করতে পারেন। ডিভ এবং স্প্যান দুটি গুরুত্বপূর্ণ ব্লক-লেভেল এবং ইনলাইন এলিমেন্ট হিসেবে ব্যবহৃত হয়।

১. ডিভ (div) এবং স্প্যান (span) ট্যাগের ভূমিকা

১.1 ডিভ (div)

<div> ট্যাগটি একটি ব্লক-লেভেল এলিমেন্ট, যা পেজের একটি বৃহত্তর বিভাগ বা কনটেন্টের গ্রুপিং করতে ব্যবহৃত হয়। এটি মূলত একাধিক এলিমেন্টকে একটি নির্দিষ্ট অঞ্চলে সজ্জিত করার জন্য ব্যবহার হয়।

উদাহরণ:

<div>
    <h1>Header of Section</h1>
    <p>This is a paragraph inside a div.</p>
</div>

১.2 স্প্যান (span)

<span> ট্যাগটি একটি ইনলাইন এলিমেন্ট, যা সাধারণত একটি ছোট অংশ বা টেক্সটের মধ্যে সজ্জা প্রয়োগ করার জন্য ব্যবহৃত হয়। এটি কোন ব্লক তৈরি করে না, বরং টেক্সটের নির্দিষ্ট অংশে স্টাইল প্রয়োগের জন্য ব্যবহার করা হয়।

উদাহরণ:

<p>This is a <span style="color: red;">highlighted</span> word.</p>

২. CSS দিয়ে ডিভ এবং স্প্যান স্টাইলিং

CSS ব্যবহারের মাধ্যমে আপনি ডিভ এবং স্প্যান ট্যাগের বিভিন্ন দিক নিয়ন্ত্রণ করতে পারেন, যেমন ব্যাকগ্রাউন্ড, মার্জিন, প্যাডিং, রঙ, ফন্ট, সীমা ইত্যাদি।

২.1 ডিভ স্টাইলিং

ডিভ ট্যাগের মাধ্যমে আপনি ব্লক এলিমেন্টের পুরো কাঠামো নিয়ন্ত্রণ করতে পারেন। CSS দিয়ে এর প্রস্থ, উচ্চতা, ব্যাকগ্রাউন্ড, বর্ডার ইত্যাদি পরিবর্তন করা যায়।

উদাহরণ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Div Styling Example</title>
    <style type="text/css">
        .myDiv {
            width: 80%;
            margin: 20px auto;
            padding: 20px;
            background-color: lightblue;
            border: 2px solid #000;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        <h2>Welcome to Our Website</h2>
        <p>This section is styled using CSS within XHTML document.</p>
    </div>
</body>
</html>

এখানে:

• .myDiv ক্লাসের মাধ্যমে CSS এর স্টাইলিং করা হয়েছে।
• width, margin, padding, background-color, border ইত্যাদি প্রপার্টি দিয়ে ডিভ ট্যাগের চেহারা নিয়ন্ত্রণ করা হয়েছে।

২.2 স্প্যান স্টাইলিং

স্প্যান ট্যাগটি ইনলাইন উপাদান হিসেবে ব্যবহৃত হয়, তবে CSS দিয়ে এটি দিয়ে টেক্সটের আকার, রঙ, ফন্ট, ব্যাকগ্রাউন্ড ইত্যাদি পরিবর্তন করা সম্ভব।

উদাহরণ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Span Styling Example</title>
    <style type="text/css">
        .highlight {
            color: red;
            font-weight: bold;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>This is a <span class="highlight">highlighted</span> text inside a paragraph.</p>
</body>
</html>

এখানে:

• .highlight ক্লাসের মাধ্যমে স্প্যান ট্যাগের টেক্সট রঙ, ফন্টের স্টাইল এবং ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা হয়েছে।

৩. CSS দিয়ে ডিভ এবং স্প্যান একসাথে স্টাইলিং

অনেক সময় ডিভ এবং স্প্যান একসাথে ব্যবহার করে একটি পেজের ভিজ্যুয়াল কাঠামো তৈরি করা হয়। CSS দিয়ে একে অন্যের মধ্যে সম্পর্ক স্থাপন করা যায়।

উদাহরণ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Div and Span Styling</title>
    <style type="text/css">
        .container {
            width: 100%;
            padding: 20px;
            background-color: lightgrey;
        }

        .section {
            width: 80%;
            margin: 10px auto;
            padding: 10px;
            background-color: #f9f9f9;
        }

        .highlight {
            color: green;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="section">
            <h2>Section 1</h2>
            <p>This is a <span class="highlight">highlighted</span> text inside section 1.</p>
        </div>
        <div class="section">
            <h2>Section 2</h2>
            <p>This is a <span class="highlight">highlighted</span> text inside section 2.</p>
        </div>
    </div>
</body>
</html>

এখানে:

• .container ক্লাসে পুরো পেজের কাঠামো তৈরি করা হয়েছে।
• .section ক্লাস দিয়ে প্রতিটি সেকশন স্টাইল করা হয়েছে।
• .highlight ক্লাস দিয়ে স্প্যান ট্যাগের মধ্যে টেক্সটকে বিশেষভাবে হাইলাইট করা হয়েছে।

৪. ডিভ এবং স্প্যান স্টাইলিংয়ের জন্য কিছু গুরুত্বপূর্ণ নির্দেশনা

৪.1 CSS ক্লাস এবং আইডি ব্যবহারের সুবিধা

• ক্লাস (Class): একই ধরনের একাধিক উপাদানকে একসাথে স্টাইল করতে class ব্যবহার করা হয়। একাধিক ট্যাগে একই ক্লাস প্রয়োগ করা যেতে পারে।
• আইডি (ID): id শুধুমাত্র একক উপাদানের জন্য ব্যবহৃত হয় এবং এটি পেজের একটি নির্দিষ্ট ট্যাগের জন্য স্টাইল প্রয়োগের উপযুক্ত।

৪.2 ইনলাইন CSS ব্যবহার না করা

XHTML ডকুমেন্টে style অ্যাট্রিবিউট দিয়ে ইনলাইন CSS ব্যবহার এড়িয়ে চলা উচিত। এর পরিবর্তে একটি পৃথক <style> ব্লক বা এক্সটার্নাল CSS ফাইল ব্যবহার করা উচিত।

৪.3 CSS এবং XHTML সামঞ্জস্য

CSS-এর প্রপার্টি এবং কৌশলগুলি XHTML ডকুমেন্টের স্ট্রিক্ট সঠিকতা বজায় রেখে প্রয়োগ করতে হবে, যেমন কেস-সেন্সিটিভ ট্যাগ, বন্ধন সহ ট্যাগ ব্যবহার ইত্যাদি।

XHTML ডকুমেন্টে CSS দিয়ে ডিভ এবং স্প্যান ট্যাগ স্টাইলিং করার মাধ্যমে আপনি ওয়েব পেজের ভিজ্যুয়াল ডিজাইনকে কাস্টমাইজ এবং নিয়ন্ত্রণ করতে পারেন। ডিভ ট্যাগে ব্লক-লেভেল স্টাইলিং করা হয়, যেখানে স্প্যান ট্যাগে ইনলাইন স্টাইলিং প্রয়োগ করা হয়। CSS-এর মাধ্যমে আপনি পেজের উপস্থাপনাকে আরও আকর্ষণীয় এবং ব্যবহারকারীদের জন্য সুবিধাজনক করতে পারবেন।