সিরিজের প্রথম পর্ব — HTML পরিচিতি ও বেসিক স্ট্রাকচার।
ওয়েব ডেভেলপমেন্ট শেখার যাত্রা শুরু হয় HTML দিয়ে। আজকের এই পর্বে আমরা জানবো HTML আসলে কী, কেন এটা শেখা দরকার, আর একটা HTML পেজের বেসিক স্ট্রাকচার কেমন হয়।
HTML কী?
HTML মানে HyperText Markup Language। এটা কোনো প্রোগ্রামিং ল্যাঙ্গুয়েজ না, বরং একটা markup language — মানে এটা দিয়ে আমরা কোনো লজিক লিখি না, বরং একটা ওয়েবপেজের কন্টেন্ট কীভাবে সাজানো হবে সেটা বলে দিই। যেমন — কোনটা heading হবে, কোনটা paragraph, কোনটা image, ইত্যাদি।
সহজভাবে বললে, একটা ওয়েবসাইটকে যদি মানুষের শরীরের সাথে তুলনা করি —
- HTML হলো কঙ্কাল (structure)
- CSS হলো চেহারা ও পোশাক (design)
- JavaScript হলো আচরণ ও নড়াচড়া (interactivity)
ব্রাউজার কীভাবে HTML পড়ে?
আমরা যখন একটা HTML ফাইল ব্রাউজারে ওপেন করি, ব্রাউজার সেই ফাইলটাকে উপর থেকে নিচে পড়ে এবং প্রতিটা ট্যাগ অনুযায়ী কন্টেন্ট রেন্ডার করে দেখায়। তুমি .html এক্সটেনশনের একটা ফাইল বানিয়ে সরাসরি ব্রাউজারে ডাবল ক্লিক করলেই সেটা দেখতে পারবে — কোনো সার্ভার বা ইন্টারনেট কানেকশন ছাড়াই।
একটা বেসিক HTML স্ট্রাকচার
প্রতিটা HTML ফাইলের একটা নির্দিষ্ট কাঠামো থাকে। নিচের কোডটা দেখো:
<!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8"> <title>আমার প্রথম ওয়েবপেজ</title> </head> <body> <h1>স্বাগতম!</h1> <p>এটা আমার প্রথম HTML পেজ।</p> </body> </html>
এবার লাইন বাই লাইন বুঝে নিই কী হচ্ছে এখানে:
<!DOCTYPE html>
এটা ব্রাউজারকে বলে দেয় যে এই ডকুমেন্টটা HTML5 দিয়ে লেখা। এটা কোনো ট্যাগ না, এটা একটা ডিক্লারেশন — এবং সবসময় ফাইলের একদম প্রথম লাইনে বসে।
<html></html>
পুরো পেজের সবকিছু এই ট্যাগের ভেতরে থাকে। এটাকে বলা হয় root element। lang="bn" অ্যাট্রিবিউট দিয়ে বলা হয় পেজের ভাষা বাংলা।
<head></head>
এই অংশে থাকে পেজের মেটাডেটা — যেমন পেজের টাইটেল, character encoding, CSS/JS ফাইলের লিংক ইত্যাদি। এই অংশের কনটেন্ট ব্রাউজারে সরাসরি দেখা যায় না (টাইটেল ছাড়া, যেটা ব্রাউজার ট্যাবে দেখা যায়)।
<meta charset="UTF-8"> <title>আমার প্রথম ওয়েবপেজ</title>
meta charset="UTF-8" খুব গুরুত্বপূর্ণ — এটা না দিলে বাংলা টেক্সট ব্রাউজারে ভাঙাচোরা দেখাতে পারে।
<body></body>
এখানে যা লেখা হয়, সেটাই ব্রাউজারে দৃশ্যমান হয় — টেক্সট, ছবি, বাটন, লিংক, সবকিছু। আমাদের পুরো ভিজিবল কন্টেন্ট এই ট্যাগের ভেতরে বসে।
Tag, Element ও Attribute — এই তিনটা শব্দ পরিষ্কার করা যাক
Tag: কোণ ব্র্যাকেটের ভেতরের নাম, যেমন <p>, <h1>। বেশিরভাগ ট্যাগের একটা opening tag আর একটা closing tag থাকে — <p> ... </p>।
Element: opening tag, তার ভেতরের কন্টেন্ট, আর closing tag — সব মিলিয়ে একটা element। যেমন:
<p>এটা একটা প্যারাগ্রাফ।</p>
Attribute: ট্যাগের ভেতরে অতিরিক্ত তথ্য দেওয়ার জন্য ব্যবহৃত হয়। যেমন নিচের উদাহরণে lang একটা attribute:
<html lang="bn">
টিপস: কিছু ট্যাগের closing tag থাকে না, এদের বলে self-closing tag বা void element। যেমন — <br>, <img>, <meta>, <hr>। এই পর্বগুলো পরের পর্বে বিস্তারিত আসবে।
নিজে চেষ্টা করো
এবার নিজের কম্পিউটারে একটা .html ফাইল বানাও, উপরের কোডটা কপি করে বসাও, তারপর ব্রাউজারে ওপেন করে দেখো।
Exercise:
- একটা নতুন ফাইল বানাও নাম দাও
index.html - একটা
<h1>এ তোমার নাম লেখো - একটা
<p>এ নিজের সম্পর্কে ২-৩ লাইন লেখো - ব্রাউজারে ওপেন করে দেখো কেমন দেখাচ্ছে
পরের পর্বে যা থাকছে
পর্ব ২-এ আমরা শিখবো টেক্সট ফরম্যাটিং — Heading, Paragraph, Bold, Italic এবং আরও কিছু গুরুত্বপূর্ণ ট্যাগ, উদাহরণসহ।
প্রশ্ন থাকলে কমেন্টে জানাতে পারো।