ওয়েব ডিজাইন শেখা: পর্ব ০৪

টেক্সট ফরম্যাটিং সম্পর্কিত ট্যাগসমূহ

সর্বশেষ আপডেট:

এইচটিএমএল-এ বেশ কিছু টেক্সট ফরম্যাটিং ট্যাগ রয়েছে। অর্থাৎ এই ট্যাগগুলো ব্যবহার করে কোনো টেক্সট বোল্ড, ইটালিক, আন্ডারলাইন ইত্যাদি করা যায়। তবে এইচটিএমএল-এর সর্বশেষ ভার্সন HTML5 এ বেশ কিছু ট্যাগের সংজ্ঞা (Definition) বদলে গিয়েছে। নতুন কিছু ট্যাগ যোগ করা হয়েছে, কয়েকটি ট্যাগ Deprecated বা সেকেলে ঘোষণা করা হয়েছে।

ওয়েব ডিজাইন টিউটোরিয়াল সিরিজের সকল পর্ব এখানে দেখুন।

এ বিষয়গুলো মাথায় রেখে সবচেয়ে উপযুক্ত ট্যাগ ব্যবহার করা উচিত। যথাযথ কোনো ট্যাগ পাওয়া না গেলে <span> ট্যাগ ব্যবহার করে সিএসএস (CSS)-এর মাধ্যমে টেক্সট ফরম্যাটিং করতে হবে। CSS সম্পর্কে পরবর্তীতে আলোচিত হবে, ইনশা-আল্লহ্।

ট্যাগডিফল্ট আউটপুটকী বুঝায় / ব্যবহার
<h1> থেকে <h6> পর্যন্তমোটা। ক্রমানুযায়ী ফন্টের আকার।হেডিং বুঝাতে ব্যবহৃত হয়। মোট ছয় ধাপের হেডিং রয়েছে। যথা- <h1>, <h2>, <h3>, <h4>, <h5> ও <h6> । এর মধ্যে সর্বোচ্চ পর্যায়ের হেডিং বুঝাতে <h1> এবং সর্বনিম্ন হেডিং বুঝাতে <h6> ব্যবহৃত হয়। হেডিংয়ের পর্যায় অনুযায়ী ফন্টের আকার বড় থেকে ছোটো হতে থাকে।
<p> প্যারাগ্রাফ বুঝায়
<basefont> সেকেলে (Deprecated) । ডিফল্ট ফন্ট, ফন্টের আকার, রং ইত্যাদি বুঝাতে।
বিকল্প: CSS ব্যবহার করতে হবে।
<font> সেকেলে (Deprecated) । কোনো টেক্সটের ফন্ট, আকার, রং ইত্যাদির জন্য।
বিকল্প: CSS ব্যবহার করতে হবে।
<center> সেকেলে (Deprecated) । টেক্সটকে center aligned করতে।
বিকল্প: CSS ব্যবহার করতে হবে।
<strong>বোল্ড/মোটাগুরুত্বপূর্ণ টেক্সট বুঝাতে ব্যবহৃত হয়।
<b>বোল্ড/মোটাসৌন্দর্য বৃদ্ধির লক্ষ্যে গুরুত্বপূর্ণ নয় এমন টেক্সট মোটা করতে ব্যবহৃত হয়।
<i>ইটালিক/বাাঁকাবিকল্প কণ্ঠ বা মেজাজ বুঝাতে (alternate voice or mood)
<em>ইটালিক/বাাঁকাজোরালো বা গুরুত্বপূর্ণ (Emphasized) টেক্সট বুঝাতে ব্যবহৃত হয়।
<u>আন্ডারলাইনঅব্যক্ত কোনো টেক্সট বুঝাতে
<sub>লেখার নিচেসাবস্ক্রিপ্ট টেক্সট
<sup>লেখার উপরেসুপারস্ক্রিপ্ট টেক্সট
<big> সেকেলে (Deprecated)। টেক্সট-এর আকার বড়ো করা।
বিকল্প: CSS ব্যবহার করতে হবে।
<small>ছোটো আকারটেক্সট-এর আকার ছোটো করা।
<del>স্ট্রাইকথ্রোকোনো টেক্সট মুছে ফেলা হয়েছে বুঝাতে ব্যবহৃত হয়। স্ট্রাইকথ্রো বা শব্দের মাঝে দাগ হবে।
<s>স্ট্রাইকথ্রোঅশুদ্ধ বা অপ্রাসঙ্গিক কোনো টেক্সট বুঝাতে ব্যবহৃত হয়। স্ট্রাইকথ্রো বা শব্দের মাঝে দাগ হবে।
<strike>স্ট্রাইকথ্রোসেকেলে (Deprecated)। স্ট্রাইকথ্রো বা শব্দের মাঝে দাগ হবে।
বিকল্প: <del> অথবা <s> এর মধধ্যে যেটা বেশি প্রযোজ্য, সেটা ব্যবহার করতে হবে।
<mark> টেক্সট মার্ক/হাইলাইট করতে ব্যবহৃত হয়।
<code>মনোটাইপকম্পিউটারের কোড বুঝায়
<kbd> কিবোর্ড ইনপুট বুঝাতে ব্যবহৃত হয়।
<pre>মনোটাইপPreformatted টেক্সট বুঝাতে
<tt>মনোটাইপসেকেলে (Deprecated) । টেলিটাইপ/মনোস্পেস টেক্সট বুঝায়।
বিকল্প: <kbd>, <var>, <code>, <samp> অথবা CSS ব্যবহার করতে হবে। (যেটা প্রযোজ্য)
<blockquote> কোটেশন বুঝায়
<q> সংক্ষিপ্ত কোটেশন বুঝায়
<br>পরের লাইনলাইন ব্রেক বুঝায়। <br> এর পরের টেক্সট আউটপুটে পরের লাইনে চলে যাবে। এটি একটি Self-closing ট্যাগ। অর্থাৎ এর কোনো Ending ট্যাগ নেই। তাই <br> কে <br /> দিয়েও লেখা যায়।
<wbr> লম্বা কোনো শব্দকে এক লাইনে জায়গা দেয়া সম্ভব না হলে, কোন্ জায়গায় তা ভেঙ্গে পরের লাইনে সরবে তা বুঝাতে ব্যবহৃত হয়। এটিও একটি Self-closing ট্যাগ। অর্থাৎ এর কোনো Ending ট্যাগ নেই। তাই <wbr> কে <wbr /> দিয়েও লেখা যায়।
<hr>লম্বা দাগঅনুভূমিক দাগ (Horizontal Rule) তৈরি করে। এটিও একটি Self-closing ট্যাগ। অর্থাৎ এর কোনো Ending ট্যাগ নেই। তাই <hr> কে <hr /> দিয়েও লেখা যায়।

টেক্সট ফরম্যাটিং ট্যাগের উদাহরণ:

হেডিং:

প্যারাগ্রাফ, বোল্ড, ইটালিক, আন্ডারলাইন ইত্যাদি:

লাইন ব্রেক:

সাবস্ক্রিপ্ট ও সুপারস্ক্রিপ্ট:

স্ট্রাইকথ্রো, হাইলাইট ও ইনলাইন কোটেশন:

ব্লক কোট:

অন্যান্য কিছু ট্যাগ:

মন্তব্য করুন

আপনার ই-মেইল এ্যাড্রেস প্রকাশিত হবে না। * চিহ্নিত বিষয়গুলো আবশ্যক।