এইচটিএমএল (HyperText Markup Language) ওয়েব পেজ তৈরি এবং ডিজাইন করার জন্য ব্যবহৃত স্ট্যান্ডার্ড ভাষা (language)। এটি ওয়ার্ল্ড ওয়াইড ওয়েবের মেরুদণ্ড এবং ওয়েবসাইট তৈরি বা ডিজাইন করার জন্য অপরিহার্য। এই পোস্টে, আমরা HTML কি, এর গঠন, এর মূল বিষয়গুলি এবং কিভাবে শিখবেন তা কভার করবো।
HTML কি?
HTML এর পূর্ণরূপ (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ) এটি একটি বিশেষ ধরনের কম্পিউটার কোড যা ইন্টারনেটে ওয়েব পেজ তৈরি করতে ব্যবহৃত হয়।
ঠিক যেমন একজন স্থপতি (architect) একটি বিল্ডিংয়ের জন্য পরিকল্পনা তৈরি করেন যা নির্মাণ কর্মীদের বলে যে কোন উপকরণগুলি ব্যবহার করতে হবে এবং কীভাবে সেগুলিকে একত্রিত করতে হবে, এইচটিএমএল হলো নির্দেশের একটি সেট যা ওয়েব ব্রাউজারকে বলে যে কিভাবে একটি ওয়েব পেজ প্রদর্শন করতে হবে৷
তাই আপনি যখন কোনো ওয়েবসাইট ভিজিট করেন, তখন আপনার ওয়েব ব্রাউজার HTML কোড পড়ে এবং এটিকে আপনার স্ক্রিনে দেখতে পাওয়া ওয়েবসাইটে পরিণত করে।
HyperText Markup Language অর্থ
HTML এর পূর্ণরূপ হলো "HyperText Markup Language" এটি শুনে কঠিন মনে হতে পারে, তবে এটি আসলে বেশ সহজ।
"HyperText" এর অর্থ হলো একটি ওয়েব পৃষ্ঠার পাঠ্যে এমন লিঙ্ক থাকতে পারে যা আপনাকে অন্য পৃষ্ঠাগুলিতে নিয়ে যায়।
"Markup" এর মানে হলো যে HTML বিশেষ কোড ব্যবহার করে (যাকে "ট্যাগ" বলা হয়)। এই ট্যাগগুলি ওয়েব ব্রাউজারকে বলে যে কিভাবে পাঠ্য (text), ছবি, লিঙ্ক এবং অন্যান্য মাল্টিমিডিয়া সহ পৃষ্ঠার বিষয়বস্তু প্রদর্শন করাতে হবে।
"Language" মানে হলো এইচটিএমএল এক ধরনের কম্পিউটার কোড যা প্রোগ্রামাররা ওয়েব পেজ তৈরি করতে ব্যবহার করে।
সুতরাং, যখন আপনি এটি সব একসাথে রাখেন, HTML হল সেই ভাষা যা প্রোগ্রামাররা লিঙ্ক এবং বিশেষ বিন্যাস সহ ওয়েব পৃষ্ঠাগুলো তৈরি করতে ব্যবহার করে।
HTML এর গঠন
একটি সাধারণ এইচটিএমএল ডকুমেন্টের মৌলিক গঠন এইরকম দেখায়:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>এটিকে সহজ ভাবে বিশ্লেষণ করি:
- <!DOCTYPE html> একটি বিশেষ কোড যা ওয়েব ব্রাউজারকে বলে যে HTML এর কোন সংস্করণ (version) ব্যবহার করা হচ্ছে।
- <html> ডকুমেন্ট সবকিছু <html> ট্যাগের ভিতরে যায়।
- <head> যেখানে ডকুমেন্ট সম্পর্কে তথ্য যায়, যেমন পৃষ্ঠার শিরোনাম (যা ব্রাউজার ট্যাবে প্রদর্শিত হয়)।
- <title> যেখানে আপনি পৃষ্ঠার শিরোনাম রাখেন।
- <body> যেখানে পৃষ্ঠার সমস্ত দৃশ্যমান বিষয়বস্তু যায়।
- <h1> একটি শিরোনাম ট্যাগ, এবং এটি পাঠ্যকে আরও বড় এবং বোল্ড করে তোলে। এছাড়াও বিভিন্ন স্তরের শিরোনামের জন্য <h2>, <h3> এবং আরও রয়েছে।
- <p> একটি অনুচ্ছেদ (paragraph) ট্যাগ, এবং এটি পৃষ্ঠায় সাধারণত পাঠ্যের জন্য ব্যবহৃত হয়।
সুতরাং, এইচটিএমএল এর গঠন আসলেই ট্যাগের একটি সেট যা একটি ওয়েব পৃষ্ঠার বিভিন্ন অংশকে সংজ্ঞায়িত করতে ব্যবহার করা হয়।
এলিমেন্ট (Elements)
এইচটিএমএল Element হলো একটি ওয়েব পেজের বিল্ডিং ব্লক। ট্যাগ গুলি কোণ বন্ধনী (< >) দ্বারা আবদ্ধ থাকে। সবচেয়ে সাধারণ কিছু এলিমেন্ট হল:
- শিরোনাম: <h1> থেকে <h6>
- অনুচ্ছেদ: <p>
- তালিকা: <ul> (Unordered) এবং <ol> (অর্ডার করা)
- ছবি: <img>
- লিঙ্ক: <a>
- বিভাগ: <div>
- স্প্যান: <span>
Attributes
এইচটিএমএল এলিমেন্ট এর Attribute থাকতে পারে, যা এলিমেন্ট সম্পর্কে অতিরিক্ত তথ্য প্রদান করে। উদাহরণস্বরূপ, <img> এলিমেন্টটির একটি "src" Attribute রয়েছে, যা ব্রাউজারকে বলে যে ছবিটি কোথায় অবস্থিত যেমন "src='image.jpg'"
সাধারণ ব্যবহার
সাধারণ ব্যক্তিগত ব্লগ থেকে জটিল ই-কমার্স সাইট পর্যন্ত সকল ধরনের ওয়েব পেজ তৈরি করতে HTML ব্যবহার করা হয়। এটি ওয়েব-ভিত্তিক অ্যাপ এবং মোবাইল অ্যাপ তৈরি করার পাশাপাশি ইমেল টেমপ্লেট এবং ল্যান্ডিং পেজ তৈরি করতেও ব্যবহৃত হয়। ইন্টারেক্টিভ এবং আকর্ষণীয় ওয়েবসাইট তৈরি করতে এইচটিএমএল অন্যান্য ভাষার সাথে যেমন CSS এবং জাভাস্ক্রিপ্টের সাথে ব্যবহার করা হয়।
একসাথে, HTML, CSS, এবং JavaScript ওয়ার্ল্ড ওয়াইড ওয়েবের মূল প্রযুক্তি গঠন করে।
HTML কিভাবে শিখব
HTML শিখে আপনি ওয়েব ডেভেলপমেন্ট এর যাত্রা শুরু করতে পারেন। সাধারণত HTML শিখতে খুব বেশি সময় লাগে না, তবে এটি আপনার ওপর নির্ভর করে। এখানে দেওয়া টিপস গুলো ফলো করে আপনি খুব সহজে এইচটিএমএল শিখতে পারবেন।
বেসিক থেকে শুরু করুন: HTML প্রথমে কিছুটা কঠিন মনে হতে পারে, কিন্তু আপনি একবার শিখে ফেললে এটিকে একদম সহজ মনে হবে। একটি এইচটিএমএল ডকুমেন্টের মৌলিক কাঠামো এবং কিছু সাধারণ এইচটিএমএল ট্যাগ শেখার মাধ্যমে শুরু করুন, যেমন <h1>, <p> এবং <a>। আপনি অনলাইনে অনেক টিউটোরিয়াল পেতে পারেন যা আপনাকে শুরু করতে সহায়তা করবে৷
অনুশীলন, অনুশীলন, অনুশীলন: HTML শেখার সর্বোত্তম উপায় হল এটি অনুশীলন করা। আপনার নিজস্ব ওয়েব পৃষ্ঠা তৈরি করার অনুশীলন করুন, বিভিন্ন ট্যাগ এবং লেআউট নিয়ে পরীক্ষা করুন৷ আপনি আপনার কোড লিখতে বিভিন্ন কোড এডিটর ব্যবহার করতে পারেন।
অনলাইন রিসোর্স ব্যবহার করুন: আপনাকে HTML শিখতে সহায়তা করার জন্য অনলাইনে প্রচুর দুর্দান্ত রিসোর্স রয়েছে৷ Codecademy, W3Schools এবং Khan Academy এর মতো ওয়েবসাইট গুলো বিনামূল্যে অনলাইন কোর্স অফার করে যার মাধ্যমে আপনি HTML এবং অন্যান্য প্রোগ্রামিং ভাষা শিখতে পারবেন।
বিভিন্ন কমিউনিটিতে যোগ দিন: ওয়েব ডেভেলপার এবং ডিজাইনারদের প্রচুর অনলাইন কমিউনিটি রয়েছে যেখানে আপনি সাহায্য চাইতে পারেন, আপনার কাজ সম্পর্কে প্রতিক্রিয়া পেতে পারেন এবং আপনার নিজস্ব জ্ঞান শেয়ার করতে পারেন৷ অন্যান্য নবীন এবং পেশাদারদের সাথে সংযোগ করতে Reddit এর r/webdev, Stack Overflow, বা CodePen এর মত ফোরাম গুলো দেখুন।
শিখতে থাকুন: HTML মাত্র শুরু! আপনি বেসিকগুলি আয়ত্ত করার পরে, আপনি CSS এবং JavaScript এর মতো অন্যান্য ওয়েব প্রযুক্তি সম্পর্কে শেখা শুরু করতে পারেন, যা আপনাকে আরও জটিল এবং ইন্টারেক্টিভ ওয়েব পৃষ্ঠাগুলো তৈরি করতে সাহায্য করবে৷ আপনার দক্ষতা বৃদ্ধি করতে অবিরাম শিখুন ও পরীক্ষা করতে থাকুন।