ভূমিকাঃ
তুমি কি জানো, আমরা যেসব ওয়েবসাইট দেখি সেগুলো কিভাবে তৈরি হয়? এই ওয়েবসাইটগুলোর মূল ভিত্তি হলো HTML (HyperText Markup Language)। এটি হলো এমন একটি ভাষা যা ব্রাউজারকে বলে দেয় কিভাবে একটি ওয়েবপেইজ দেখতে বা দেখাতে হবে।
HyperText Markup Language বলতে কি বুঝায়?
HyperText
(হাইপারটেক্সট): “Hyper” মানে অতিরিক্ত বা সংযুক্ত, আর “Text” মানে লেখা বা তথ্য। অর্থাৎ, HyperText হলো এমন লেখা বা তথ্য, যা এক পেইজের সাথে অন্য পেইজকে লিঙ্ক (link) বা সংযুক্ত করতে পারে। যখন আমরা কোনো ওয়েবসাইটে একটি লিঙ্কে ক্লিক করি এবং সেটি
আমাদের অন্য একটি পেইজে নিয়ে যায়, তখন সেটি HyperText এর কাজ করে।
Markup
(মার্কআপ): “Mark” মানে চিহ্নিত করা এবং “Up” মানে সংযোজন করা। Markup বলতে বোঝায় বিশেষ কোড (tags) দিয়ে লেখা বা কনটেন্ট গঠন করা। HTML মার্কআপ ল্যাঙ্গুয়েজে বিভিন্ন ট্যাগ (tags) ব্যবহার করা হয়, যা ব্রাউজারকে বলে দেয়
কীভাবে কনটেন্ট প্রদর্শন করতে হবে।
Language
(ল্যাঙ্গুয়েজ): Language বা ভাষা হলো এমন একটি গঠনমূলক নিয়ম, যা ব্রাউজার বুঝতে পারে এবং ওয়েবপেইজ তৈরি করতে পারে। তবে HTML কোনো প্রোগ্রামিং ভাষা নয়, এটি একটি Markup Language, যা ওয়েবপেইজের কাঠামো
তৈরি করতে ব্যবহৃত হয়।
তাহলে আমরা বলতে
পারি যে, HyperText Markup Language (HTML) হলো এমন একটি ভাষা, যা ওয়েবপেইজ তৈরির জন্য ব্যবহৃত হয়। এটি HyperText ব্যবহার করে এক পেজকে অন্য পেজের সাথে সংযুক্ত করতে পারে এবং Markup ব্যবহার করে বিভিন্ন উপাদান (heading (h1…h6),
paragraph (p), image (img) ইত্যাদি) সাজিয়ে ওয়েবসাইট
গঠন করে।
এখন ভাবো, যদি তুমি একটা গল্পের বই লেখো, তাহলে সেখানে টাইটেল থাকবে, অধ্যায় থাকবে, কিছু বড় অক্ষরে লেখা থাকবে, কিছু ছোট অক্ষরে লেখা থাকবে - এসব কিছুকে সুন্দরভাবে সাজাতে কিছু নিয়ম অনুসরণ
করতে হয়, তাই না? HTML ঠিক তেমন কাজটাই ওয়েবপেইজের
জন্য করে।
HTML
কী?
HTML
হলো এক ধরনের মার্কআপ ভাষা (Markup Language), যা ওয়েবপেইজ তৈরি করতে ব্যবহার করা হয়। এটি বিভিন্ন ট্যাগ
(Tag)
দিয়ে গঠিত, যা ব্রাউজারকে বলে দেয় কোন লেখা বড় হবে, কোনটা ছোট হবে, কোথায় ছবি থাকবে, কোথায় লিঙ্ক থাকবে ইত্যাদি।
একটা সহজ উদাহরণ দিই, ধরো তুমি একটি চিঠি লিখছো। সেখানে শুরুতে “প্রিয় বন্ধু” লিখলে
সেটা একটা টাইটেল, এরপর মেসেজ লিখবে, শেষে “তোমার বন্ধু” লিখবে। ঠিক সেভাবেই HTML-এর ট্যাগগুলো ওয়েবপেইজের বিভিন্ন অংশ সাজিয়ে রাখে।
HTML
কেন গুরুত্বপূর্ণ?
✅ ওয়েবসাইট বানানোর জন্য HTML খুবই প্রয়োজনীয়।
✅ এটি ব্যবহার না করলে ব্রাউজার জানবেই না কীভাবে ওয়েবপেইজ
সাজাতে হবে।
✅ এটি CSS (স্টাইলিং) এবং JavaScript (ইন্টারঅ্যাকটিভ ফিচার)
এর সাথে মিলে কাজ করে।
✅ গুগলে কোনো কিছু খুঁজলে (SEO – Search
Engine Optimization), HTML সাহায্য করে যেন ওয়েবসাইট
সহজে পাওয়া যায় তার সহায়তা করে।
HTML-এর সাধারণ স্ট্রাকচার?
চলো, এখন একটি সাধারণ HTML ডকুমেন্ট দেখি:
<!DOCTYPE html>
<html>
<head>
<title>আমার প্রথম ওয়েবপেইজ</title>
</head>
<body>
<h1>স্বাগতম HTML শেখার জগতে!</h1>
<p>এটি একটি সাধারণ প্যারাগ্রাফ।</p>
</body>
</html>
এখানে কী কী আছে? আসো ব্যাখ্যা করি:
1.
<!DOCTYPE html> → এটি বলে দেয়
যে আমরা HTML5
ভার্সন ব্যবহার করছি।
2.
<html> → এটি পুরো HTML ডকুমেন্টের মূল কাঠামো।
3.
<head> → এই অংশে থাকে পেইজের
নাম (Title),
মেটাডাটা ইত্যাদি।
4.
<title> → এটি ব্রাউজারের ট্যাবে
দেখাবে আমার প্রথম ওয়েবপেইজ।
5.
<body> → এখানে পেইজের মূল কনটেন্ট
থাকে (লেখা, ছবি, লিংক ইত্যাদি)।
6.
<h1> → এটি হলো বড় হেডিং বা
শিরোনাম।
7.
<p> → এটি একটি সাধারণ প্যারাগ্রাফ
দেখায়।
প্রথম অনুশীলন: নিজে কোড লিখে অনুশীলন কর!
তুমি নিজেই চেষ্টা করো! 👇 নিচের কোড কপি করে Notepad বা VS
Code এডিটর এ লিখে ফাইলটি index.html নামে সেভ করো, তারপর ব্রাউজারে রান করে দেখো।
<!DOCTYPE html>
<html>
<head>
<title>আমার প্রথম HTML পেইজ</title>
</head>
<body>
<h1>আমি Notesaid24 ওয়েবসাইটে HTML শিখছি!</h1>
<p>এটি আমার প্রথম HTML কোড।</p>
</body>
</html>
🎯 তুমি যদি কোডটি ঠিকভাবে চালাতে পারো, তাহলে অভিনন্দন! তুমি প্রথম HTML পেইজ তৈরি করেছো! 🎉 আর যদি কোড রান করাতে সমস্যা হয়, তাহলে তোমার সমস্যাসহ
বিস্তারিত লিখে কমেন্টেবক্সে দিয়ে দাও। আমি সমাধান দেওয়ার চেষ্টা করবো ইনশাআল্লাহ্।
আজকে
পর্বে আমরা যা শিখলাম?
✔ HTML কী এবং এটি কীভাবে কাজ করে।
✔ HTML কেন গুরুত্বপূর্ণ।
✔ HTML-এর মূল স্ট্রাকচার।
✔ প্রথম HTML কোড কীভাবে লিখতে হয়।
👉 পরবর্তী লেসনে শিখবো: HTML ডকুমেন্টের আরো বিস্তারিত স্ট্রাকচার এবং কিছু নতুন ট্যাগ! 🚀