HTML Introduction Bangla
HTML পরিচিতি — শর্ট টিউটোরিয়াল (বাংলা)
এই টিউটোরিয়ালে HTML কি, কেন দরকার, মূল কাঠামো এবং কিভাবে সাধারণ নথি লিখবেন — সবকিছু সহজ উদাহরণ ও অনুশীলনের মাধ্যমে দেখানো হয়েছে।
HTML কি?
HTML (HyperText Markup Language) হলো ওয়েবপেজ তৈরির মৌলিক ভাষা। এটি কন্টেন্টের গঠন ও অর্থ (structure & semantics) নির্ধারণ করে — যেমন শিরোনাম, প্যারা, লিংক, ছবি ইত্যাদি।
বেসিক HTML পেজ কাঠামো
প্রতি HTML ডকুমেন্ট এই নীচের মতো শুরু হয় — এটি কপি করে index.html নামে সেভ করে ব্রাউজারে খুলুন।
<!doctype html>
আমার প্রথম পেজ হ্যালো, ওয়ার্ল্ড!
এটি আমার প্রথম HTML পেজ।
মুল ট্যাগগুলো ও তাদের ব্যবহার
<h1>...</h1>— প্রধান শিরোনাম (heading)<p>...</p>— প্যারাগ্রাফ<a href="...">...</a>— লিংক<img src="..." alt="...">— ছবি<ul>/<ol>/<li>— তালিকা (unordered/ordered)<div>ও<span>— গ্রুপিং এলিমেন্ট<form>,<input>,<button>— ফর্ম ও ইনপুট
ছোট উদাহরণ — ছবি ও লিংক
<h2>আমার প্রিয় স্থান</h2>
আরো জানার জন্য এখানে ক্লিক করুন.
সেম্যান্টিক ট্যাগ (semantic tags)
HTML5 থেকে কিছু নতুন ট্যাগ এসেছে যেগুলো কন্টেন্টের ধরন বুঝাতে সাহায্য করে — যেমন:
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>
এগুলো সার্চ ইঞ্জিন ও অ্যাক্সেসিবিলিটির জন্য ভালো।
বেসিক ফর্ম উদাহরণ
<form action="#" onsubmit="event.preventDefault();alert('সাবমিট করা হলো');">
বিস্তৃত শিখন কৌশল
- প্রত্যেক ট্যাগের উদাহরণ কপি করে ব্রাউজারে খোলুন।
- বিভিন্ন প্রপার্টি (attributes) পরিবর্তন করে দেখা — যেমন
alt,target,placeholderইত্যাদি। - একটি ছোট প্রোজেক্ট বানান — ব্যক্তিগত পোর্টফোলিও বা ছোট ব্লগপেজ।
অনুশীলন (Exercises)
প্রশ্ন ১: একটি পেজ তৈরি করুন যেখানে আপনার পরিচিতি (নাম, ছবি, সংক্ষিপ্ত বায়ো) থাকবে।
প্রশ্ন ২: একটি নেভিগেশন বার তৈরি করুন যাতে ৪টি লিংক থাকবে (হোম, সম্পর্কে, সেবা, যোগাযোগ)।
প্রশ্ন ৩: একটি কন্টাক্ট ফর্ম তৈরি করুন (নাম, ইমেল, বার্তা)।
পরবর্তী ধাপ
HTML শেখার পরে CSS শিখুন কিভাবে পৃষ্ঠা সুন্দর করা যায়, এবং পরে JavaScript দিয়ে ইন্টার্যাকটিভিটি যোগ করা যায়। আমি চাইলে এই টিউটোরিয়ালের সাথে CSS ও JS উদাহরণও যোগ করে দেব।
