HTML Headings

Headings গুলো  <h1> থেকে <h6> tags দ্বারা বর্ননা করা হয়। Headings কি তা আমরা সবাই বুঝি। বিভিন্ন হেডলাইন দেওয়ার জন্য এই Heading Tag গুলো ব্যবহার করা হয়।

<h1> Tag দ্বারা সবছেয়ে গুরুত্ত্বপূর্ন Headings দেওয়া হয়। এর পর ক্রমানুসারে <h2>… <h6>  ব্যবহার করা হয়।

নিছে কোন ট্যাগের জন্য কেমন আউটপুট দিবে তার একটি উদাহরন দিলাম। কোড গুলো একটা HTML ফাইলে লিখে তারপর ব্রাউজারে দেখুন।

<html>
<body>
<h1>This is Heading 1</h1>

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

<h5>This is Heading 5</h5>

<h6>This is Heading 6</h6>

</body>

</html>

ডেমো

Heading এর গুরুত্ত্বঃ

ভিজিটর এবং সার্চ ইঞ্জিন দুই জনের কাছেই Heading গুরুত্ত্ব অনেক। আমরা যেমন হেডলাইন দেখেই পছন্দ করি  কোন লেখা  আমার জন্য নাকি আমার জন্য না। তেমনি সার্চ ইঞ্জিন ও বুঝে নেয় কোন লেখা  কিসের জন্য। ওযেব পেজের Heading দেখেই সার্চ ইঞ্জিন আমাদের পেইজ গুলো ইনডেক্স করে। যদি ঠিক মত ইনডেক্স না হয় তাহলে সার্চ রেজাল্টে ও আপনার সাইট ঠিক মত দেখাবে না। তাহলে এবার তো বুঝতেই পারছেন হেডিং এর  গুরুত্ত্ব কতটুকু। আপনার ওয়েব পেজের কি নিয়ে লিখবেন বা কি বর্ননা করছেন তা <h1> ট্যাগের মধ্যে লিখুন। এবার এর চেয়ে কম গুরুত্ত্ব পূর্ন গুলো <h2> এর মধ্যে লিখুন। এভাবে ক্রমে <h6>  Tag ব্যবহার করুন।

HTML Lines

আড়াআড়ি ভাবে কোন কোন লাইন দেওয়ার জন্য <hr /> ট্যাগ ব্যবহার করা হয়। নিছের কোড গুলো এইচটিএমএল ফাইলে লিখে তারপর ব্রাউজারে দেখুনঃ

<html>
<body>
<h1>This is a Heading </h1>
</hr>
<p>This is a paragraph</p>

</body>
</html>

এখানে আমাদের হেডিং এর নিছে একটি লাইন দেওয়ার জন্য <hr /> ট্যাগ ব্যবহার করছি।

HTML Comments

কোডিং করার সময় Comments খুবি ধরকারী। যখন অনেক বড় কোড লিখব তখন কোথায় কি লিখছি তা তো আর মনে থাকবে না। আর কোন কোড দিয়ে কি কাজ করছি তাও মনে থাকে না। তাই সহজে কোড গুলো পড়ার এক মাত্র উপায় হচ্ছে কমেন্ট। কমেন্ট গুলো ব্রাউজারে দেখা যাবে না। কিন্তু কমেন্টের গুরুত্ত্ব অনেক। ভবিষ্যৎ এ যখন আমরা আমাদের কোড পড়ব, তখব কমেন্ট দেখেই বুঝব কোন কোডটা কেন লিখেছি।

নিচের মত করে এইচটিএমএল এ কমেন্ট গুলো লেখা হয়।

<!– This is a comment –>

উদাহরনঃ

<html>
<body>
<!-- this is a html comment-->
<h1>This is a Heading </h1>
</hr>
<p>This is a paragraph</p>
</body>
</html>

HTML Paragraphs

একটি পেজে অনেক গুলো লেখা থাকতে পারে। লেখা গুলো কে প্যারা আকারে লেখতে হয়। আর প্যারা তৈরি করার জন্য Paragraphs ট্যাগ বা p ট্যাগ ব্যবহার করা হয়। যা নিচের মত করে লেখা হয়ঃ

<p>This is a paragraph</p>

<html>
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is third paragraph</p>
</body>
</html>

HTML5 এ প্যারাগ্রাপে End ট্যাগ ব্যবহার না করলে ও সমস্যা হয় না।

কিন্তু End ট্যাগ ব্যবহার করা ভালো।

HTML Line Breaks

একটি প্যারাগ্রাপে অনেক গুলো লাইন থাকতে পারে।  প্রয়োজন মত লাইন দিতে Line Break ব্যবহার করা হয়। যে কোন লেখা মাঝে

<br> or <br /> ট্যাগ বসালেই একটি নতুন লাইন যোগ হবে।

উদাহরনঃ

<html>
<body>
<p>This is a paragraph with line break </br> This will show in second line </p>
</body>
</html>

HTML Text Formatting

• আপনি যে লেখা গুলো লিখবেন সে গুলো একটিকে এক এক ভাবে লেখার প্রয়জন হতে পারে। আর ভিবিন্ন ভাবে লেখার জন্য ব্যবহৃত হয় Text Formatting  Tag গুলো।
• <b> Tag দিয়ে কোন লেখাকে Bold করার জন্য ব্যবহৃত হয়।
• <strong> ট্যাগ দিয়ে কোন লেখাকে অন্য লেখা গুলো থেকে আলাদা করার জন্য ব্যবহৃত হয়।
• <big> ট্যাগ দিয়ে কোন বাক্য বা শব্দ বড় করার জন্য ব্যবহৃত হয়।
• ইতালিক ভাবে লেখার জন্য <i> ট্যাগ ব্যবহার করা হয়।
• emphasize করার জন্য <em> ট্যাগ ব্যবহার করা হয়।
• কোন কোড লেখার জন্য <code> ট্যাগ ব্যবহার করা হয়।
• subscript জন্য  <sub> এবং superscript এর জন্য <sup> ট্যাগ ব্যবহার করা হয়।

উদাহরন কোড গুলোঃ

<html>
<body>
<p>This is a <b>paragraph</b> with line break </br> This will show in second line </p>
<p><b>This is a paragraph with bold letters</b> </p>
<p><big>Big</big> tag demo</p>
<p><big>emphasize</big> tag demo</p>
<p> (a+b)<sup>2</sup> = a <sup>2</sup> + 2ab + b<sup>2</sup></p>
</body> 
</html>
 

ডেমো

ধন্যবাদ সবাইকে। পরের পর্বঃ

HTML শিখুন HTML5 সহ [পর্ব-6]