HTML এর হাতেখড়ি (পর্ব – ২)

HTML Part 2

সিরিজের দ্বিতীয় পর্ব — টেক্সট ফরম্যাটিং।

আগের পর্বে আমরা শিখেছি HTML পেজের বেসিক স্ট্রাকচার — html, head, body। আজকের পর্বে আমরা শিখবো কীভাবে টেক্সটকে বিভিন্নভাবে ফরম্যাট করা যায় — Heading, Paragraph, Bold, Italic, এবং আরও কিছু গুরুত্বপূর্ণ ট্যাগ।

Heading ট্যাগ (h1 থেকে h6)

যেকোনো লেখার একটা শিরোনাম দিতে HTML-এ ৬ ধরনের heading ট্যাগ আছে — <h1> সবচেয়ে বড় ও গুরুত্বপূর্ণ, <h6> সবচেয়ে ছোট।

<h1>এটা প্রধান শিরোনাম</h1>
<h2>এটা সাব-হেডিং</h2>
<h3>এটা আরও ছোট হেডিং</h3>
<h4>চতুর্থ লেভেল</h4>
<h5>পঞ্চম লেভেল</h5>
<h6>ষষ্ঠ লেভেল</h6>

টিপস: একটা পেজে <h1> সাধারণত একবারই ব্যবহার করা উচিত — এটা পেজের মূল টাইটেলের জন্য। এটা SEO-র জন্যও গুরুত্বপূর্ণ, কারণ গুগল <h1> কে পেজের সবচেয়ে গুরুত্বপূর্ণ কন্টেন্ট হিসেবে ধরে নেয়।

Paragraph ট্যাগ

সাধারণ লেখা বা বাক্য লেখার জন্য ব্যবহার হয় <p> ট্যাগ:

<p>এটা একটা সাধারণ প্যারাগ্রাফ। এখানে যেকোনো বাক্য লেখা যায়।</p>
<p>এটা আরেকটা আলাদা প্যারাগ্রাফ।</p>

প্রতিটা <p> ট্যাগ নতুন একটা লাইন থেকে শুরু হয়, কারণ এটা একটা block-level element (এই কনসেপ্ট পরের পর্বে বিস্তারিত আসবে)।

Line Break ও Horizontal Line

<br> ট্যাগ দিয়ে একই প্যারাগ্রাফের ভেতরে জোর করে একটা নতুন লাইন তৈরি করা যায়:

<p>প্রথম লাইন<br>
দ্বিতীয় লাইন</p>

<hr> ট্যাগ দিয়ে একটা horizontal লাইন আঁকা যায়, সাধারণত কন্টেন্টের একটা অংশ থেকে আরেকটা অংশ আলাদা করতে ব্যবহার হয়:

<p>প্রথম সেকশনের লেখা</p>
<hr>
<p>দ্বিতীয় সেকশনের লেখা</p>

টিপস: <br> আর <hr> — দুটোই self-closing ট্যাগ, মানে এদের আলাদা closing tag লাগে না।

Bold ও Italic টেক্সট

টেক্সটকে গুরুত্বপূর্ণ দেখানোর জন্য bold আর italic করার দুই ধরনের ট্যাগ আছে:

<b>এটা bold টেক্সট</b>
<strong>এটাও bold টেক্সট</strong>

<i>এটা italic টেক্সট</i>
<em>এটাও italic টেক্সট</em>

দেখতে <b> আর <strong> একইরকম মনে হলেও এদের মধ্যে পার্থক্য আছে:

ট্যাগঅর্থ<b>শুধু visually bold — কোনো বাড়তি গুরুত্ব বোঝায় না<strong>টেক্সটটা গুরুত্বপূর্ণ, এটা semantic অর্থ বহন করে (স্ক্রিন রিডার এটা বুঝতে পারে)<i>শুধু visually italic<em>জোর দেওয়া (emphasis) বোঝায় — semantic অর্থ আছে

টিপস: চেষ্টা করো <strong> আর <em> ব্যবহার করতে, কারণ এগুলো SEO আর accessibility দুটোর জন্যই ভালো। <b> আর <i> শুধু তখনই ব্যবহার করো যখন সত্যিই কোনো semantic গুরুত্ব নেই, শুধু visual স্টাইল দরকার।

<span> ট্যাগ

<span> একটা inline element, যেটা কোনো টেক্সটের একটা নির্দিষ্ট অংশকে আলাদা করে চিহ্নিত করতে ব্যবহার হয় — সাধারণত পরে CSS দিয়ে সেই অংশে আলাদা স্টাইল দেওয়ার জন্য।

<p>আমার প্রিয় রং হলো <span>নীল</span>।</p>

এখন <span> নিজে থেকে কোনো ভিজ্যুয়াল পরিবর্তন আনে না — এটা শুধু একটা "হুক" তৈরি করে, যাতে পরে CSS/JS দিয়ে কাজ করা যায়। এটা পরের সিরিজে (CSS পর্বে) কাজে লাগবে।

Other প্রয়োজনীয় টেক্সট ট্যাগ

<mark>হাইলাইট করা টেক্সট</mark>
<small>ছোট টেক্সট</small>
<sub>subscript</sub>
<sup>superscript</sup>
<del>মুছে ফেলা টেক্সট</del>

উদাহরণ হিসেবে সায়েন্টিফিক নোটেশন লিখতে <sup> কাজে লাগে — যেমন H2O লিখতে H<sub>2</sub>O।

একটা সম্পূর্ণ উদাহরণ

আজকের শেখা সব ট্যাগ একসাথে দেখি:

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>টেক্সট ফরম্যাটিং উদাহরণ</title>
</head>
<body>
  <h1>আমার ব্লগ</h1>
  <h2>আজকের বিষয়</h2>
  <p>আজকে আমরা শিখবো <strong>HTML টেক্সট ফরম্যাটিং</strong>।
  এটা খুবই <em>গুরুত্বপূর্ণ</em> একটা বিষয়।</p>
  <hr>
  <p>মনে রাখবে:<br>
  ১. <mark>strong ও em ব্যবহার করো</mark><br>
  ২. অতিরিক্ত bold/italic এড়িয়ে চলো</p>
</body>
</html>

নিজে চেষ্টা করো

Exercise:

  1. পর্ব ১-এর ফাইলে ফিরে যাও (index.html)
  2. একটা <h2> যোগ করো "আমার শখ" নাম দিয়ে
  3. নিচে একটা প্যারাগ্রাফ লেখো, যেখানে একটা শব্দ <strong> আর একটা শব্দ <em> দিয়ে হাইলাইট করো
  4. একটা <hr> দাও, তারপর আরেকটা সেকশন লেখো

পরের পর্বে যা থাকছে

পর্ব ৩-এ আমরা শিখবো Links ও Images — <a> ট্যাগ, absolute vs relative path, এবং <img> ট্যাগ কীভাবে ব্যবহার করতে হয়, উদাহরণসহ।

প্রশ্ন থাকলে কমেন্টে জানাতে পারো।

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম