HTML ডকুমেন্টের স্ট্রাকচার
আমরা পূর্বের লেসনে শিখেছি, HTML কী এবং এটি কীভাবে কাজ করে। আজ আমরা শিখবো, HTML ডকুমেন্টের স্ট্রাকচার বা কাঠামো কেমন হয় এবং প্রতিটি অংশ কীভাবে
কাজ করে তা নিয়ে বিস্তারিত।
HTML
ডকুমেন্টের মূল কাঠামো - একটি সাধারণ HTML ডকুমেন্ট দেখতে নিচের
মতো হয়:
<!DOCTYPE html>
<html>
<head>
<title>আমার ওয়েবপেইজ</title>
</head>
<body>
<h1>এটি একটি শিরোনাম বা হেডিং</h1>
<p>এটি একটি প্যারাগ্রাফ।</p>
</body>
</html>
এবার চলো, প্রতিটি অংশের কাজ সহজভাবে জানা যাক -
1.
<!DOCTYPE html> → এটি ব্রাউজারকে
বলে দেয় যে, আমরা HTML5 ব্যবহার করছি। এটি সব HTML ডকুমেন্টের শুরুতেই
থাকতে হবে।
2.
<html> → এটি পুরো HTML ডকুমেন্টকে ঘিরে রাখে। এটি শুরু হয় <html> দিয়ে এবং শেষ হয় </html> দিয়ে।
3.
<head> → এই অংশে পেইজের শিরোনাম
(Title),
মেটাডাটা (Metadata), এবং আরও অতিরিক্ত তথ্য থাকে।
4.
<title> → এটি পেইজের টাইটেল দেখানো
জন্য কাজ করে, যা ব্রাউজারের ট্যাবে দেখা যায়।
5.
<body> → এই অংশে ওয়েবপেইজে
যা দেখানো হবে, সেগুলো লেখা হয়। যেমন: টেক্সট, ছবি, লিঙ্ক, বাটন ইত্যাদি।
6.
<h1> → এটি একটি বড় শিরোনাম
বা হেডিং তৈরি করে। HTML-এ সর্বমোট ৬ ধরনের শিরোনাম
বা হেডিং আছে (যেমন, <h1> থেকে <h6> পর্যন্ত)।
7.
<p> → এটি একটি সাধারণ প্যারাগ্রাফ
তৈরি করার জন্য ব্যবহার করা হয়।
একটি বাস্তব উদাহরণ
তুমি নিজে চেষ্টা করে দেখতে পারো! নিচের কোডটি Notepad বা VS Code-এ লিখে `index.html` নামে Save করো এবং ব্রাউজারে খুলে দেখো।
<!DOCTYPE html>
<html>
<head>
<title>আমার প্রথম ওয়েবপেইজ</title>
</head>
<body>
<h1>স্বাগতম আমার ওয়েবপেইজে!</h1>
<p>এটি আমার HTML দিয়ে প্রথম ওয়েবপেইজ।</p>
</body>
</html>
এটি ব্রাউজারে ওপেন করলে তুমি দেখবে যে -
- ব্রাউজারের ট্যাবে লেখা থাকবে “আমার প্রথম ওয়েবপেইজ”।
- বড় হেডিং দেখা যাবে “স্বাগতম আমার ওয়েবপেইজে!”।
- নিচে একটি প্যারাগ্রাফ দেখবে “এটি আমার HTML দিয়ে প্রথম ওয়েবপেইজ”।
আজকের অনুশীলন -
তুমি নিজের নামে একটি ওয়েবপেইজ বানানোর চেষ্টা করো!
হ্যাডিং এ তোমার নাম, বয়স, পেশা ইত্যাদি যোগ কর এবং এটি .html ফাইল হিসেবে Save করে ব্রাউজারে চালিয়ে দেখো! এবং তার একটা
স্ক্রিনশট নিয়ে এই পোষ্টের কমেন্টবক্সে দিয়ে দাও।
এক নজরে আজকে কী শিখলাম?
✔ HTML
ডকুমেন্টের মূল কাঠামো।
✔ <!DOCTYPE
html>, <html>, <head>, body> ট্যাগের কাজ।
✔ হেডিং বা শিরোনাম ট্যাগ (<h1>) এবং প্যারাগ্রাফ (<p>) ট্যাগ এদের ব্যবহার।
✔ নিজের নামে ওয়েবপেইজ তৈরি করার অনুশীলন।
👉 পরবর্তী লেসনে আমরা শিখবো: HTML-এর হেডিংস (Headings) এবং প্যারাগ্রাফ নিয়ে উদাহরণসহ বিস্তারিত আলোচনা!