এসো বাংলায় ওয়েব-ডিজাইন শিখি হাতে খরি পর্ব-৬
এইচটিএমএল ফরম্যাটিং elements (HTML Formatting Element)
গত অধ্যায়ে আপনারা জেনেছেন, HTML Style Attribute দ্বারা কিভাবে HTML Style কে পরিবর্তন করা যায়।
এ অধ্যায়ে আমরা HTML Formatting Element সম্পর্কে জানব। নিম্নে HTML Text Formatting Elements গুলোকে উদাহরণসহ তুলে ধরা হল-
এইচটিএমএল এর কিছু গুরুত্তপূর্ণ উপাদান আছে যা দিয়ে টেক্সট কে বিভিন্নরুপে সাজানো যায়।
যেমন আমরা বোল্ড এবং ইতালিক টেক্সট পাওয়ার জন্য ব্যবহার করব <b> এবং <i>। ফরম্যাটিং উপাদান দ্বারা কি ধরনের টেক্সট হতে পারে তা নিচে দেওয়া হল
- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small text
- Deleted text
- Inserted text
- Subscripts
- Superscripts
এইচটিএমএল Bold এবং strong ফরম্যাট এর উদাহরণ
<b> এলিমেন্ট Text কে বোল্ড করে, Text কে কোন বিশেষ গুরুত্ব প্রদান করে না।
উদাহরণঃ
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
আমি <!DOCTYPE html> সর্ম্পূণটি একবার এইখানে লিখে আপনাদের দেখালাম কিন্তু আপনারা প্রত্যেকবার লিখবেন এবং শুধুমাত্র প্রত্যেক উদাহরণের ক্ষেত্রে <p>This text is normal.</p> জায়গাটার লেখা পরিবর্তন করে সেভ করে preview দেখবেন।
ফলাফলঃ
This text is normal.
This text is bold.
এইচটিএমএল এর <strong> এলিমেন্ট strong টেক্সট ডিফাইন করে যা শব্দ বা বাক্যটিকে বিশেষ গুরুত্ব প্রদান করে।
উদাহরণঃ
<p><strong>This text is strong</strong>.</p>
ফলাফলঃ
This text is strong.
এইচটিএমএল italic এবং emphasized ফরম্যাট
এইচটিএমএল এ <i> উপাদান দিয়ে ইতালিক টেক্সট ডিসপ্লে করা হয় কোন অতিরিক্ত গুরুত্ত প্রদান করা ব্যতীত।
উদাহরণঃ
<p><i>This text is italic</i>.</p>
ফলাফলঃ
This text is italic.
গুরুত্ব সহকারে emphasized টেক্সট দেখানোর জন্য <em> উপাদান ব্যবহার করা হয়
উদাহরণঃ
<p><em>This text is emphasized</em>.</p>
ফলাফলঃ
This text is emphasized.
দ্রষ্টব্য: ব্রাউজার গুলো <strong> কে <b> এবং <em> কে <i> আকারে ডিসপ্লে করে
যদিও এই ট্যাগ গুলোর মধ্যে অর্থগত ভিন্নতা রয়েছেঃ এখানে <b> এবং <i> বোল্ড এবং ইতালিক টেক্সট বুঝায় কিন্ত <strong> এবং <em> ট্যাগ বুঝায় যে টেক্সগুলো গুরুত্বপূর্ণ।
যদিও এই ট্যাগ গুলোর মধ্যে অর্থগত ভিন্নতা রয়েছেঃ এখানে <b> এবং <i> বোল্ড এবং ইতালিক টেক্সট বুঝায় কিন্ত <strong> এবং <em> ট্যাগ বুঝায় যে টেক্সগুলো গুরুত্বপূর্ণ।
এইচটিএমএল small ফরম্যাটিং
<small> ট্যাগ ব্যবহার করে এইচটিএমএল এ ছোট আকারের লেখা দেখানো যায়
উদাহরণ
<h2>HTML <small>Small</small> Formatting</h2>
ফলাফলঃ
HTML Small Formatting
এইচটিএমএল marked ফরম্যাটিং:
হাইলাইট করা কোন টেক্সট ডিসপ্লে করার জন্য ব্যবহার করা হয় <mark> ট্যাগ
উদাহরণ
<h2>HTML <mark>Marked</mark> Formatting</h2>
ফলাফলঃ
HTML Marked Formatting
এইচটিএমএল deleted ফরম্যাটিং
কোন টেক্সট কে বাদ দেয়া বা মুছে ফেলা হয়েছে বুঝাতে টেক্সট এর গায়ে কাটা চিহ্ন দেখানোর জন্য <del> ট্যাগ ব্যবহার করা হয় ।
উদাহরণ
<p>My favorite color is <del>blue</del> red.</p>
ফলাফলঃ
My favorite color is
blue red.
এইচটিএমএল inserted ফরম্যাটিং
কোন নতুন টেক্সট যুক্ত করা হয়েছে বূঝাতে টেক্সট এর নিচে দাগ দেখানোর জন্য আমরা <ins> ট্যাগ ব্যবহার করা হয়।
উদাহরণ
<p>My favorite <ins>color</ins> is red.</p>
ফলাফল
My favorite
color is red.
color is red.
এইচটিএমএল subscripts ফরম্যাটিং
সাধারন লাইনের নিচে কোন টেক্সট কে ডিসপ্লে করার জন্য আমরা <sub> ট্যাগটি ব্যবহার করব
উদাহরণ
<p>This is <sub>subscripted</sub> text.</p>
ফলাফলঃ
This is subscripted text.
এইচটিএমএল superscripts ফরম্যাটিং
সাধারন লাইনের উপরে কোন টেক্সট কে দেখানোর জন্য আমরা <sup> এই ট্যাগ টি ব্যবহার করা হয়
উদাহরণ
<p>This is <sup>superscripted</sup> text.</p>
ফলাফলঃ
This is superscripted text.
এইচটিএমএল এর টেক্সট ফরম্যাটিং এর জন্য ট্যাগ গুলো নিচে পর্যায় ক্রমে দেখানো হলঃ
| Tag | Description (বর্ণনা) |
| <b> | কোন text কে bold করতে এ tag ব্যবহার করা হয়। |
| <strong> | গুরুত্বপূর্ণ Text কে তুলে ধরতে এই tag ব্যবহৃত হয়। |
| <i> | কোন text কে italic করতে এই tag ব্যবহৃত হয়। |
| <em> | Emphasized text কে তুলে ধরতে এটি ব্যবহৃত হয়। |
| <small> | ছোট কোন Text কে তুলে ধরা এই tag এর দ্বারা। |
| <u> | Text কে underline করতে একে ব্যবহার করা হয়। |
| <mark> | কোন text কে হাইলাইট করতে <mark> tag ব্যবহার করা হয়। |
| <del> | Text কে remove করতে এই tag ব্যবহৃত হয়। |
| <ins> | কোন text কে add করতে এটি ব্যবহৃত হয়। |
| <sub> | Subscripted text কে চিহ্নিত করতে এই element ব্যবহৃত হয়। |
| <sup> | Superscripted text কে চিহ্নিত করতে এই element ব্যবহৃত হয়। |
এই টিটোরিয়াল টা ও ভিডিও দরকার নেই কারন এই ট্যাগগুলো আপনাদের মখুস্ত করে রাখতে হবে আমি এর পরের টিটোরিয়ালে যখন এই গুলো নিয়ে বর্ণনা করব তখন এই গুলো বিবারণ সহ ভিডিও মাঝে আলোচনা করব।
