XHTML ডকুমেন্টে টেক্সট ফরম্যাটিং এবং স্টাইলিং করার জন্য HTML-এর মতো বেশ কিছু ট্যাগ এবং স্টাইলিং প্রযুক্তি ব্যবহার করা হয়। তবে, XHTML-এ কিছু অতিরিক্ত নিয়ম মেনে চলতে হয় যেহেতু এটি XML-এর উপর ভিত্তি করে। এই বিভাগে, XHTML ডকুমেন্টে টেক্সট ফরম্যাটিং এবং স্টাইলিং করার বিভিন্ন পদ্ধতি আলোচনা করা হবে।
১. টেক্সট ফরম্যাটিং ট্যাগ
XHTML-এ টেক্সট ফরম্যাটিং করার জন্য বিভিন্ন HTML ট্যাগ ব্যবহৃত হয়। নিচে কিছু সাধারণ ট্যাগের বর্ণনা দেওয়া হলো:
১.1 হেডিং ট্যাগ
XHTML-এ হেডিং ট্যাগগুলি <h1> থেকে <h6> পর্যন্ত থাকে। এগুলো শিরোনাম বা টাইটেল হিসেবে ব্যবহৃত হয়।
<h1>এটি একটি H1 শিরোনাম</h1>
<h2>এটি একটি H2 শিরোনাম</h2>
<h3>এটি একটি H3 শিরোনাম</h3>
<h1>ট্যাগটি সবচেয়ে বড় হেডিং এবং<h6>সবচেয়ে ছোট হেডিং।
১.2 প্যারাগ্রাফ (Paragraph)
টেক্সট প্যারাগ্রাফ আকারে প্রদর্শন করতে <p> ট্যাগ ব্যবহার করা হয়।
<p>এটি একটি সাধারণ প্যারাগ্রাফ।</p>
১.3 বোল্ড (Bold) এবং ইটালিক (Italic)
টেক্সটকে বোল্ড বা ইটালিক করতে <strong> (বোল্ড) এবং <em> (ইটালিক) ট্যাগ ব্যবহার করা হয়।
<p>এটি একটি <strong>বোল্ড</strong> টেক্সট।</p>
<p>এটি একটি <em>ইটালিক</em> টেক্সট।</p>
১.4 আন্ডারলাইন (Underline)
টেক্সটের নিচে আন্ডারলাইন দেওয়ার জন্য <u> ট্যাগ ব্যবহার করা হয়, তবে XHTML-এ এটি একটু ভিন্নভাবে ব্যবহৃত হয়, এবং কিছু ডিজাইনার এটিকে পরিহার করতে পছন্দ করেন। সাধারণত CSS দিয়ে আন্ডারলাইন করা হয়।
<p><u>এটি আন্ডারলাইন করা টেক্সট।</u></p>
২. লিস্ট (List) তৈরি করা
XHTML-এ লিস্ট তৈরি করার জন্য দুটি প্রধান ধরনের লিস্ট ব্যবহৃত হয়: অর্ডারড (Ordered) এবং আনঅর্ডারড (Unordered) লিস্ট।
২.1 অর্ডারড লিস্ট (Ordered List)
অর্ডারড লিস্টে আইটেমগুলো সংখ্যা বা অক্ষরের দ্বারা সাজানো থাকে। এটি <ol> ট্যাগ দ্বারা তৈরি হয় এবং প্রতিটি আইটেম <li> ট্যাগের মধ্যে রাখা হয়।
<ol>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
<li>তৃতীয় আইটেম</li>
</ol>
২.2 আনঅর্ডারড লিস্ট (Unordered List)
আনঅর্ডারড লিস্টে আইটেমগুলো বুলেট পয়েন্ট দিয়ে সাজানো থাকে।
<ul>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
<li>তৃতীয় আইটেম</li>
</ul>
৩. টেক্সট স্টাইলিং এবং লেআউট কন্ট্রোল
XHTML-এ স্টাইলিং এবং লেআউট কন্ট্রোলের জন্য সাধারণত CSS (Cascading Style Sheets) ব্যবহার করা হয়। CSS দ্বারা আপনি আপনার পেজের ডিজাইন, রঙ, ফন্ট, মার্জিন, প্যাডিং ইত্যাদি কন্ট্রোল করতে পারবেন। CSS কে তিনভাবে ব্যবহার করা যায়:
৩.1 ইনলাইন CSS
ইনলাইন CSS দ্বারা একটি ট্যাগের মধ্যে স্টাইল যোগ করা হয়।
<p style="color: blue; font-size: 16px;">এটি একটি স্টাইল করা প্যারাগ্রাফ।</p>
৩.2 অভ্যন্তরীণ CSS (Internal CSS)
অভ্যন্তরীণ CSS <style> ট্যাগের মধ্যে লেখা হয়, যা <head> ট্যাগের মধ্যে স্থাপন করা হয়।
<head>
<style type="text/css">
p {
color: red;
font-size: 18px;
}
</style>
</head>
৩.3 বহিরাগত CSS (External CSS)
বহিরাগত CSS এক বা একাধিক CSS ফাইল থেকে লিংক করা হয়। এটি সবচেয়ে জনপ্রিয় পদ্ধতি, কারণ এতে কোডের পুনঃব্যবহারযোগ্যতা এবং সংগঠিতকরণ সহজ হয়।
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
৪. ফন্ট এবং রঙ পরিবর্তন করা
XHTML ডকুমেন্টে ফন্ট এবং রঙ পরিবর্তন করতে CSS ব্যবহার করা হয়।
৪.1 ফন্ট পরিবর্তন
<p style="font-family: Arial, sans-serif;">এটি একটি Arial ফন্টে লেখা প্যারাগ্রাফ।</p>
৪.2 টেক্সট রঙ পরিবর্তন
<p style="color: #FF5733;">এটি একটি রঙিন টেক্সট।</p>
৫. লিংক (Links) তৈরি করা
টেক্সটের মধ্যে লিংক তৈরি করতে XHTML-এ <a> ট্যাগ ব্যবহার করা হয়।
<p>এটি একটি <a href="https://www.example.com" target="_blank">লিংক</a>।</p>
href: লিংকটি কোথায় যাবে তা নির্দেশ করে।target="_blank": লিংকটি নতুন ট্যাবে খোলার জন্য ব্যবহৃত হয়।
৬. ইমেজ (Images) যোগ করা
XHTML-এ ইমেজ যোগ করার জন্য <img /> ট্যাগ ব্যবহার করা হয়। এখানে src অ্যাট্রিবিউটের মাধ্যমে ছবির সোর্স এবং alt অ্যাট্রিবিউটের মাধ্যমে ছবির বর্ণনা দেওয়া হয়।
<img src="image.jpg" alt="একটি উদাহরণ ছবি" />
৭. টেবিল (Tables) তৈরি করা
XHTML-এ টেবিল তৈরি করতে <table>, <tr>, <td>, এবং <th> ট্যাগ ব্যবহার করা হয়। নিচে একটি উদাহরণ দেওয়া হলো:
<table border="1">
<tr>
<th>নাম</th>
<th>বয়স</th>
</tr>
<tr>
<td>জন</td>
<td>২৫</td>
</tr>
<tr>
<td>মিতা</td>
<td>৩০</td>
</tr>
</table>
<th>ট্যাগে টেবিলের শিরোনাম থাকে।<td>ট্যাগে টেবিলের ডেটা থাকে।
XHTML ডকুমেন্টে টেক্সট ফরম্যাটিং এবং স্টাইলিং করার জন্য HTML-এর মতো অনেক ফিচার ব্যবহার করা যায়, তবে XHTML-এ কিছু অতিরিক্ত নিয়ম মেনে চলা প্রয়োজন। আপনি যদি XHTML ব্যবহার করেন, তবে নিশ্চিত করুন যে আপনার ট্যাগগুলো সঠিকভাবে বন্ধ করা হচ্ছে, এবং সমস্ত স্টাইলিং এবং ফরম্যাটিংয়ের জন্য CSS ব্যবহার করা হচ্ছে। এর মাধ্যমে আপনি একটি স্ট্যান্ডার্ড এবং ভালোভাবে গঠিত ওয়েব পেজ তৈরি করতে পারবেন।
XHTML-এ বেসিক টেক্সট ট্যাগগুলো ওয়েব পেজের কনটেন্ট স্ট্রাকচার এবং উপস্থাপনা নির্ধারণ করতে ব্যবহৃত হয়। এই ট্যাগগুলো HTML-এর মতোই কাজ করে, তবে XHTML-এ আরো কড়া নিয়ম এবং স্ট্রিক্ট গঠন মেনে চলতে হয়। নিচে কিছু গুরুত্বপূর্ণ বেসিক টেক্সট ট্যাগের ব্যাখ্যা দেওয়া হলো।
১. হেডিং ট্যাগস ( থেকে )
হেডিং ট্যাগস (Heading Tags) HTML এবং XHTML-এ গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ এগুলো পেজের শিরোনাম এবং সাব-শিরোনাম তৈরি করতে ব্যবহৃত হয়। XHTML-এ <h1> থেকে <h6> পর্যন্ত ট্যাগগুলো ব্যবহৃত হয়, যেখানে <h1> হলো সবচেয়ে বড় হেডিং এবং <h6> হলো সবচেয়ে ছোট হেডিং।
১.1 থেকে ব্যবহারের উদাহরণ
<h1>This is a main heading (Largest)</h1>
<h2>This is a subheading (Second largest)</h2>
<h3>This is a subheading (Third largest)</h3>
<h4>This is a subheading (Medium size)</h4>
<h5>This is a subheading (Smaller)</h5>
<h6>This is a subheading (Smallest)</h6>
ব্যাখ্যা:
<h1>: পেজের প্রধান শিরোনাম, সাধারণত সবচেয়ে গুরুত্বপূর্ণ।<h2>থেকে<h6>: ক্রমান্বয়ে ছোট এবং কম গুরুত্বপূর্ণ শিরোনাম।
XHTML-এ, আপনি যেকোনো হেডিং ট্যাগ ব্যবহারের সময় অবশ্যই সঠিকভাবে ট্যাগটি বন্ধ করবেন, যেমন: <h1>Content</h1>।
২. প্যারাগ্রাফ ট্যাগ ()
<p> ট্যাগ প্যারাগ্রাফ তৈরি করতে ব্যবহৃত হয়। এটি সাধারণত টেক্সটের ব্লক বা প্যারাগ্রাফের জন্য ব্যবহৃত হয় এবং HTML ও XHTML উভয়েই একইভাবে কাজ করে।
২.1 ট্যাগের উদাহরণ
<p>This is a paragraph of text in XHTML. It is displayed as a block of text with spaces between paragraphs.</p>
<p>Each paragraph in XHTML must be enclosed within <p> and </p> tags.</p>
ব্যাখ্যা:
<p>: প্যারাগ্রাফের শুরু।</p>: প্যারাগ্রাফের শেষ।- XHTML-এ এই ট্যাগের মধ্যে থাকা টেক্সট ব্লকের মধ্যে ফাঁকা জায়গা থাকবে।
৩. লাইনের ব্রেক ট্যাগ ()
<br> ট্যাগটি লাইনের ব্রেক বা নতুন লাইন তৈরি করার জন্য ব্যবহৃত হয়। এটি সাধারণত প্যারাগ্রাফের মধ্যে বা কোন নির্দিষ্ট স্থানে নতুন লাইন দিতে ব্যবহৃত হয়।
৩.1 ট্যাগের উদাহরণ
<p>This is the first line.<br />
This is the second line.</p>
ব্যাখ্যা:
<br />: এটি একটি একক ট্যাগ এবং একটি লাইনের ব্রেক তৈরি করে, যেখানে কোডের পরবর্তী অংশ নতুন লাইনে শুরু হয়।- XHTML-এ
<br>ট্যাগের জন্য বন্ধন চিহ্ন (/) ব্যবহার করতে হয়, যেমন:<br />।
৪. XHTML-এ টেক্সট ট্যাগের নিয়ম
XHTML-এর ক্ষেত্রে কিছু বিশেষ নিয়ম রয়েছে, যেগুলো HTML-এ সাধারণত পালন করার প্রয়োজন নেই। এই নিয়মগুলো মূলত XML-এর কঠোর গঠন অনুসরণ করে। নিচে কিছু গুরুত্বপূর্ণ নিয়ম তুলে ধরা হলো:
৪.1 কেস সেনসিটিভিটি
XHTML-এ ট্যাগের নামগুলো কেস সেনসিটিভ, অর্থাৎ <h1>, <H1> এবং <H1> আলাদা। তাই, সব ট্যাগ এবং অ্যাট্রিবিউট ছোট হাতের অক্ষরে লেখা উচিত।
৪.2 ট্যাগ বন্ধন
XHTML-এ সব ট্যাগকে সঠিকভাবে বন্ধ করতে হয়, এমনকি একক ট্যাগগুলো যেমন <br />, <img /> এগুলোও বন্ধন সহ ব্যবহার করতে হয়।
৪.3 অ্যাট্রিবিউট কোটেশন
XHTML-এ সব অ্যাট্রিবিউটের মান কোটেশনে থাকতে হবে। উদাহরণস্বরূপ, <img src="image.jpg" alt="Sample Image" />।
XHTML-এ টেক্সটের জন্য বেসিক ট্যাগগুলো অত্যন্ত গুরুত্বপূর্ণ। <h1> থেকে <h6> ট্যাগ ব্যবহার করে শিরোনাম তৈরি করা হয়, <p> ট্যাগ দিয়ে প্যারাগ্রাফ তৈরি করা হয় এবং <br /> ট্যাগ দিয়ে লাইনের ব্রেক তৈরি করা হয়। XHTML-এ কিছু কঠোর নিয়ম অনুসরণ করতে হয়, যেমন কেস সেনসিটিভিটি, সঠিকভাবে ট্যাগ বন্ধ করা এবং অ্যাট্রিবিউটের মান কোটেশনে রাখা। এসব নিয়ম মেনে চললে, আপনি সঠিক XHTML ডকুমেন্ট তৈরি করতে পারবেন।
XHTML ডকুমেন্টে স্টাইলিং প্রয়োগ করার জন্য সাধারণত দুটি পদ্ধতি ব্যবহৃত হয়: স্টাইল ট্যাগ (style tag) এবং ইনলাইন স্টাইলিং (inline styling)। এই পদ্ধতিগুলোর মাধ্যমে ওয়েব পেজের ডিজাইন এবং লেআউট পরিবর্তন করা যায়। নিচে উভয় পদ্ধতির বিস্তারিত ব্যাখ্যা করা হলো।
১. স্টাইল ট্যাগ ব্যবহার (Style Tag)
স্টাইল ট্যাগটি HTML বা XHTML ডকুমেন্টের <head> সেকশনে সংযুক্ত করা হয় এবং CSS (Cascading Style Sheets) কোডগুলো সেখানে লেখা হয়। এই পদ্ধতিতে, একটি স্টাইল সীট একাধিক HTML বা XHTML উপাদানে প্রয়োগ করা যেতে পারে।
১.১ স্টাইল ট্যাগের গঠন
<head>
<style type="text/css">
/* CSS কোড এখানে লেখা হবে */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
</style>
</head>
১.২ কোড ব্যাখ্যা
<style>ট্যাগটি<head>সেকশনে অবস্থান করে এবং এতে CSS কোড লেখা হয়।type="text/css"অ্যাট্রিবিউটটি বলে দেয় যে এটি একটি CSS কোড ব্লক।- CSS সিলেক্টর (যেমন,
body,h1) এবং তাদের স্টাইল রুলস (যেমন,background-color,font-family) ডিফাইন করা হয়।
১.৩ উদাহরণ
<!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>XHTML Example with Style Tag</title>
<style type="text/css">
body {
background-color: #f4f4f4;
font-family: 'Arial', sans-serif;
}
h1 {
color: #2e6da4;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Welcome to My XHTML Page</h1>
<p>This page demonstrates the use of style tags in XHTML.</p>
</body>
</html>
এই কোডে, <style> ট্যাগের মাধ্যমে body, h1, এবং p ট্যাগের স্টাইলিং করা হয়েছে। <style> ট্যাগের মাধ্যমে একাধিক উপাদানকে স্টাইল দেওয়া সম্ভব।
২. ইনলাইন স্টাইলিং (Inline Styling)
ইনলাইন স্টাইলিং হল যখন আপনি CSS কোডটি সরাসরি HTML বা XHTML ট্যাগের মধ্যে style অ্যাট্রিবিউট ব্যবহার করে প্রয়োগ করেন। এই পদ্ধতিতে শুধুমাত্র একটি নির্দিষ্ট উপাদানকে স্টাইল করা হয়।
২.১ ইনলাইন স্টাইলিং-এর গঠন
<tagname style="property:value;">
Content here
</tagname>
২.২ ইনলাইন স্টাইলিং-এর উদাহরণ
<!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>XHTML Example with Inline Styling</title>
</head>
<body>
<h1 style="color: #2e6da4; text-align: center;">Welcome to My XHTML Page</h1>
<p style="font-size: 16px; line-height: 1.6;">This page demonstrates the use of inline styling in XHTML.</p>
</body>
</html>
২.৩ কোড ব্যাখ্যা
- এখানে
styleঅ্যাট্রিবিউট ব্যবহার করেh1এবংpট্যাগের স্টাইল সোজাসুজি ডিফাইন করা হয়েছে। - উদাহরণস্বরূপ,
h1ট্যাগের জন্যcolorএবংtext-alignপ্রোপার্টি সেট করা হয়েছে, এবংpট্যাগের জন্যfont-sizeএবংline-heightপ্রোপার্টি ব্যবহৃত হয়েছে।
৩. স্টাইল ট্যাগ এবং ইনলাইন স্টাইলিং-এর তুলনা
| প্যারামিটার | স্টাইল ট্যাগ | ইনলাইন স্টাইলিং |
|---|---|---|
| প্রয়োগের স্থান | <head> সেকশনে, পৃষ্ঠার বিভিন্ন অংশে প্রয়োগযোগ্য | প্রতিটি ট্যাগের মধ্যে স্টাইল কোড লেখা হয় |
| ব্যবহার | একাধিক উপাদানে একই স্টাইল প্রয়োগ করা যায় | একটি নির্দিষ্ট উপাদানে স্টাইল প্রয়োগ করা যায় |
| কোডের সাদৃশ্য | আরও পরিচ্ছন্ন এবং পুনঃব্যবহারযোগ্য | কোডের পুনঃব্যবহারযোগ্যতা কম |
| পারফরম্যান্স | পারফরম্যান্সের দিক থেকে ভালো (একাধিক ট্যাগের জন্য একটি স্টাইল) | একাধিক স্টাইল কোড থাকলে এটি পারফরম্যান্সে প্রভাব ফেলতে পারে |
৪. কখন কোন পদ্ধতি ব্যবহার করবেন?
- স্টাইল ট্যাগ ব্যবহার করা উচিত যখন:
- একটি পেজে একাধিক উপাদান একই স্টাইল শেয়ার করে।
- আপনি কোডে পরিবর্তন আনতে চান, কিন্তু একাধিক এলিমেন্টে তা প্রভাবিত করতে চান।
- ওয়েব পেজের স্টাইলগুলি একত্রিতভাবে রাখতে চান।
- ইনলাইন স্টাইলিং ব্যবহার করা উচিত যখন:
- কোনো নির্দিষ্ট উপাদানে স্টাইল প্রয়োগ করতে চান, এবং তা অন্য কোনো উপাদানে প্রভাব ফেলবে না।
- আপনি খুবই ছোট পৃষ্ঠায় কাজ করছেন, যেখানে স্টাইলিং বেশি প্রয়োজন নয়।
স্টাইল ট্যাগ এবং ইনলাইন স্টাইলিং উভয়ই XHTML ডকুমেন্টে CSS প্রয়োগের দুটি গুরুত্বপূর্ণ পদ্ধতি। স্টাইল ট্যাগটি পৃষ্ঠার বিভিন্ন অংশে একই স্টাইল প্রয়োগ করার জন্য উপযুক্ত, যখন ইনলাইন স্টাইলিং একটি নির্দিষ্ট উপাদানে স্টাইল প্রয়োগের জন্য ব্যবহৃত হয়। উভয়েরই নিজস্ব সুবিধা এবং সীমাবদ্ধতা রয়েছে, এবং সঠিক পদ্ধতি বেছে নেওয়া আপনার প্রকল্পের চাহিদার ওপর নির্ভর করে।
XHTML (Extensible Hypertext Markup Language) ডকুমেন্টে স্টাইলিং করার জন্য CSS (Cascading Style Sheets) ব্যবহার করা হয়। CSS-এ দুটি প্রধান সিলেক্টর রয়েছে যা ডকুমেন্টের উপাদানগুলোকে সঠিকভাবে সজ্জিত করতে সাহায্য করে: ক্লাস (class) এবং আইডি (id)। এগুলোকে ব্যবহার করে আপনি HTML বা XHTML ডকুমেন্টের নির্দিষ্ট উপাদানগুলোকে স্টাইল করতে পারেন।
XHTML ডকুমেন্টে স্টাইলিং করতে ক্লাস এবং আইডি ব্যবহার করার নিয়মাবলী এবং উদাহরণ এখানে ব্যাখ্যা করা হবে।
১. ক্লাস (class) দিয়ে স্টাইলিং
১.1 ক্লাস সিলেক্টর
CSS-এ ক্লাস সিলেক্টর দিয়ে একাধিক উপাদানকে একইভাবে স্টাইল করতে সাহায্য করে। একটি ক্লাস সাধারণত একই ধরনের উপাদানগুলোতে একযোগভাবে প্রয়োগ করা হয়। ক্লাস সিলেক্টর . (ডট) দিয়ে চিহ্নিত করা হয়।
উদাহরণ:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>XHTML Class Styling</title>
<style>
.highlight {
color: blue;
font-size: 18px;
}
.important {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p class="highlight">This is a highlighted paragraph.</p>
<p class="important">This paragraph is important!</p>
<p class="highlight important">This paragraph is both highlighted and important.</p>
</body>
</html>
এখানে:
.highlightক্লাসটি প্যারাগ্রাফের টেক্সটের রঙ নীল (blue) এবং ফন্ট সাইজ ১৮ পিক্সেল করে দিয়েছে।.importantক্লাসটি প্যারাগ্রাফটির টেক্সটের রঙ লাল (red) এবং ফন্টটি বোল্ড (bold) করেছে।
একাধিক ক্লাস একসাথে ব্যবহার করা যাবে, যেমন class="highlight important"।
২. আইডি (id) দিয়ে স্টাইলিং
২.1 আইডি সিলেক্টর
CSS-এ আইডি সিলেক্টর একটি একক উপাদানকে নির্দিষ্টভাবে সিলেক্ট এবং স্টাইল করার জন্য ব্যবহৃত হয়। আইডি সিলেক্টর # (হ্যাশ) চিহ্ন দিয়ে চিহ্নিত করা হয়। একটি আইডি শুধুমাত্র একবার ব্যবহার করা উচিত, অর্থাৎ একটি ডকুমেন্টে একটি নির্দিষ্ট আইডি শুধুমাত্র একবার প্রযোজ্য হতে পারে।
উদাহরণ:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>XHTML ID Styling</title>
<style>
#header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
#footer {
background-color: #f1f1f1;
color: black;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div id="header">Welcome to My Website</div>
<p>This is a sample page.</p>
<div id="footer">Footer Information</div>
</body>
</html>
এখানে:
#headerআইডি ট্যাগটির পটভূমি সবুজ (green) এবং টেক্সট সাদা (white) করা হয়েছে।#footerআইডি ট্যাগটির পটভূমি সাদা (white) এবং টেক্সট কালো (black) করা হয়েছে।
আইডি সিলেক্টরটি নির্দিষ্ট উপাদান এককভাবে চিহ্নিত করতে ব্যবহার করা হয় এবং প্রতিটি আইডি একবারই ব্যবহৃত হয়।
৩. ক্লাস এবং আইডি সিলেক্টরের পার্থক্য
৩.1 ক্লাস সিলেক্টর:
- একাধিক উপাদানে প্রযোজ্য হতে পারে।
- একাধিক উপাদানকে একই স্টাইল দেওয়া যায়।
- একটি ক্লাস অনেক উপাদানকে একযোগভাবে স্টাইল করতে ব্যবহার করা যায়।
৩.2 আইডি সিলেক্টর:
- একটি ডকুমেন্টে শুধুমাত্র একবার ব্যবহার করা উচিত।
- একটি নির্দিষ্ট উপাদানকে লক্ষ্য করে স্টাইল দিতে ব্যবহৃত হয়।
- আইডি সিলেক্টর একটি নির্দিষ্ট উপাদানের জন্য এককভাবে প্রযোজ্য।
৪. ক্লাস এবং আইডি ব্যবহার করার ক্ষেত্রে টিপস
৪.1 ক্লাস সিলেক্টর ব্যবহার করুন যখন:
- আপনি একাধিক উপাদানে এক ধরনের স্টাইল প্রয়োগ করতে চান।
- একই স্টাইল অনেক জায়গায় ব্যবহার হবে।
৪.2 আইডি সিলেক্টর ব্যবহার করুন যখন:
- আপনি একটি নির্দিষ্ট উপাদানকে আলাদা এবং বিশেষভাবে স্টাইল করতে চান।
- শুধু একবার প্রয়োগ করা প্রয়োজন এমন স্টাইলের জন্য আইডি ব্যবহার করুন।
XHTML ডকুমেন্টে ক্লাস এবং আইডি সিলেক্টরের মাধ্যমে স্টাইলিং করা সহজ এবং কার্যকর। ক্লাস সিলেক্টর একাধিক উপাদানের জন্য এবং আইডি সিলেক্টর একক উপাদানের জন্য ব্যবহৃত হয়। CSS এর সাহায্যে ক্লাস এবং আইডি সিলেক্টর ব্যবহার করে আপনি আপনার XHTML ডকুমেন্টের ডিজাইন এবং লেআউট কাস্টমাইজ করতে পারবেন।
এক্সএইচটিএমএল (XHTML) ডকুমেন্টে বেসিক টাইপোগ্রাফি সেটিংস সেট করা খুবই গুরুত্বপূর্ণ, কারণ এর মাধ্যমে ওয়েব পেজের পাঠযোগ্যতা ও ডিজাইন উন্নত করা যায়। XHTML, HTML-এর মতোই, পাঠ্য এবং টাইপোগ্রাফি এলিমেন্ট ব্যবহারের জন্য সমর্থন প্রদান করে। তবে, XHTML ডকুমেন্টের ক্ষেত্রে কিছু অতিরিক্ত নিয়ম এবং গঠন রয়েছে, যা অনুসরণ করা আবশ্যক।
১. বেসিক টাইপোগ্রাফি উপাদান
১.১ প্যারাগ্রাফ (<p>)
প্যারাগ্রাফ ট্যাগ HTML এবং XHTML-এ একটি গুরুত্বপূর্ণ উপাদান। এটি সাধারণত পাঠ্য ব্লক তৈরি করতে ব্যবহৃত হয়। XHTML-এ <p> ট্যাগের মধ্যে থাকা সব টেক্সট একটি আলাদা প্যারাগ্রাফ হিসেবে রেন্ডার হয়।
<p>এই একটি সাধারণ প্যারাগ্রাফ।</p>
১.২ হেডিংস (<h1>, <h2>, ..., <h6>)
হেডিং ট্যাগগুলি ওয়েব পেজে বিভিন্ন স্তরের শিরোনাম তৈরি করতে ব্যবহৃত হয়। XHTML-এ, আপনি <h1> থেকে <h6> পর্যন্ত হেডিং ট্যাগ ব্যবহার করতে পারেন। এই ট্যাগগুলো বিভিন্ন আকারের পাঠ্য প্রদর্শন করে।
<h1>এটি একটি হেডিং ১</h1>
<h2>এটি একটি হেডিং ২</h2>
১.৩ বোল্ড এবং ইটালিক (<b>, <i>)
এক্সএইচটিএমএল ডকুমেন্টে পাঠ্যকে বোল্ড বা ইটালিক (italic) করতে <b> এবং <i> ট্যাগ ব্যবহার করা হয়। তবে, XHTML-এ টাইপোগ্রাফি নির্ধারণ করতে CSS ব্যবহার করা উচিত, কিন্তু যদি টেক্সটের বৈশিষ্ট্য পরিবর্তন করতে চান, তবেও এই ট্যাগগুলো ব্যবহৃত হতে পারে।
<p><b>এটি বোল্ড পাঠ্য।</b></p>
<p><i>এটি ইটালিক পাঠ্য।</i></p>
২. স্টাইল শীট (CSS) ব্যবহার
XHTML ডকুমেন্টে টাইপোগ্রাফি সেটিংসকে কাস্টমাইজ করার জন্য সাধারণভাবে CSS (Cascading Style Sheets) ব্যবহার করা হয়। CSS এর মাধ্যমে আপনি টেক্সটের ফন্ট, আকার, রঙ, স্পেসিং ইত্যাদি নিয়ন্ত্রণ করতে পারেন।
২.১ ফন্ট সেটিংস
XHTML-এ ফন্ট সাইজ, ফন্ট ফ্যামিলি এবং ফন্ট স্টাইল কাস্টমাইজ করার জন্য CSS ব্যবহার করা হয়। এর মাধ্যমে আপনি ওয়েব পেজের টাইপোগ্রাফির স্টাইল নির্ধারণ করতে পারেন।
<head>
<style type="text/css">
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
font-size: 24px;
font-weight: bold;
}
</style>
</head>
এখানে, <body> ট্যাগের মধ্যে লেখার জন্য ফন্ট ফ্যামিলি Arial এবং ফন্ট সাইজ ১৬ পিক্সেল নির্ধারণ করা হয়েছে। একইভাবে, <h1> ট্যাগের জন্য ফন্ট সাইজ ২৪ পিক্সেল এবং বোল্ড সেট করা হয়েছে।
২.২ লাইন হাইট এবং লেটার স্পেসিং
টাইপোগ্রাফিতে লাইন হাইট (line-height) এবং লেটার স্পেসিং (letter-spacing) গুরুত্বপূর্ণ ভূমিকা রাখে। এগুলোর মাধ্যমে আপনি পাঠ্যের পড়া সহজ ও সুস্পষ্ট করতে পারেন।
<head>
<style type="text/css">
p {
line-height: 1.6;
letter-spacing: 0.5px;
}
</style>
</head>
এখানে, প্যারাগ্রাফের মধ্যে লাইন হাইট ১.৬ এবং লেটার স্পেসিং ০.৫ পিক্সেল নির্ধারণ করা হয়েছে।
২.৩ টেক্সট অ্যালাইনমেন্ট
CSS ব্যবহার করে আপনি টেক্সটের অ্যালাইনমেন্ট (alignment) নির্ধারণ করতে পারেন। text-align প্রপার্টি দিয়ে টেক্সটের অবস্থান (বাম, ডান, কেন্দ্র) নির্ধারণ করা যায়।
<head>
<style type="text/css">
h1 {
text-align: center;
}
p {
text-align: justify;
}
</style>
</head>
এখানে, <h1> ট্যাগের টেক্সট সেন্টারে এবং <p> ট্যাগের টেক্সট জাস্টিফাইড (justify) রাখা হয়েছে।
৩. তালিকা এবং ব্লক এলিমেন্ট
৩.১ অর্ডারড (Ordered) এবং আনঅর্ডারড (Unordered) তালিকা
টেক্সটের মধ্যে তালিকা প্রদর্শন করতে <ul> এবং <ol> ট্যাগ ব্যবহার করা হয়। তালিকার আইটেম গুলি <li> ট্যাগের মাধ্যমে চিহ্নিত হয়।
<ul>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
</ul>
<ol>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
</ol>
এখানে, <ul> ট্যাগ একটি আনঅর্ডারড (unordered) তালিকা তৈরি করে এবং <ol> ট্যাগ একটি অর্ডারড (ordered) তালিকা তৈরি করে।
৪. টেক্সট কাস্টমাইজেশনের জন্য কিছু অন্যান্য CSS প্রপার্টি
৪.১ টেক্সট কালার
<head>
<style type="text/css">
p {
color: #333333;
}
</style>
</head>
এখানে, প্যারাগ্রাফের টেক্সটের রঙ সিলেক্ট করা হয়েছে #333333 (গা dark ় ধূসর)।
৪.২ টেক্সট ডেকোরেশন
<head>
<style type="text/css">
a {
text-decoration: none;
}
</style>
</head>
এখানে, লিঙ্ক (anchor tag) থেকে ডিফল্ট আন্ডারলাইন সরিয়ে দেওয়া হয়েছে।
৪.৩ ফন্ট ওজন
<head>
<style type="text/css">
p {
font-weight: normal;
}
strong {
font-weight: bold;
}
</style>
</head>
এখানে, প্যারাগ্রাফের টেক্সটের ফন্ট ওজন normal এবং <strong> ট্যাগের জন্য bold ফন্ট ওজন নির্ধারণ করা হয়েছে।
এক্সএইচটিএমএল ডকুমেন্টে টাইপোগ্রাফি সেটিংস সঠিকভাবে নির্ধারণ করা ওয়েব পেজের পাঠযোগ্যতা এবং ভিজ্যুয়াল অভিজ্ঞতা উন্নত করতে সহায়তা করে। CSS ব্যবহার করে আপনি ফন্ট, আকার, রঙ, স্পেসিং এবং অন্যান্য টাইপোগ্রাফিক বৈশিষ্ট্য কাস্টমাইজ করতে পারেন। XHTML-এ সঠিক গঠন এবং স্টাইলিং অনুসরণ করলে একটি সুন্দর এবং সুসংগঠিত ওয়েব পেজ তৈরি করা সম্ভব।
Read more
