HTML-এ বোল্ড টেক্সট তৈরির জন্য আপনি <b> ট্যাগ, <strong> ট্যাগ, অথবা CSS-এ font-weight ব্যবহার করতে পারেন।
যখন আপনি একটি ওয়েব পেজ ডিজাইন করছেন, আপনি টেক্সটের একটি নির্দিষ্ট অংশকে দাবিদার করতে চাইতে পারেন।
উদাহরণস্বরূপ, আপনার কাছে একটি নতুন প্রযুক্তি কীভাবে ব্যবহার করবেন তার নির্দেশাবলীর একটি তালিকা আছে, এবং সেখানে একটি সিকিউরিটি নোটিস আছে যা ব্যবহারকারীর পড়া অত্যন্ত গুরুত্বপূর্ণ। আপনি সেই নোটিসকে দাবিদার করতে চাইতে পারেন যাতে ব্যবহারকারী নির্দেশাবলী পড়ার সময় সেটি মিস না করেন।
HTML-এ, কোডাররা একটি নির্দিষ্ট টেক্সটকে বোল্ড করার জন্য বিল্ট-ইন ফাংশন ব্যবহার করতে পারেন। এই টিউটোরিয়ালে, আমরা HTML-এ টেক্সট বোল্ড করার তিনটি সবচেয়ে সাধারণ পদ্ধতি ভাঙে দেখাব: <b> ট্যাগ, <strong> ট্যাগ, এবং font-weight Cascading Style Sheets (CSS) প্যারামিটার।
HTML <b> ট্যাগ
HTML-এ ডেভেলপাররা বোল্ড টেক্সট তৈরির সবচেয়ে সাধারণ পদ্ধতি হলো <b> ট্যাগ ব্যবহার করা। <b> ট্যাগ একটি এলিমেন্ট তৈরি করে যা একটি HTML ওয়েবপেজে বোল্ড টেক্সট প্রতিনিধিত্ব করে। উদাহরণস্বরূপ, একটি অনলাইন আর্টিকেলে সাবহেডিং হাইলাইট করতে <b> ট্যাগ ব্যবহার করা যায়।
HTML <b> ট্যাগের একটি উদাহরণ:
<b>This text is bold</b>
এটাই সব। আপনি যদি একটি প্যারাগ্রাফের নির্দিষ্ট অংশকে বোল্ড করতে চান কিন্তু বাকি অংশটি सामान्य রাখতে চান, তবে নিচের মতো একটি সেকশনে <b> ট্যাগকে এনক্লোজ করতে পারেন:
<p>This text is not bold. <b>But this text is bold!</b></p>
আমাদের কোডের ফলাফল:
৮১% অংশগ্রহণকারী বলেছেন বুটক্যাম্পে অংশ নেওয়ার পর তাদের টেক জব প্রস্পেক্টস সম্পর্কে অধিক আত্মবিশ্বাসী অনুভব করছেন। আজই একটি বুটক্যাম্পের সাথে ম্যাচ হোন।
গড় বুটক্যাম্প স্নাতক ক্যারিয়ার ট্রানজিশনে ছয় মাস কম ব্যয় করেছেন, বুটক্যাম্প শুরু থেকে প্রথম চাকরি পাওয়া পর্যন্ত।
আমাদের প্যারাগ্রাফের শুরুতে টেক্সট সাধারণ দেখাচ্ছে, এবং আমাদের <b> ট্যাগের ভেতরের টেক্সট বোল্ড হয়ে গেছে।
HTML <strong> ট্যাগ
অতিরিক্তভাবে, আপনি <strong> ট্যাগ ব্যবহার করে HTML-এ বোল্ড টেক্সট তৈরি করতে পারেন। <strong> ট্যাগ <b> ট্যাগের মতোই কাজ করে, একমাত্র পার্থক্য: strong ট্যাগ ইঙ্গিত দেয় যে এর বিষয়বস্তু বিশেষ মনোযোগ আপেক্ষা করে। <strong> ট্যাগ ব্যবহারের একটি উদাহরণ:
<p>Your username for your new computer is <b>JohnAppleseed</b></p> <p><strong>Attention!</strong> You must change your password after logging in.</p>
আমাদের কোড নিচের ফলাফল ফেরত দেয়:
আপনি দেখতে পাচ্ছেন, <b> ট্যাগটি পাঠকের পড়ার জন্য উপযোগী টেক্সট হাইলাইট করতে ব্যবহৃত হয়েছে। <strong> ট্যাগটি ইঙ্গিত দিয়েছে যে Attention শব্দটিকে পাঠকের বিশেষ মনোযোগ দেওয়া উচিত। তবুও, এই পার্থক্য ছাড়া, <b> এবং <strong> ট্যাগগুলো একই।
CSS font-weight প্রপার্টি
<strong> এবং <b> ট্যাগগুলো ভ্যানিলা HTML এলিমেন্টে ব্যবহার হয় যাতে বোঝানো যায় টেক্সটটি গুরুত্বপূর্ণ এবং পড়া উচিত। তবে, একটি CSS প্রপার্টিও আছে যা আমাদের টেক্সট কীভাবে দেখাবে সেটির ওপর আরও নিয়ন্ত্রণ দেয়: font-weight।
font-weight কোডারদের নির্ধারণ করতে দেয় টেক্সটের একটি নির্দিষ্ট অংশ কতটুকু ভারী বা হালকা—অর্থাৎ কতটুকু বোল্ড—দिखাবে। thick ট্যাগ लगी একটি প্যারাগ্রাফে font-weight ট্যাগ প্রয়োগের একটি উদাহরণ:
HTML:
<p>This is an example paragraph.</p> <p class="thick">This is a bold example paragraph.</p>
CSS:
p.thick { font-weight: 900; }
আমাদের কোড নিচের ফলাফল ফেরত দেয়:
আমাদের উদাহরণে, আমরা thick নামে একটি ক্লাস নির্ধারণ করেছি, যা আমাদের টেক্সটের font-weight প্রপার্টিকে ৯০০ সেট করে, অর্থাৎ যেখানে আমরা thick ক্লাসটি রেফারেন্স করব সেখানে টেক্সট বোল্ড দেখাবে। দ্রষ্টব্য, আমরা "৯০০" সংখ্যাটি কাস্টমাইজ করতে পারি, এই নির্ভর করে আমরা আমাদের টেক্সটকে হালকা বা আরও বোল্ড দেখাতে চাই কিনা।
বিকল্পভাবে, আমরা আমাদের font-weight style font-weight bold অ্যাট্রিবিউট ব্যবহার করে নির্দিষ্ট করতে পারি, যেন:
<p>This is an example paragraph.</p> <p style="font-weight:900;">This is a bold example paragraph.</p>
উপসংহার
বোল্ড টেক্সট HTML-এ টেক্সট ফরম্যাটিংয়ের একটি গুরুত্বপূর্ণ অংশ। আপনি যদি টেক্সটের একটি নির্দিষ্ট লাইন বা কয়েক শব্দের প্রতি মনোযোগ আকর্ষণ করতে চান, তবে আপনি সেটি বোল্ড করতে চাইতে পারেন। এই টিউটোরিয়ালে, আমরা টেক্সট বোল্ড করার তিনটি প্রধান পদ্ধতি ভাঙে দেখিয়েছি: <b>, <strong>, এবং font-weight। এখন আপনি একজন এক্সপার্টের মতো বোল্ড টেক্সট তৈরি করতে পারবেন!
