ওয়েব ডেভেলপমেন্টে HTML খুবই গুরুত্বপূর্ণ একটি ভাষা, যার মাধ্যমে আমরা বিভিন্ন ধরনের ওয়েবপেজ তৈরি করতে পারি। HTML এ Text Formatting একটি গুরুত্বপূর্ণ বিষয় যা ওয়েবপেজে বিভিন্ন ধরণের টেক্সটকে আকর্ষণীয় এবং পঠনযোগ্য করতে ব্যবহৃত হয়। এই ব্লগে, আমরা HTML এর বিভিন্ন Formatting ট্যাগ এবং তাদের ব্যবহার সম্পর্কে বিস্তারিত জানব।
Table of Contents
HTML এ Text Formatting কী?
HTML এ Text Formatting বলতে টেক্সটকে বোল্ড, ইটালিক, আন্ডারলাইন, ইত্যাদি রূপে সাজানোর প্রক্রিয়াকে বোঝায়। এটি user এর দৃষ্টি আকর্ষণ করতে এবং কনটেন্টকে আরও পঠনযোগ্য করতে সাহায্য করে। HTML এ Text Formatting করতে বিভিন্ন ট্যাগ ব্যবহৃত হয়।
বিভিন্ন ফরম্যাটিং TAG এবং তাদের ব্যবহার
Bold টেক্সট (<b>
ট্যাগ):
HTML এ কোনো টেক্সটকে বোল্ড করতে <b>
ট্যাগ ব্যবহার করা হয়। এটি টেক্সটকে একটু মোটা করে প্রদর্শন করে, যা সাধারণত গুরুত্বপূর্ণ বিষয়বস্তুতে ব্যবহার করা হয়।
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<p>Subscribe Our YouTube Channel: <b>Subscribe</b></p>
</body>
</html>
HTMLExample
Subscribe Our YouTube Channel: Subscribe
এখানে, “Subscribe” টেক্সটটি <b>
ট্যাগের মধ্যে থাকার কারণে Bold (বোল্ড) হয়ে প্রদর্শিত হবে।
Strong টেক্সট (<strong>
ট্যাগ):
<strong>
ট্যাগ ব্যবহার করা হয় কোনো টেক্সটকে গুরুত্বপূর্ণ বা জোরালো বোঝাতে। এটি <b>
ট্যাগের মতোই বোল্ড দেখায়, তবে এটি আরও গুরুত্ব দিয়ে বোঝায়।
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<p>This is <strong>Important Text</strong>.</p>
</body>
</html>
HTMLExample
This is Important Text.
এখানে, “Important Text” টেক্সটটি জোরালোভাবে প্রদর্শিত হবে।
Italic টেক্সট (<i>
ট্যাগ):
HTML এ টেক্সটকে ইটালিক করতে <i>
ট্যাগ ব্যবহার করা হয়। এটি টেক্সটকে হালকা বাঁকা করে প্রদর্শন করে।
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<p>This is <i>italic</i> text.</p>
</body>
</html>
HTMLExample
This is italic text.
এখানে, “italic” টেক্সটটি ইটালিক আকারে প্রদর্শিত হবে।
Emphasized টেক্সট (<em>
ট্যাগ):
<em>
ট্যাগটিও ইটালিক প্রদর্শন করে, কিন্তু এটি কোনো টেক্সটকে গুরুত্ব সহকারে প্রদর্শন করতে ব্যবহৃত হয়।
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<p>This is <em>Emphasized</em> text.</p>
</body>
</html>
HTMLExample
This is Emphasized text.
এখানে, “Emphasized” টেক্সটটি ইটালিক এবং গুরুত্বসহকারে প্রদর্শিত হবে।
Marked টেক্সট (<mark>
ট্যাগ):
<mark>
ট্যাগ ব্যবহার করা হয় টেক্সটকে হাইলাইট করতে, যা পাঠকদের দৃষ্টি আকর্ষণ করতে সাহায্য করে।
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<p>Don't forget to <mark>subscribe</mark> to our channel.</p>
</body>
</html>
HTMLExample
Don't forget to subscribe to our channel.
এখানে, “subscribe” টেক্সটটি হাইলাইট হয়ে প্রদর্শিত হবে।
Deleted টেক্সট (<del>
ট্যাগ):
<del>
ট্যাগটি ব্যবহার করা হয় কোনো টেক্সটের ওপর স্ট্রাইক থ্রু লাইন যোগ করতে, যা মুছে ফেলা বা অকার্যকর টেক্সট নির্দেশ করে।
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<p>Original Price: <del>500/-</del> Discounted Price: 400/- </p>
</body>
</html>
HTMLExample
Original Price: 500/- Discounted Price: 400/-
এখানে, “500/-” টেক্সটটির ওপর একটি স্ট্রাইক থ্রু লাইন থাকবে।
Subscript টেক্সট (<sub>
ট্যাগ):
সাবস্ক্রিপ্ট টেক্সট সাধারণত নিচের দিকে ছোট করে প্রদর্শিত হয় এবং এটি বৈজ্ঞানিক ফর্মুলা বা কেমিক্যাল symbol গুলির জন্য ব্যবহৃত হয়।
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<p>Water Formula: H<sub>2</sub>O</p>
</body>
</html>
HTMLExample
Water Formula: H2O
এখানে, “H₂O” এ “2” সাবস্ক্রিপ্ট আকারে প্রদর্শিত হবে।
Superscript টেক্সট (<sup>
ট্যাগ):
সুপারস্ক্রিপ্ট টেক্সট সাধারণত উপরের দিকে ছোট করে প্রদর্শিত হয় এবং এটি গণিতের সূচক বা ত্রুটি নির্দেশ করার জন্য ব্যবহৃত হয়।
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting</title>
</head>
<body>
<p>5<sup>2</sup> = 25</p>
</body>
</html>
HTMLExample
52 = 25
এখানে, “5²” এ “2” সুপারস্ক্রিপ্ট আকারে প্রদর্শিত হবে।
HTML Comment
HTML Comment কী?
HTML কমেন্ট হল কোডের একটি অংশ যা ব্রাউজারে দেখা যায় না এবং ওয়েবপেজে এর কোনো প্রভাব ফেলে না। কমেন্টগুলি মূলত কোডের মধ্যে নোটস, নির্দেশিকা, বা ব্যাখ্যা করতে ব্যবহৃত হয়, যা কোডার বা অন্যান্য ডেভেলপারদের জন্য বোঝা সহজ করে দেয়। এটি ডিবাগিং এবং কোডের মেইনটেনেন্সের জন্য খুবই গুরুত্বপূর্ণ। কমেন্ট ব্যবহার করে , কোডের কোনো নির্দিষ্ট অংশকে সাময়িকভাবে বন্ধ করা যায়।
HTML Paragraph : https://youtu.be/COblexHhzmU?si=seFo38Y-Fu0j0TIv
HTML কমেন্টের Syntax
HTML এ কমেন্ট তৈরি করা খুবই সহজ। এর জন্য নির্দিষ্ট একটি সিনট্যাক্স ব্যবহার করতে হয় –
<!– দিয়ে কমেন্ট শুরু হয় এবং –> দিয়ে শেষ হয়। এই দুই চিহ্নের মধ্যে যা কিছু লেখা হবে, সেটিই হলো comments , যেটি ব্রাউজারে প্রদর্শিত হবে না।
<!-- এখানে আপনার কমেন্ট লিখুন -->
Program
<!DOCTYPE html>
<html>
<head>
<title>HTML Comments Example</title>
</head>
<body>
<!-- this is a comment-->
<p>This is a paragraph.</p>
<!-- this is another comment-->
<h2>This is a Heading</h2>
</body>
</html>
HTMLOutput
This is a paragraph.This is a Heading
উপরের উদাহরণে, HTML কমেন্টগুলি কেবল কোডের ব্যাখ্যা প্রদান করতে ব্যবহৃত হয়েছে এবং এগুলি ওয়েবপেজে দেখা যাবে না।
উপসংহার ( Conclusion )
HTML এর বিভিন্ন Formatting ট্যাগ ব্যবহার করে আপনি আপনার ওয়েবপেজের টেক্সটকে আরও আকর্ষণীয় এবং পঠনযোগ্য করতে পারেন। প্রতিটি ট্যাগের নিজস্ব ব্যবহার এবং গুরুত্ব রয়েছে। এই ব্লগটি HTML এর Text Formatting সম্পর্কে একটি বিস্তারিত ধারণা প্রদান করে এবং আপনি কিভাবে এটি ব্যবহার করতে পারেন তা বোঝায়। আশা করি, এটি আপনাকে HTML এ Text Formatting সম্পর্কে আরও ভালোভাবে বুঝতে সাহায্য করেছে।
F.A.Q
HTML এ Text Formatting কী?
HTML এ Text Formatting বলতে টেক্সটকে বোল্ড, ইটালিক, আন্ডারলাইন ইত্যাদি রূপে প্রদর্শনের প্রক্রিয়াকে বোঝায়, যা ওয়েবপেজে কনটেন্টকে আরও আকর্ষণীয় এবং পঠনযোগ্য করে।
HTML এ বোল্ড টেক্সট তৈরি করার জন্য কোন ট্যাগটি ব্যবহৃত হয়?
HTML এ বোল্ড টেক্সট তৈরি করতে <b>
ট্যাগ ব্যবহার করা হয়।
<strong>
ট্যাগের কাজ কী?
<strong>
ট্যাগটি একটি টেক্সটকে জোরালো বা গুরুত্বপূর্ণ বোঝাতে ব্যবহার করা হয়। এটি বোল্ড আকারে টেক্সট প্রদর্শন করে।
ইটালিক টেক্সট তৈরি করতে HTML এ কোন ট্যাগটি ব্যবহার করা হয়?
HTML এ ইটালিক টেক্সট তৈরি করতে <i>
ট্যাগ ব্যবহার করা হয়।
<em>
ট্যাগ এবং <i>
ট্যাগের মধ্যে পার্থক্য কী?
<i>
ট্যাগ ইটালিক টেক্সট প্রদর্শন করে, যেখানে <em>
ট্যাগও ইটালিক প্রদর্শন করে কিন্তু এটি টেক্সটের উপর গুরুত্ব আরোপ করে।
কোন ট্যাগটি টেক্সটকে হাইলাইট করতে ব্যবহৃত হয়?
HTML এ টেক্সট হাইলাইট করতে <mark> ট্যাগ ব্যবহার করা হয়।
সাবস্ক্রিপ্ট টেক্সট তৈরি করতে কোন ট্যাগ ব্যবহার করা হয়?
HTML এ সাবস্ক্রিপ্ট টেক্সট তৈরি করতে <sub>
ট্যাগ ব্যবহার করা হয়, যা টেক্সটকে নিচের দিকে ছোট করে প্রদর্শন করে।
<sup> ট্যাগের কাজ কী?
<sup> ট্যাগটি টেক্সটকে সুপারস্ক্রিপ্ট আকারে প্রদর্শন করে, যা টেক্সটকে উপরের দিকে ছোট করে দেখায়।
HTML এ টেক্সট ফরম্যাটিং কেন গুরুত্বপূর্ণ?
HTML এ টেক্সট ফরম্যাটিং গুরুত্বপূর্ণ কারণ এটি কনটেন্টকে আরও পঠনযোগ্য এবং দৃষ্টি আকর্ষণীয় করে তোলে, যা ব্যবহারকারীদের অভিজ্ঞতাকে উন্নত করে।
HTML এ কিভাবে comment করতে হয় ?
<!– দিয়ে শুরু এবং –> দিয়ে শেষ। এই দুটি চিহ্নের মাঝে কমেন্টস লিখতে হবে।
Webpage এ কি Comment দেখা যায় ?
না, এটি মূলত কোডের মধ্যে নোটস, নির্দেশিকা, বা ব্যাখ্যা করতে ব্যবহৃত হয়|