HTML (Hypertext Markup Language) ওয়েব পেজের কাঠামো এবং কন্টেন্ট সাজানোর জন্য ব্যবহৃত একটি ভাষা। HTML এ বিভিন্ন ট্যাগ ব্যবহৃত হয়, যার মাধ্যমে বিভিন্ন ধরনের কন্টেন্ট যেমন টেক্সট, চিত্র, লিঙ্ক ইত্যাদি ওয়েব পেজে সংযুক্ত করা হয়। এখানে কিছু বেসিক HTML ট্যাগ সম্পর্কে আলোচনা করা হলো।
1. <html> ট্যাগ
<html> ট্যাগ একটি HTML ডকুমেন্টের শুরুর ট্যাগ। এটি পুরো HTML ডকুমেন্টকে আবদ্ধ করে রাখে। HTML ডকুমেন্টের সব কন্টেন্ট এর মধ্যে থাকা উচিত।
উদাহরণ:
<html>
<!-- HTML content goes here -->
</html>
2. <head> ট্যাগ
<head> ট্যাগটি HTML ডকুমেন্টের মেটাডেটা রাখার জন্য ব্যবহৃত হয়। এখানে ডকুমেন্টের শিরোনাম (title), স্টাইল শিট, স্ক্রিপ্ট এবং মেটা ইনফরমেশন থাকে। ব্যবহারকারীরা সাধারণত <head> ট্যাগের কন্টেন্ট দেখতে পায় না।
উদাহরণ:
<head>
<title>My First Web Page</title>
<meta charset="UTF-8">
</head>
3. <body> ট্যাগ
<body> ট্যাগে ওয়েব পেজের দৃশ্যমান কন্টেন্ট থাকে, যা ব্যবহারকারীরা দেখতে পায়। এখানে সাধারণত প্যারাগ্রাফ, চিত্র, লিঙ্ক, তালিকা ইত্যাদি উপাদান রাখা হয়।
উদাহরণ:
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
</body>
4. <h1> থেকে <h6> ট্যাগ
<h1> থেকে <h6> ট্যাগগুলো HTML ডকুমেন্টের হেডিং তৈরি করতে ব্যবহৃত হয়। <h1> সবচেয়ে বড় হেডিং এবং <h6> সবচেয়ে ছোট হেডিং। এই ট্যাগগুলো ব্যবহার করে কন্টেন্টের প্রধান এবং উপশিরোনাম তৈরি করা হয়।
উদাহরণ:
<h1>This is a main heading</h1>
<h2>This is a sub-heading</h2>
<h3>This is a smaller heading</h3>
5. <p> ট্যাগ
<p> ট্যাগটি প্যারাগ্রাফ তৈরি করার জন্য ব্যবহৃত হয়। প্যারাগ্রাফের মধ্যে লেখা স্বাভাবিকভাবে প্রদর্শিত হয় এবং এটি পরবর্তী প্যারাগ্রাফ থেকে আলাদা করে রাখা হয়।
উদাহরণ:
<p>This is a paragraph of text.</p>
6. <a> (Anchor) ট্যাগ
<a> ট্যাগ ব্যবহার করে লিঙ্ক তৈরি করা হয়। এটি ব্যবহারকারীদের অন্য ওয়েব পেজে বা ওয়েবসাইটে রিডিরেক্ট করতে সাহায্য করে।
উদাহরণ:
<a href="https://www.example.com">Visit Example Website</a>
এখানে href অ্যাট্রিবিউট দিয়ে লিঙ্কের ঠিকানা (URL) নির্ধারণ করা হয়।
7. <img> (Image) ট্যাগ
<img> ট্যাগ দিয়ে ওয়েব পেজে চিত্র (Image) এম্বেড করা হয়। এটি একটি সেলফ-ক্লোজিং ট্যাগ, যার মাধ্যমে চিত্রের সোর্স (src) এবং আল্টারনেটিভ টেক্সট (alt) দেয়া হয়।
উদাহরণ:
<img src="image.jpg" alt="Description of Image">
8. <ul>, <ol>, এবং <li> ট্যাগ
<ul> (unordered list) এবং <ol> (ordered list) ট্যাগগুলি তালিকা তৈরি করতে ব্যবহৃত হয়, এবং <li> (list item) ট্যাগটি তালিকার আইটেম নির্ধারণ করে।
<ul>: আনঅর্ডারড (unordered) তালিকা তৈরি করে, যেখানে প্রতিটি আইটেম বুলেট পয়েন্টের মাধ্যমে প্রদর্শিত হয়।<ol>: অর্ডারড (ordered) তালিকা তৈরি করে, যেখানে প্রতিটি আইটেম একটি সুনির্দিষ্ট ক্রম অনুসারে প্রদর্শিত হয়।
উদাহরণ:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
9. <div> এবং <span> ট্যাগ
<div>: একটি ব্লক-লেভেল উপাদান যা সাধারণত কন্টেন্টের গ্রুপিং এবং লেআউট স্টাইলিংয়ের জন্য ব্যবহৃত হয়।<span>: একটি ইনলাইন উপাদান যা সাধারণত ছোট অংশের কন্টেন্ট বা টেক্সট গ্রুপ করতে ব্যবহৃত হয়।
উদাহরণ:
<div>
<h2>This is a heading inside a div</h2>
<p>Some content inside a div</p>
</div>
<span>This is inline text inside a span tag.</span>
10. <br> (Break) ট্যাগ
<br> ট্যাগটি একটি লাইনের ব্রেক তৈরি করতে ব্যবহৃত হয়, যাতে এক প্যারাগ্রাফ বা বাক্যকে অন্য লাইনে রাখা যায়। এটি সেলফ-ক্লোজিং ট্যাগ।
উদাহরণ:
<p>This is the first line.<br>This is the second line.</p>
সারসংক্ষেপ
HTML এর বেসিক ট্যাগস হল ওয়েব পেজের কাঠামো তৈরি করার জন্য প্রাথমিক উপাদান। <html>, <head>, <body>, <h1>, <p> ইত্যাদি ট্যাগগুলোর মাধ্যমে ওয়েব পেজের কন্টেন্ট সঠিকভাবে সাজানো হয়। এই ট্যাগগুলোর মাধ্যমে আপনি সহজেই ওয়েবসাইটের মৌলিক ডিজাইন তৈরি করতে পারবেন। HTML তে আরও অনেক ট্যাগ রয়েছে, কিন্তু এগুলি সবচেয়ে বেসিক এবং প্রাথমিক পর্যায়ে ব্যবহৃত ট্যাগ।
Read more
