এইচটিএমএল বিন্যাস (HTML Formatting)
Formatting শব্দের বাংলা অর্থ বিন্যাস বা সজ্জা। এইচটিএমএল ফর্মেটিং বলতে সাধারণত টেক্সট ফর্মেটিং বুঝানো হয়। আমরা সবাই কম বেশি Microsoft Word এর সাথে পরিচিত। জীবনে কোন না কোন সময় আমরা Microsoft Word নিয়ে কাজ করেছি বা মাইক্রোসপ্টের এই সফটওয়্যার নিয়েই আমরা আমাদের কম্পিউটার কীবোর্ড চালাতে শিখেছি। এই Microsoft Word এ টেক্সট নিয়ে আমরা অনেক কিছু করেছি। যেমনঃ- কোন একটি টেক্সটকে মোটা করা, একটু বাঁকা করা, টেক্সটের নিচে আন্ডার লাইন দেওয়া, টেক্সটকে মনের মত করে ডিজাইন করা, ছোট করা, বড় করা, অথবা বিশেষ কোন টেক্সটকে হাল্কা রঙ দিয়ে চিহ্নিত করা, খেলার ছলে এরকম অনেক কিছুই আমরা করেছি। সেখানে যা করেছি এইচটিএমএলে কোডের মাধ্যমে সেই একই কাজ করার নাম HTML Text Formatting.
যেহেতু ফর্মেটিং বলতে সাজ সজ্জাকে বুঝানো হয়, সেহেতু সিএসএস দিয়েও এমন ফর্মেটিং করা যায়। তবে, এই কাজ গুলি খুব ছোট কিন্তু বহুল ব্যবহৃত। এগুলিকে সিএসএস দিয়ে করতে গেলে হয়তো ইনলাইন ষ্টাইল করতে হবে অথবা ক্লাস বা আইডি বানিয়ে ষ্টাইলশিটে কোড করে ডিজাইন করতে হবে। এতে করে কোড এবং সময় দুটো'ই বেশি হয়ে যায়। কিন্তু এইচটিএমএলে মাত্র ছোট্ট একটি ট্য্যাগের মাধ্যমে এটা অতি সহজে হয়ে যায় বলেই এই ট্যাগ গুলোকে ফর্মেটিং ট্যাগ বলা হয়। এসব ট্যাগের মাধ্যমে শুধুমাত্র টেক্সটকেই ফর্মেটিং করা হয়। তাই এর নাম টেক্সট ফর্মেটিং। নিচে এইচটিএমএল ফর্মেটিং ট্যাগ ও ব্যবহার টেবিল আকারে দেখালাম। এর পরে কিছু উদাহরণ দিলাম। বিস্তারিত জানতে ভিডিও টিউটোরিয়ালটি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title> HTML Text Formatting </title>
</head>
<body>
<p>Here's a <strong> Important </strong> Text </p>
<p>Here's a <mark> Marked </mark> Text </p>
<p>Here's a <del> Deleted </del> Text </p>
</body>
</html>
ফলাফল
টেক্সট ফর্মেটিং ট্যাগ সমুহ
| ট্যাগ সমুহ | বর্ণনা |
|---|---|
| <b> | এটা দ্বারা টেক্সটকে মোটা বা গাঢ় করা হয় |
| <del> | টেক্সটকে মুচে দেওয়া বা কেটে দেওয়া হয়েছে বুঝানোর জন্য ব্যবহৃত হয়। |
| <em> | Emphasized বা গুরুত্বপূর্ণ টেক্সট বুঝায়। |
| <i> | হাল্কা বাঁকা ইটালিক টেক্সট এর জন্য ব্যবহার করা হয়। |
| <ins> | Inserted বা সন্নিবেশিত টেক্সট বুঝানো হয়। |
| <mark> | কোন টেক্সটকে বিশেষ ভাবে চিহ্নিত করার জন্য ব্যবহার করা হয়। |
| <small> | অপেক্ষাকৃত ছোট টেক্সট বা টেক্সটকে ছোট দেখাতে ব্যবহার করা হয়। |
| <strong> | বিশেষ বা গুরুত্বপূর্ণ টেক্সট বুঝানোর জন্য ব্যবহার করা হয়। |
| <sub> | Subscript বা নিম্নে লিখনযুক্ত টেক্সট বুঝানো হয়। |
| <sup> | Superscript বা শীর্ষে লিখনযুক্ত টেক্সট বুঝানো হয়। |
<b> এলিমেন্ট
এই এলিমেন্ট ব্যবহার করে একটি টেক্সটকে শুধুমাত্র মোটা বা গাঢ় করা হয়। → Bold
<p> ইহা নরমাল টেক্সট। <b> ইহা মোটা টেক্সট। </b> </p>
<p> Normal Text. <b> Bold Text. </b> </p>
<del> এলিমেন্ট
খাতায় কোন কিছু লিখার সময় কোন একটি লেখা ভুল হলে সেটা আমরা কেটে দিই। ঠিক তেমনি এই এলিমেন্ট ব্যবহার করে একটি টেক্সটকে কেটে দেওয়া হয়। বা এই টেক্সটটিকে মুচা হয়েছে বলে বুঝানো হয়। → Deleted Text
<h3>This Is a <del> Deleted </del> Text. </h3>
<h4> এই টেক্সটটি <del> কেটে দিলাম </del> ভুল হয়েছিল। </h4>
<em> এলিমেন্ট
<em> দিয়ে Emphasized বা জোরালো বুঝানো হয়। অর্থাৎ এই এলিমেন্ট ব্যবহার করে কোন একটি টেক্সটকে গুরুত্বপূর্ণ বুঝানো হয়ে থাকে। → Emphasized Text
<h4>This Is a <em> Emphasized </em> Text. </h4>
<h3> এটা খুবই <em> গুরুত্বপূর্ণ </em> টেক্সট </h3>
<i> এলিমেন্ট
<i> দিয়ে Italic বা একটু বাঁকানো টেক্সট বুঝানো হয়। অনেক সময় কিছু টেক্সটকে আলাদা ভাবে বুঝানোর জন্য আমরা এই এলিমেন্ট ব্যবহার করি। → Italic Text
<p>This Is a <i> Italic </i> Text. </p>
<p> সোজা পথে যাও <i> বাঁকা পথে </i> যেওনা </p>
<ins> এলিমেন্ট
<ins> দিয়ে Inserted Text বা সন্নিবেশিত টেক্সট বুঝানো হয়। এই এলিমেন্ট ব্যবহার করে একটি টেক্সটের নিচে লাইন দেওয়া হয়। → Inserted Text
<h4>This Is a <ins> Inserted </ins> Text. </h4>
<h3> আমার প্রিয় রঙ <ins> নীল </ins> এবং <ins> সাদা </ins> </h3>
<mark> এলিমেন্ট
<mark> এলিমেন্ট ব্যবহার করে একটি টেক্সটকে অন্য টেক্সট থেকে আলাদা করার জন্য টেক্সটের ব্যকগ্রাউন্ডে হলুদ রঙ দিয়ে চিহ্নিত করা হয়। → Marked Text
<h4>This Is a <mark> Marked </mark> Text. </h4>
<h3> বাংলাদেশ একটি <mark> স্বাধীন </mark> রাষ্ট </h3>
<small> এলিমেন্ট
<small> এলিমেন্ট ব্যবহার করে যে কোন স্থানে একটি টেক্সটকে অন্য টেক্সটের তুলনায় কিছুটা ছোট করা হয়। → Small Text
<h2>Here Is a <small> Small </small> Text </h2>
<h3>এখানে একটি <small> ছোট্ট </small> টেক্সট আছে </h3>
<strong> এলিমেন্ট
<strong> এলিমেন্ট বহুল ব্যবহৃত একটি এলিমেন্ট। মাঝে মাঝে কিছু টেক্সটকে গুরুত্বপূর্ণ কিছু বুঝানোর জন্য টেক্সটকে একটু মোটা আকারে দেখাতে হয় তখন এমন অবস্থায় এই এলিমেন্ট ব্যবহৃত হয়। → Strong Text
<p>Here Is a <strong> Strong </strong> Text </p>
<p>এখানে একটি <strong> গুরুত্বপূর্ণ </strong> টেক্সট আছে </p>
<sub> এলিমেন্ট
<sub> Subscript বা নিম্নে লিখনযুক্ত টেক্সট বুঝানো হয়ে থাকে। এই এলিমেন্ট টেক্সটকে লাইন থেকে কিছুটা নিচে নিয়ে আসে। → Subscript Text
<p>অক্সিজেনের রাসায়নিক সংকেত হলো O<sub>2</sub></p>
<p>নাইট্রোজেনের রাসায়নিক সংকেত হলো N<sub>2</sub></p>
<sup> এলিমেন্ট
<sup> Superscript বা শীর্ষে লিখনযুক্ত টেক্সট বুঝানো হয়ে থাকে। এই এলিমেন্ট টেক্সটকে লাইন থেকে কিছুটা উপরে নিয়ে যায়। → Superscript Text
<h4>গনিত সূত্র</h4>
<p>a<sup>2</sup> + b<sup>2</sup> = (a - b)<sup>2</sup> + 2ab</p>
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন