HTML Keywords
HTML কীওয়ার্ড: ব্যবহার ও উদাহরণসহ শিক্ষানবিস গাইড
HTML (HyperText Markup Language) হলো ওয়েব পেজ তৈরির মূল ভাষা, এবং এর কীওয়ার্ডগুলো হলো এমন শব্দ বা ট্যাগ যা ওয়েব পেজের গঠন, কনটেন্ট, এবং কার্যকারিতা নির্ধারণ করে। এই কীওয়ার্ডগুলোর মধ্যে রয়েছে HTML এলিমেন্ট (যেমন <div>, <p>), অ্যাট্রিবিউট (যেমন id, class), এবং রিজার্ভড শব্দ (যেমন <!DOCTYPE>)। এই ব্লগে আমরা HTML কীওয়ার্ড, তাদের ব্যবহার, এবং উদাহরণ টেবিলের মাধ্যমে ধাপে ধাপে আলোচনা করব। শিক্ষানবিসদের জন্য এই টিউটোরিয়াল সহজবোধ্য এবং বাস্তবমুখী হবে।
HTML কীওয়ার্ড কী?
HTML কীওয়ার্ড হলো HTML-এ ব্যবহৃত এলিমেন্ট, অ্যাট্রিবিউট, এবং রিজার্ভড শব্দ, যা ব্রাউজারকে নির্দেশ দেয় কীভাবে ওয়েব পেজ রেন্ডার করতে হবে। এগুলো ওয়েব পেজের গঠন, স্টাইল, এবং ইন্টারেক্টিভিটি নিয়ন্ত্রণ করে। নিচে আমরা প্রধান কীওয়ার্ডগুলোর ব্যবহার টেবিল আকারে দেখব এবং বাস্তব উদাহরণ দেব।
ধাপ ১: HTML এলিমেন্ট কীওয়ার্ড
HTML এলিমেন্ট হলো ওয়েব পেজের বিল্ডিং ব্লক, যা ট্যাগের মাধ্যমে সংজ্ঞায়িত হয়। নিচের টেবিলে কিছু সাধারণ এলিমেন্ট কীওয়ার্ড, তাদের ব্যবহার, এবং উদাহরণ দেওয়া হলো।
| কীওয়ার্ড | ব্যবহার | উদাহরণ |
|---|---|---|
<html> |
পুরো HTML ডকুমেন্টের রুট এলিমেন্ট | <html lang="bn">...</html> |
<head> |
মেটাডেটা, টাইটেল, এবং লিঙ্ক ধারণ করে | <head><title>আমার পেজ</title></head> |
<body> |
ওয়েব পেজের দৃশ্যমান কনটেন্ট ধারণ করে | <body><h1>স্বাগতম!</h1></body> |
<h1>–<h6> |
শিরোনাম তৈরি করে (বড় থেকে ছোট) | <h1>প্রধান শিরোনাম</h1> |
<p> |
প্যারাগ্রাফ তৈরি করে | <p>এটি একটি প্যারাগ্রাফ।</p> |
<a> |
হাইপারলিঙ্ক তৈরি করে | <a href="https://example.com">লিঙ্ক</a> |
<img> |
ছবি যোগ করে | <img src="image.jpg" alt="ছবি"> |
উদাহরণ: বেসিক HTML গঠন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>HTML এলিমেন্ট উদাহরণ</title>
</head>
<body>
<h1>স্বাগতম!</h1>
<p>এটি একটি প্যারাগ্রাফ।</p>
<a href="https://www.example.com">একটি লিঙ্ক</a>
<img src="sample.jpg" alt="একটি ছবি">
</body>
</html>
<!DOCTYPE html>: HTML5 ডকুমেন্ট ঘোষণা করে।<html lang="bn">: বাংলা ভাষা নির্দেশ করে।<h1>,<p>,<a>,<img>: কনটেন্ট প্রদর্শনের জন্য।
ধাপ ২: HTML অ্যাট্রিবিউট কীওয়ার্ড
অ্যাট্রিবিউট এলিমেন্টের অতিরিক্ত তথ্য প্রদান করে এবং ট্যাগের মধ্যে নাম-মান জোড়া হিসেবে লেখা হয়। নিচের টেবিলে কিছু গুরুত্বপূর্ণ অ্যাট্রিবিউট দেওয়া হলো।
| কীওয়ার্ড | ব্যবহার | উদাহরণ |
|---|---|---|
id |
এলিমেন্টের জন্য ইউনিক শনাক্তকারী | <div id="myDiv">...</div> |
class |
CSS স্টাইল প্রয়োগের জন্য শ্রেণি | <p class="highlight">টেক্সট</p> |
src |
মিডিয়া ফাইলের উৎস নির্দেশ করে | <img src="image.jpg"> |
href |
হাইপারলিঙ্কের গন্তব্য নির্দেশ করে | <a href="https://example.com">লিঙ্ক</a> |
alt |
ছবির বিকল্প টেক্সট (অ্যাক্সেসিবিলিটির জন্য) | <img src="image.jpg" alt="ছবি"> |
data-* |
কাস্টম ডেটা সংরক্ষণ | <button data-info="value">ক্লিক</button> |
উদাহরণ: অ্যাট্রিবিউট ব্যবহার
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>HTML অ্যাট্রিবিউট উদাহরণ</title>
<style>
#myDiv {
background-color: lightblue;
padding: 10px;
}
.highlight {
color: red;
}
</style>
</head>
<body>
<div id="myDiv">
<p class="highlight">এটি একটি হাইলাইট করা প্যারাগ্রাফ।</p>
<img src="sample.jpg" alt="একটি ছবি" width="200">
<button data-info="বাংলা">তথ্য</button>
</div>
</body>
</html>
id="myDiv": CSS বা JavaScript দিয়ে এলিমেন্ট নির্দিষ্ট করতে।class="highlight": একাধিক এলিমেন্টে একই স্টাইল প্রয়োগ।data-info: কাস্টম ডেটা সংরক্ষণ।
ধাপ ৩: HTML ফর্মের কীওয়ার্ড
HTML ফর্ম তৈরির জন্য কিছু নির্দিষ্ট কীওয়ার্ড ব্যবহৃত হয়। নিচের টেবিলে ফর্ম-সম্পর্কিত কীওয়ার্ড দেখানো হলো।
| কীওয়ার্ড | ব্যবহার | উদাহরণ |
|---|---|---|
<form> |
ফর্ম তৈরি করে | <form action="/submit">...</form> |
<input> |
ব্যবহারকারীর ইনপুট গ্রহণ করে | <input type="text" name="username"> |
<label> |
ইনপুটের বর্ণনা দেয় | <label for="username">নাম:</label> |
type |
ইনপুটের ধরন নির্দেশ করে | <input type="submit"> |
name |
ফর্ম ডেটার শনাক্তকারী | <input name="username"> |
action |
ফর্ম ডেটা পাঠানোর গন্তব্য | <form action="/submit"> |
উদাহরণ: একটি সাধারণ ফর্ম
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>HTML ফর্ম উদাহরণ</title>
<style>
form {
max-width: 300px;
margin: 20px auto;
}
label, input {
display: block;
margin: 10px 0;
}
input[type="submit"] {
background-color: #2c3e50;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<form action="/submit" method="post">
<label for="name">নাম:</label>
<input type="text" id="name" name="name" placeholder="আপনার নাম লিখুন">
<input type="submit" value="জমা দিন">
</form>
</body>
</html>
<form action="/submit" method="post">: ফর্ম ডেটা কোথায় পাঠানো হবে।<label for="name">: ইনপুটের সাথে সংযুক্ত।<input type="text">: ব্যবহারকারীর টেক্সট ইনপুট।
ধাপ ৪: HTML সিমান্টিক কীওয়ার্ড
HTML5-এ সিমান্টিক কীওয়ার্ড পেজের গঠনকে আরও অর্থপূর্ণ করে। নিচের টেবিলে সিমান্টিক এলিমেন্ট দেখানো হলো।
| কীওয়ার্ড | ব্যবহার | উদাহরণ |
|---|---|---|
<header> |
পেজ বা সেকশনের শীর্ষে ব্যবহৃত | <header><h1>শিরোনাম</h1></header> |
<footer> |
পেজ বা সেকশনের নিচে ব্যবহৃত | <footer><p>কপিরাইট © ২০২৫</p></footer> |
<article> |
স্বাধীন কনটেন্টের জন্য | <article><h2>নিবন্ধ</h2></article> |
<section> |
কনটেন্টের বিভাগ তৈরি করে | <section><p>বিষয়বস্তু</p></section> |
<nav> |
নেভিগেশন মেনু তৈরি করে | <nav><a href="#">হোম</a></nav> |
উদাহরণ: সিমান্টিক গঠন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>HTML সিমান্টিক উদাহরণ</title>
<style>
header, footer {
background-color: #2c3e50;
color: white;
padding: 10px;
text-align: center;
}
article {
margin: 20px;
padding: 15px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<header>
<h1>আমার ওয়েবসাইট</h1>
</header>
<article>
<h2>একটি নিবন্ধ</h2>
<p>এটি একটি সিমান্টিক নিবন্ধের উদাহরণ।</p>
</article>
<footer>
<p>কপিরাইট © ২০২৫</p>
</footer>
</body>
</html>
<header>: শীর্ষে লোগো বা নেভিগেশন।<article>: স্বাধীন কনটেন্ট।<footer>: কপিরাইট বা যোগাযোগ তথ্য।
ধাপ ৫: ইন্টারেক্টিভ কীওয়ার্ড
ইভেন্ট অ্যাট্রিবিউট (যেমন onclick, onchange) এবং কাস্টম ডেটা অ্যাট্রিবিউট (data-*) ব্যবহার করে ইন্টারেক্টিভ পেজ তৈরি করা যায়।
| কীওয়ার্ড | ব্যবহার | উদাহরণ |
|---|---|---|
onclick |
ক্লিক ইভেন্ট হ্যান্ডল করে | <button onclick="myFunction()">ক্লিক</button> |
onchange |
ইনপুট পরিবর্তন হলে ট্রিগার করে | <input type="text" onchange="update()"> |
data-* |
কাস্টম ডেটা সংরক্ষণ | <div data-id="123">...</div> |
উদাহরণ: ইন্টারেক্টিভ বাটন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>ইন্টারেক্টিভ HTML উদাহরণ</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
margin: 20px;
cursor: pointer;
}
#output {
margin: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<button onclick="showMessage()" data-message="স্বাগতম!">ক্লিক করুন</button>
<p id="output"></p>
<script>
function showMessage() {
const button = document.querySelector('button');
const message = button.dataset.message;
document.getElementById('output').innerText = message;
}
</script>
</body>
</html>
onclick: বাটন ক্লিকে JavaScript ফাংশন কল করে।data-message: কাস্টম ডেটা সংরক্ষণ করে।- JavaScript-এ
datasetব্যবহার করে ডেটা অ্যাক্সেস করা হয়।
ধাপ ৬: উন্নত টিপস
- সঠিক কীওয়ার্ড নির্বাচন: উপযুক্ত এলিমেন্ট ব্যবহার করুন (যেমন টেক্সটের জন্য
<p>, ছবির জন্য<img>)। - সিমান্টিক HTML:
<section>,<nav>,<aside>ব্যবহার করে পেজের গঠন অর্থপূর্ণ করুন। - অ্যাক্সেসিবিলিটি:
alt,aria-*অ্যাট্রিবিউট ব্যবহার করে ওয়েবসাইট সবার জন্য ব্যবহারযোগ্য করুন। - রিজার্ভড কীওয়ার্ড এড়ানো:
id,classইত্যাদি নিজের ভেরিয়েবল নাম হিসেবে ব্যবহার করবেন না। - ক্রস-ব্রাউজার সামঞ্জস্য: HTML5 কীওয়ার্ড আধুনিক ব্রাউজারে সমর্থিত, তবে পুরোনো ব্রাউজারের জন্য ফলব্যাক (যেমন
<noscript>) যোগ করুন। - ডকুমেন্টেশন চেক: MDN Web Docs বা W3Schools থেকে কীওয়ার্ডের বিস্তারিত জানুন।
ধাপ ৭: আরও শেখার জন্য রিসোর্স
- MDN Web Docs: HTML এলিমেন্ট এবং অ্যাট্রিবিউটের বিস্তারিত গাইড (https://developer.mozilla.org/en-US/docs/Web/HTML/Element)।
- W3Schools: শিক্ষানবিস-বান্ধব টিউটোরিয়াল (https://www.w3schools.com/html/html_elements.asp)।
- X প্ল্যাটফর্ম:
#HTMLKeywordsবা#HTMLElementsহ্যাশট্যাগ দিয়ে সার্চ করে কমিউনিটির উদাহরণ দেখুন। - Google Fonts: বাংলা ফন্টের জন্য (https://fonts.google.com/noto/specimen/Noto+Sans+Bengali)।
উপসংহার
HTML কীওয়ার্ড ওয়েব পেজ তৈরির মূল ভিত্তি। এই ব্লগে আমরা এলিমেন্ট, অ্যাট্রিবিউট, ফর্ম, সিমান্টিক, এবং ইন্টারেক্টিভ কীওয়ার্ডের ব্যবহার টেবিল এবং উদাহরণের মাধ্যমে দেখেছি। এই জ্ঞান দিয়ে আপনি একটি সাধারণ ওয়েব পেজ তৈরি করতে পারেন। আরও উন্নত ফিচার, যেমন কাস্টম ফর্ম বা ইন্টারেক্টিভ উপাদান, যোগ করতে এই কীওয়ার্ডগুলো ব্যবহার করুন।
আপনার যদি কোনো নির্দিষ্ট কীওয়ার্ড বা উদাহরণ প্রয়োজন হয়, তাহলে কমেন্টে জানান! এছাড়া, আপনি কি চান আমি HTML কীওয়ার্ড ব্যবহার করে কোনো ভিজুয়াল উদাহরণ (যেমন একটি নেভিগেশন মেনু বা ইন্টারেক্টিভ ফর্ম) তৈরি করে দেখাই?
লেখকের নোট: এই টিউটোরিয়ালটি শিক্ষানবিসদের জন্য তৈরি করা হয়েছে। আপনি যদি এটি ব্যবহার করে কিছু তৈরি করেন, তাহলে আপনার প্রজেক্ট শেয়ার করুন এবং আমাদের সাথে আপনার অভিজ্ঞতা জানান!
