HTML Basic
HTML Basic — দ্রুত পরিচিতি (বাংলা)
এই পাতায় HTML-এর বেসিক ট্যাগ, কিভাবে ব্যবহার করবেন, এবং কয়েকটি সাধারণ উদাহরণ দেওয়া আছে — যাতে আপনি খুব দ্রুত একটি সাধারন ওয়েবপেজ বানাতে পারবেন।
১) HTML কি?
HTML (HyperText Markup Language) হলো ওয়েবপেজ তৈরির জন্যে ব্যবহৃত মার্কআপ ভাষা। এটি কন্টেন্টের গঠন (structure) নির্ধারণ করে — যেমন শিরোনাম, প্যারা, ছবি, লিংক ইত্যাদি।
২) বেসিক ডকুমেন্ট স্ট্রাকচার
প্রতিটি HTML ফাইল একই মূল কাঠামো অনুসরণ করে। নিচে একটি সহজ উদাহরণ আছে — এটিকে index.html নামে সেভ করে ব্রাউজারে খুলে দেখুন।
<!doctype html>
আমার ওয়েবপেজ স্বাগতম!
এটি একটি বেসিক HTML পেজ।
৩) সাধারণ ট্যাগসমূহ
<h1>...</h1>— শিরোনাম (h1 থেকে h6 পর্যন্ত)<p>...</p>— প্যারাগ্রাফ<a href="URL">...</a>— লিংক<img src="path" alt="বর্ণনা">— ছবি (self-closing)<ul> <li>... </li> </ul>— unordered তালিকা<ol> <li>... </li> </ol>— ordered তালিকা<div>— ব্লক গ্রুপিং;<span>— inline গ্রুপিং
৪) Attributes (অ্যাট্রিবিউট)
ট্যাগগুলোর সাথে অতিরিক্ত তথ্য যোগ করতে অ্যাট্রিবিউট ব্যবহার করা হয়। উদাহরণ:
<a href="https://example.com" target="_blank">বাহিরে খোলার লিংক</a>
৫) ইন্টারনাল লিংক ও নেভিগেশন
পেজের ভিতরে লিংক করার জন্য id ব্যবহার করুন:
<a href="#contact">যোগাযোগে যান</a>
... ... ৬) টেবিল (Table) — সাধারণ রূপ
<table>
নাম যোগ্যতা রহিম MBA ৭) ফর্ম (Form) — বেসিক ইনপুট
<form action="#" onsubmit="event.preventDefault();alert('সাবমিট!');">
৮) সেম্যান্টিক ট্যাগগুলো
HTML5 এ কিছু ট্যাগ এসেছে যা কন্টেন্টের উদ্দেশ্য বোঝায় — যেমন <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>। এগুলো ব্যবহার করলে SEO ও অ্যাক্সেসিবিলিটি ভালো হয়।
৯) মন্তব্য (Comments)
কোডে মন্তব্য যোগ করতে:
<!-- এই অংশটি ব্রাউজারে দেখাবে না -->১০) ব্লক vs ইনলাইন এলিমেন্ট
- Block elements (উদাহরণ: <div>, <p>, <h1>) — পূর্ণ প্রস্থ নেয় এবং নতুন লাইন শুরু করে।
- Inline elements (উদাহরণ: <span>, <a>, <img>) — কন্টেন্টের সাথে লাইনে থাকে।
অনুশীলন (Exercises)
- একটি পেজ বানান যেখানে শিরোনাম, ২টি প্যারাগ্রাফ, একটা ছবি এবং একটি লিংক থাকবে।
- একটি ছোট টেবিল তৈরি করুন (3 কলাম ও 3 রো) এবং টেবিল হেডার দিন।
- একটি কন্ট্যাক্ট ফর্ম তৈরি করুন (নাম, ইমেল, বার্তা) এবং সেবমিট বাটনে জাভাস্ক্রিপ্টে অ্যালার্ট দেখান।
পরবর্তী ধাপ
এই বেসিক শেখার পরে চাইলে আমি CSS দিয়ে পেজকে স্টাইল দিতে ও JavaScript দিয়ে ইন্টার্যাকটিভ করতে পরবর্তী লেসন তৈরি করে দেব।
