গোলাম রসূল
সহকারী শিক্ষক
১৪ আগস্ট, ২০২৬ ১১:০৯ অপরাহ্ণ
HyperText Markup Language
ধরনঃ সাধারণ শিক্ষা
শ্রেণিঃ দ্বাদশ
বিষয়ঃ তথ্য ও যোগাযোগ প্রযুক্তি
অধ্যায়ঃ অধ্যায় ৫
এইচটিএমএল (HTML)-এর পূর্ণরূপ হলো HyperText Markup Language। এটি কোনো প্রোগ্রামিং ভাষা নয়; বরং এটি একটি মার্কআপ ল্যাঙ্গুয়েজ (Markup Language)। ওয়ার্ল্ড ওয়াইড ওয়েবে (WWW) যেকোনো ওয়েব পেজের মূল কাঠামো বা কঙ্কাল (Structure) তৈরি করার জন্য এইচটিএমএল ব্যবহার করা হয়।
১৯৯১ সালে ব্রিটিশ বিজ্ঞানী টিন বার্নার্স-লি (Tim Berners-Lee) প্রথম এইচটিএমএল আবিষ্কার করেন। বর্তমানে এর সর্বশেষ এবং সবচেয়ে শক্তিশালী সংস্করণ হলো HTML5।
এইচটিএমএল শব্দটির অর্থ
HyperText: এমন টেক্সট যা অন্যান্য ওয়েব পেজের সাথে যুক্ত বা লিংক করা থাকে (Hyperlink)।
Markup Language: বিভিন্ন ট্যাগ (Tags) ব্যবহার করে ওয়েব পেজের ভেতরের লেখা, ছবি ও কনটেন্টকে সাজানোর প্রক্রিয়া।
এইচটিএমএল-এর মৌলিক গঠন (Basic Structure)
একটি এইচটিএমএল ডকুমেন্টের এক্সটেনশন হয় .html বা .htm। একটি ওয়েব পেজের সাধারণ কোড স্ট্রাকচার নিচে দেওয়া হলো:
HTML
<!DOCTYPE html>
<html>
<head>
<title>আমার প্রথম ওয়েব পেজ</title>
</head>
<body>
<h1>স্বাগতম!</h1>
<p>এটি এইচটিএমএল দিয়ে তৈরি একটি সাধারণ অনুচ্ছেদ।</p>
</body>
</html>
প্রধান ট্যাগগুলোর কাজ:
<!DOCTYPE html>: এটি ব্রাউজারকে নির্দেশ করে যে ফাইলটি HTML5 সংস্করণে লেখা।<html>: পুরো ডকুমেন্টের মূল ট্যাগ। বাকি সব কোড এর ভেতরে থাকে।<head>: মেটা-ডাটা, পেজের টাইটেল এবং সিএসএস লিংক ধরে রাখে (যা মূল স্ক্রিনে দেখা যায় না)।<title>: ব্রাউজারের উপরে পেজের নাম দেখায়।<body>: ব্রাউজারের ডিসপ্লেতে প্রদর্শিত মূল উপাদানসমূহ (লেখা, ছবি, ভিডিও) এখানে থাকে।
ট্যাগ ও এলিমেন্ট (Tags & Elements)
এইচটিএমএল কাজ করে মূলত ট্যাগ-এর সাহায্যে। ট্যাগগুলো কোণাকৃতির বন্ধনী < > দ্বারা লেখা হয়।
স্টার্ট ট্যাগ (Opening Tag): যেমন
<p>কন্টেন্ট (Content): যা পেজে দেখা যাবে।
এন্ড ট্যাগ (Closing Tag): যেমন
</p>
ট্যাগ + কনটেন্ট = এলিমেন্ট
উদাহরণ:
<p>আমার সোনার বাংলা</p>হলো একটি সম্পূর্ণ প্যারাগ্রাফ এলিমেন্ট।
কিছু গুরুত্বপূর্ণ ও বহুল ব্যবহৃত ট্যাগ:
| ট্যাগ | বিবরণ ও কাজ |
<h1> থেকে <h6> | শিরোনাম বা হেডিং তৈরি করতে (<h1> সবচেয়ে বড়, <h6> সবচেয়ে ছোট) |
<p> | প্যারাগ্রাফ বা অনুচ্ছেদ লিখতে |
<a> | হাইপারলিঙ্ক বা অন্য ওয়েবসাইটের লিংক যুক্ত করতে |
<img> | পেজে ছবি যুক্ত করতে |
<ul> ও <ol> | বুলেট পয়েন্ট ও নম্বরযুক্ত তালিকা (List) তৈরি করতে |
<div> ও <span> | ওয়েব পেজের নির্দিষ্ট অংশ ব্লক বা কনটেইনার হিসেবে ভাগ করতে |
এইচটিএমএল অ্যাট্রিবিউট (Attributes)
অ্যাট্রিবিউট ওপেনিং ট্যাগের ভেতরে থেকে ট্যাগের অতিরিক্ত তথ্য প্রদান করে।
গঠন:
name="value"উদাহরণ:
<a href="[https://google.com](https://google.com)" target="_blank">Google</a>এখানে
hrefঅ্যাট্রিবিউটটি নির্ধারণ করে লিংকটি কোথায় যাবে এবংtargetবলে দেয় পেজটি নতুন ট্যাবে খুলবে কিনা।
HTML5-এর প্রধান সুবিধাসমূহ
সেমান্টিক ট্যাগ:
<header>,<nav>,<main>,<section>,<article>,<footer>ট্যাগের কারণে পেজের গঠন পরিষ্কার হয় এবং সার্চ ইঞ্জিন সহজে বুঝতে পারে (SEO-friendly)।মাল্টিমিডিয়া সাপোর্ট: অতিরিক্ত প্লাগইন ছাড়াই সরাসরি
<audio>ও<video>ট্যাগ দিয়ে গান বা ভিডিও চালানো যায়।ফর্ম কন্ট্রোল: নতুন ইনপুট টাইপ (যেমন:
date,color,email,number) যোগ করা হয়েছে।গ্রাফিক্স সুবিধা:
<canvas>ও<svg>ব্যবহার করে অ্যানিমেশন ও ২ডি/৩ডি গ্রাফিক্স তৈরি করা যায়।
মন্তব্য করুন
