HTML (HyperText Markup Language) হল ওয়েব পেজ তৈরির জন্য ব্যবহৃত একটি মার্কআপ ভাষা। HTML এর মাধ্যমে আমরা ওয়েব পেজের কাঠামো, কনটেন্ট, এবং বিভিন্ন উপাদান যেমন টেক্সট, ছবি, লিঙ্ক, ফর্ম ইত্যাদি তৈরি করি। HTML খুবই সহজ এবং মৌলিক ভাষা, তবে এটি ওয়েব ডেভেলপমেন্টের ভিত্তি হিসেবে কাজ করে।
এখানে কিছু HTML উদাহরণ দেওয়া হলো যা আপনাকে HTML এর বিভিন্ন উপাদান বুঝতে সাহায্য করবে।
1. বেসিক HTML ডকুমেন্ট স্ট্রাকচার
এটি একটি সাধারণ HTML ডকুমেন্টের কাঠামো:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>স্বাগতম!</h1>
<p>এটি আমার প্রথম HTML পেজ।</p>
</body>
</html>
ব্যাখ্যা:
<!DOCTYPE html>: এটি HTML5 ডকুমেন্টের ঘোষণা।<html>: HTML ডকুমেন্টের মূল উপাদান।<head>: মেটা তথ্য, শিরোনাম, এবং স্টাইল শিটের জন্য অংশ।<body>: পৃষ্ঠার দৃশ্যমান কনটেন্টের জন্য অংশ, যেমন টেক্সট, ছবি, লিঙ্ক ইত্যাদি।
2. হেডিং এবং প্যারাগ্রাফ
<h1>এইচটিএমএল শিরোনাম</h1>
<h2>সাব হেডিং ১</h2>
<h3>সাব হেডিং ২</h3>
<p>এই হল একটি প্যারাগ্রাফ। HTML পেজে লেখা বা টেক্সট আনার জন্য এটি ব্যবহৃত হয়।</p>
ব্যাখ্যা:
<h1>,<h2>,<h3>: শিরোনাম তৈরির জন্য ব্যবহৃত হয়, যেখানে<h1>সবচেয়ে বড় শিরোনাম এবং<h6>সবচেয়ে ছোট।<p>: প্যারাগ্রাফ তৈরির জন্য ব্যবহৃত হয়।
3. লিঙ্ক (Links)
<a href="https://www.example.com">এখানে ক্লিক করুন</a>
ব্যাখ্যা:
<a>: হাইপারলিঙ্ক তৈরি করতে ব্যবহৃত হয়।hrefএট্রিবিউটটি লিঙ্কের ঠিকানা (URL) সংজ্ঞায়িত করে।
4. ইমেজ (Images)
<img src="image.jpg" alt="ছবির বর্ণনা" width="300" height="200">
ব্যাখ্যা:
<img>: ছবি প্রদর্শন করতে ব্যবহৃত হয়।srcএট্রিবিউটে ছবির ফাইলের পাথ দেওয়া হয়,altএট্রিবিউটে ছবির বর্ণনা দেয়া হয় (এটি অ্যাক্সেসিবিলিটি এবং SEO এর জন্য গুরুত্বপূর্ণ)।widthএবংheight: ছবির আকার নির্ধারণ করে।
5. তালিকা (Lists)
অর্ডারড তালিকা (Ordered List):
<ol>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
<li>তৃতীয় আইটেম</li>
</ol>
আনঅর্ডারড তালিকা (Unordered List):
<ul>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
<li>তৃতীয় আইটেম</li>
</ul>
ব্যাখ্যা:
<ol>: একটি অর্ডারড তালিকা (নম্বর সহ তালিকা)।<ul>: একটি আনঅর্ডারড তালিকা (বুলেট পয়েন্ট সহ)।<li>: তালিকার আইটেম।
6. টেবিল (Table)
<table border="1">
<tr>
<th>নাম</th>
<th>বয়স</th>
</tr>
<tr>
<td>জন</td>
<td>২৫</td>
</tr>
<tr>
<td>মাইকা</td>
<td>৩০</td>
</tr>
</table>
ব্যাখ্যা:
<table>: টেবিল তৈরি করতে ব্যবহৃত হয়।<tr>: টেবিল রো তৈরি করে।<th>: টেবিল হেডার সেল তৈরি করে।<td>: টেবিল ডেটা সেল তৈরি করে।
7. ফর্ম (Forms)
<form action="/submit" method="POST">
<label for="name">নাম:</label>
<input type="text" id="name" name="name">
<label for="email">ইমেইল:</label>
<input type="email" id="email" name="email">
<button type="submit">জমা দিন</button>
</form>
ব্যাখ্যা:
<form>: ফর্ম তৈরি করতে ব্যবহৃত হয়।<input>: ইনপুট ফিল্ড তৈরি করে।<button>: ফর্ম সাবমিট করার জন্য বাটন তৈরি করে।action: ফর্মটি কোন URL-এ জমা হবে।method: ফর্ম জমা দেওয়ার জন্য HTTP পদ্ধতি নির্ধারণ করে (যেমনGETবাPOST)।
8. আইফ্রেম (Iframe)
<iframe src="https://www.example.com" width="600" height="400"></iframe>
ব্যাখ্যা:
<iframe>: ওয়েব পেজের ভিতরে অন্য একটি পেজ প্রদর্শন করতে ব্যবহৃত হয়।
9. স্টাইলিং (CSS in HTML)
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Styled Page</title>
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: green;
}
p {
color: black;
}
</style>
</head>
<body>
<h1>স্বাগতম!</h1>
<p>এই পেজটি সিএসএস দ্বারা স্টাইল করা হয়েছে।</p>
</body>
</html>
ব্যাখ্যা:
<style>: HTML ডকুমেন্টের ভিতরে CSS কোড অন্তর্ভুক্ত করার জন্য ব্যবহৃত হয়।
10. মেটা ট্যাগ (Meta Tags)
<head>
<meta charset="UTF-8">
<meta name="description" content="এটি একটি HTML উদাহরণ">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
ব্যাখ্যা:
<meta>: ওয়েব পেজের মেটা তথ্য (যেমন চরিত্র সেট, ডিজাইন প্রোপার্টি) প্রদান করে।
সারাংশ
HTML (HyperText Markup Language) হল ওয়েব পেজ তৈরির জন্য ব্যবহৃত একটি মৌলিক ভাষা। HTML দিয়ে আমরা ওয়েব পেজের বিভিন্ন উপাদান যেমন টেক্সট, ছবি, লিঙ্ক, তালিকা, টেবিল, ফর্ম ইত্যাদি তৈরি করতে পারি। এই উদাহরণগুলি HTML এর বিভিন্ন ট্যাগ এবং কৌশল নিয়ে আলোচনা করেছে যা ওয়েব পেজ ডিজাইনের জন্য অত্যন্ত গুরুত্বপূর্ণ। HTML শেখা ওয়েব ডেভেলপমেন্টের প্রথম ধাপ এবং এটি সব ধরনের ওয়েব পেজ তৈরির জন্য প্রয়োজনীয়।
