মোঃ মনিরুল হক
সহকারী শিক্ষক
২৯ আগস্ট, ২০২৫ ০১:৫৭ অপরাহ্ণ
HTML ট্যাগ হলো ওয়েব ডিজাইনের প্রথম ধাপ
ধরনঃ সাধারণ শিক্ষা
শ্রেণিঃ দ্বাদশ
বিষয়ঃ তথ্য ও যোগাযোগ প্রযুক্তি
অধ্যায়ঃ অধ্যায় ৪
মনিরুল হক,
ওয়েবসাইট তৈরির মূল ভাষা হলো HTML (HyperText Markup Language)। HTML-এ আমরা টেক্সট, ছবি, ভিডিও, লিংক ইত্যাদি দেখানোর জন্য ব্যবহার করি ট্যাগ। সহজভাবে বললে, HTML ট্যাগ হলো কিছু কীওয়ার্ড যা ব্রাউজারকে নির্দেশ দেয়—কোন কনটেন্ট কিভাবে প্রদর্শিত হবে।
HTML ট্যাগ কী?
একটি HTML ট্যাগ সাধারণত শুরু এবং শেষ অংশে লেখা হয়। যেমন:
<p>এটি একটি প্যারাগ্রাফ।</p>
এখানে:
- <p> → Opening tag (শুরু)
- </p> → Closing tag (শেষ)
- এটি একটি প্যারাগ্রাফ। → Content
👉 তবে কিছু ট্যাগ আছে যেগুলোর কোনো Closing tag নেই। এগুলোকে বলা হয় Empty Tag বা Self-Closing Tag। যেমন <br> বা <img>।
HTML ট্যাগের মৌলিক কাঠামোঃ
একটি সাধারণ HTML ফাইল তৈরি হয় এই ট্যাগগুলো দিয়ে:
<!DOCTYPE html>
<html>
<head>
<title>আমার ওয়েবসাইট</title>
</head>
<body>
<h1>স্বাগতম</h1>
<p>এটি আমার প্রথম ওয়েবপেজ।</p>
</body>
</html>
- <!DOCTYPE html> → ব্রাউজারকে বলে দিচ্ছে এটি HTML5 ডকুমেন্ট।
- <html> → পুরো ওয়েবপেজের মূল ট্যাগ।
- <head> → মেটা তথ্য যেমন শিরোনাম, স্টাইল, স্ক্রিপ্ট।
- <title> → ব্রাউজারের ট্যাবে যে শিরোনাম দেখা যায়।
- <body> → ব্যবহারকারীর সামনে যেসব কনটেন্ট দেখা যায়।
HTML ট্যাগের প্রকারভেদঃ
১. টেক্সট সম্পর্কিত ট্যাগঃ
- <h1> থেকে <h6> → শিরোনাম (Heading)।
- <p> → প্যারাগ্রাফ।
- <b> বা <strong> → বোল্ড টেক্সট।
- <i> বা <em> → ইটালিক টেক্সট।
- <u> → আন্ডারলাইন।
- <br> → নতুন লাইন।
- <hr> → অনুভূমিক লাইন।
২. লিস্ট (List) ট্যাগঃ
- <ul> → Unordered List (● বুলেট চিহ্ন)।
- <ol> → Ordered List (১, ২, ৩...)।
- <li> → প্রতিটি লিস্ট আইটেম।
৩. লিংক এবং ছবি ট্যাগঃ
- <a href="url">লিংক</a> → অন্য পেইজ বা ওয়েবসাইটে যাওয়া যায়।
- <img src="image.jpg" alt="ছবির নাম"> → ছবি দেখানোর জন্য।
৪. টেবিল সম্পর্কিত ট্যাগঃ
- <table> → টেবিল তৈরি।
- <tr> → টেবিলের সারি (row)।
- <td> → টেবিলের সেল (ডাটা)।
- <th> → হেডার সেল।
৫. ফর্ম সম্পর্কিত ট্যাগঃ
- <form> → ফর্ম তৈরি।
- <input> → ডেটা ইনপুট (যেমন টেক্সট বক্স, পাসওয়ার্ড)।
- <textarea> → বড় টেক্সট লেখার জন্য।
- <button> → বাটন।
- <select> এবং <option> → ড্রপডাউন মেনু।
৬. মিডিয়া ট্যাগঃ
- <audio controls> → অডিও প্লে করার জন্য।
- <video controls> → ভিডিও প্লে করার জন্য।
- <iframe> → অন্য ওয়েবপেজ বা ইউটিউব ভিডিও এমবেড করার জন্য।
Self-Closing ট্যাগ (Empty Tag)ঃ
যেসব ট্যাগের Closing অংশ থাকে না, যেমন:
- <br> → লাইন ব্রেক।
- <hr> → অনুভূমিক লাইন।
- <img> → ছবি।
- <input> → ফর্ম ইনপুট।
HTML ট্যাগ ব্যবহারের একটি পূর্ণ উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>HTML ট্যাগ উদাহরণ</title>
</head>
<body>
<h1>আমার ওয়েবসাইট</h1>
<p><b>এটি একটি বোল্ড টেক্সট।</b></p>
<p><i>এটি ইটালিক টেক্সট।</i></p>
<p><u>এটি আন্ডারলাইন টেক্সট।</u></p>
<hr>
<h2>আমাদের লিস্ট</h2>
<ul>
<li>বাংলা</li>
<li>ইংরেজি</li>
<li>গণিত</li>
</ul>
<h2>ছবি</h2>
<img src="school.jpg" alt="স্কুলের ছবি" width="300">
<h2>গুরুত্বপূর্ণ লিংক</h2>
<a href="https://www.google.com">গুগলে যান</a>
</body>
</html>
HTML ট্যাগ হলো ওয়েব ডিজাইনের সবচেয়ে গুরুত্বপূর্ণ অংশ। টেক্সট, ছবি, লিংক, ফর্ম, টেবিল, মিডিয়া—সবকিছুই নির্ভর করে সঠিক ট্যাগ ব্যবহারের ওপর। তাই ওয়েব ডিজাইনের পথে প্রথমেই HTML ট্যাগ ভালোভাবে শিখতে হবে। এরপর CSS ও JavaScript যুক্ত করলে ওয়েবপেজ হবে আরও আকর্ষণীয় ও ইন্টারঅ্যাকটিভ।
মোঃ মনিরুল হক
সহকারী শিক্ষক
আমলাবাড়ী মাধ্যমিক বিদ্যালয়
খোকসা, কুষ্টিয়া
০১৭২২২৭৩২৭২
মন্তব্য করুন
