Header Ads

HTML Text Formattimg এইচটিএমএল টেক্সট ফর্ম্যাটিং

Image result for 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> এলিমেন্ট টেক্সটের জন্য অতিরিক্ত "গুরুত্ব" বহন করে।

অধ্যায়ের সারাংশ

  1. এইচটিএমএল <b> এলিমেন্ট টেক্সটকে বোল্ড করতে ব্যবহার করা হয়।
  2. এইচটিএমএল <del> এলিমেন্ট ডিলেট করা টেক্সট বুঝাতে ব্যবহার করা হয়।
  3. এইচটিএমএল <em> এলিমেন্ট টেক্সটকে ইটালিক এবং গুরুত্ব বুঝাতে ব্যবহার করা হয়।
  4. এইচটিএমএল <i> এলিমেন্ট টেক্সটকে ইটালিক করতে ব্যবহার করা হয়।
  5. এইচটিএমএল <ins> এলিমেন্ট ইনসার্টেড টেক্সট বুঝাতে ব্যবহার করা হয়।
  6. এইচটিএমএল <mark> এলিমেন্ট টেক্সটকে চিহ্নিত করতে ব্যবহার করা হয়।
  7. এইচটিএমএল <pre> এলিমেন্ট টেক্সটকে হুবহু প্রদর্শন করতে ব্যবহার করা হয়।
  8. এইচটিএমএল <small> এলিমেন্ট টেক্সটকে ছোট করতে ব্যবহার করা হয়।
  9. এইচটিএমএল <strong> এলিমেন্ট টেক্সটকে গাঢ় এবং গুরুত্ব বুঝাতে ব্যবহার করা হয়।
  10. এইচটিএমএল <sub> এলিমেন্ট সাবস্ক্রিপ্ট টেক্সটকে বুঝাতে ব্যবহার করা হয়।
  11. এইচটিএমএল <sup> এলিমেন্ট সুপারস্ক্রিপ্ট টেক্সটকে বুঝাতে ব্যবহার করা হয়।

No comments

Powered by Blogger.