এইচটিএমএল টেক্সট ফর্ম্যাটিং (HTML Text Formatting)
একনজরে এইচটিএমএল টেক্সট ফর্ম্যাটিং এলিমেন্টসমূহ
| ট্যাগ | বিবরণ |
|---|---|
| <b> | বোল্ড/গাঢ় টেক্সট বুঝায়। |
| <del> | ডিলেটকৃত টেক্সট বুঝায়। |
| <em> | এম্ফেসাইজ/গুরুত্বপূর্ণ টেক্সট বুঝায়। |
| <i> | ইটালিক টেক্সট বুঝায়। |
| <ins> | ইনসারটেড টেক্সট বুঝায়। |
| <mark> | মার্ক/হাইলাইট টেক্সট বুঝায়। |
| <pre> | স্পেস এবং ফাকা লাইন সংরক্ষন করে টেক্সটকে হুবুহু প্রদর্শনের জন্য এই ট্যাগ ব্যবহৃত হয়। |
| <small> | অপেক্ষাকৃত ছোট টেক্সট বুঝায়। |
| <strong> | গুরুত্বপূর্ণ টেক্সট বুঝায়। |
| <sub> | সাবস্ক্রিপ্ট টেক্সট বুঝায়। |
| <sup> | সুপারস্ক্রিপ্ট টেক্সট বুঝায়। |
<b> এলিমেন্ট
এইচটিএমএল <b> এলিমেন্ট দ্বারা টেক্সটকে বোল্ড/গাঢ় করা হয়, কিন্তু এটার মাধ্যমে ঐ টেক্সটটি অতিরিক্ত কোন গুরুত্ব বহন করে না।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল b এলিমেন্ট</title>
</head>
<body>
<p>এই লেখাটি নরমাল।</p>
<p><b>এই লেখাটি বোল্ড।</b></p>
</body>
</html>
ফলাফল
<del> এলিমেন্ট
এইচটিএমএল <del> এলিমেন্ট ডিলেট করা টেক্সটকে বুঝায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল del এলিমেন্ট</title>
</head>
<body>
<p> <del>সাদা</del> আমার প্রিয় রং।</p>
</body>
</html>
ফলাফল
<em> এলিমেন্ট
এইচটিএমএল <em> এলিমেন্ট কোনো টেক্সটকে শুধু বাঁকাই করে না বরং এর অর্থগত গুরুত্বও বুঝায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল em এলিমেন্ট</title>
</head>
<body>
<p>এই লেখাটি নরমাল।</p>
<p><em>এই লেখাটি এম্ফেসাইজড।</em></p>
</body>
</html>
ফলাফল
<i> এলিমেন্ট
এইচটিএমএল <i> এলিমেন্ট টেক্সটকে ইটালিক/বাঁকা করে, কিন্তু অতিরিক্ত কোন গুরুত্ব বহন করে না।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল i এলিমেন্ট</title>
</head>
<body>
<p>এই লেখাটি নরমাল।</p>
<p><i>এই লেখাটি ইটালিক।</i></p>
</body>
</html>
ফলাফল
<ins> এলিমেন্ট
এইচটিএমএল <ins> এলিমেন্ট inserted(একটি টেক্সটের পরিবর্তে নতুন টেক্সট) টেক্সটকে বুঝায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল ins এলিমেন্ট</title>
</head>
<body>
<p>আমার প্রিয় রং <del>সাদা</del> <ins>কালো</ins>।</p>
</body>
</html>
ফলাফল
<mark> এলিমেন্ট
এইচটিএমএল <mark> এলিমেন্টের মাধ্যমে টেক্সটকে হাইলাইট বা চিহ্নিত করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল mark এলিমেন্ট</title>
</head>
<body>
<p>এইচটিএমএল <mark>টেক্সট</mark> ফর্ম্যটিং</p>
</body>
</html>
ফলাফল
<pre> এলিমেন্ট
সোর্স কোডের কোন টেক্সটকে স্পেস এবং লাইন ব্রেকসহ হুবহু প্রদর্শন করানোর জন্য এইচটিএমএল <pre> ট্যাগ ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল pre এলিমেন্ট</title>
</head>
<body>
<pre>
আমরা করবো জয়;
আমরা করবো জয়;
আমরা করবো জয় নিশ্চয়ই;
ও হো ,বুকের গভীরে আছে প্রত্যয় ।
আমরা করবো জয়;
</pre>
</body>
</html>
ফলাফল
<small> এলিমেন্ট
টেক্সটকে অপেক্ষাকৃত ছোট করে দেখানোর জন্য এইচটিএমএল <small> এলিমেন্ট ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল small এলিমেন্ট</title>
</head>
<body>
<p>এইচটিএমএল <small>টেক্সট</small> ফর্ম্যটিং</p>
</body>
</html>
ফলাফল
<strong> এলিমেন্ট
এইচটিএমএল <strong> এলিমেন্ট কোনো টেক্সটকে শুধু গাঢ়ই(bold) করে না, বরং এর অর্থগত গুরুত্বও বহন করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল strong এলিমেন্ট</title>
</head>
<body>
<p>এই লেখাটি নরমাল।</p>
<p><strong>এই লেখাটি গুরুত্বপূর্ণ।</strong></p>
</body>
</html>
ফলাফল
<sub> এলিমেন্ট
এইচটিএমএল <sub> এলিমেন্ট দ্বারা সাবস্ক্রিপ্ট টেক্সট বুঝায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল sub এলিমেন্ট</title>
</head>
<body>
<p><sub>সাবস্ক্রিপ্ট</sub> টেক্সট।</p>
</body>
</html>
ফলাফল
<sup> এলিমেন্ট
এইচটিএমএল <sup> এলিমেন্ট দ্বারা সুপারস্ক্রিপ্ট টেক্সট বুঝায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>এইচটিএমএল উদাহরণ</title>
</head>
<body>
<p><sup>সুপারস্ক্রিপ্ট</sup> টেক্সট।</p>
</body>
</html>
ফলাফল
বিঃদ্রঃ ব্রাউজারে <strong> এলিমেন্ট <b> এলিমেন্টের মতো এবং <em> এলিমেন্ট <i> এলিমেন্টের মতোই কাজ করে। কিন্তু এদের অর্থগত পার্থক্য রয়েছেঃ
<b> এবং <i> এলিমেন্ট বোল্ড এবং ইটালিক টেক্সটকে বুঝায়, অপরদিকে <strong> এবং <em> এলিমেন্ট টেক্সটের জন্য অতিরিক্ত "গুরুত্ব" বহন করে।
অধ্যায়ের সারাংশ
- এইচটিএমএল
<b>এলিমেন্ট টেক্সটকে বোল্ড করতে ব্যবহার করা হয়। - এইচটিএমএল
<del>এলিমেন্ট ডিলেট করা টেক্সট বুঝাতে ব্যবহার করা হয়। - এইচটিএমএল
<em>এলিমেন্ট টেক্সটকে ইটালিক এবং গুরুত্ব বুঝাতে ব্যবহার করা হয়। - এইচটিএমএল
<i>এলিমেন্ট টেক্সটকে ইটালিক করতে ব্যবহার করা হয়। - এইচটিএমএল
<ins>এলিমেন্ট ইনসার্টেড টেক্সট বুঝাতে ব্যবহার করা হয়। - এইচটিএমএল
<mark>এলিমেন্ট টেক্সটকে চিহ্নিত করতে ব্যবহার করা হয়। - এইচটিএমএল
<pre>এলিমেন্ট টেক্সটকে হুবহু প্রদর্শন করতে ব্যবহার করা হয়। - এইচটিএমএল
<small>এলিমেন্ট টেক্সটকে ছোট করতে ব্যবহার করা হয়। - এইচটিএমএল
<strong>এলিমেন্ট টেক্সটকে গাঢ় এবং গুরুত্ব বুঝাতে ব্যবহার করা হয়। - এইচটিএমএল
<sub>এলিমেন্ট সাবস্ক্রিপ্ট টেক্সটকে বুঝাতে ব্যবহার করা হয়। - এইচটিএমএল
<sup>এলিমেন্ট সুপারস্ক্রিপ্ট টেক্সটকে বুঝাতে ব্যবহার করা হয়।