এইচটিএমএল কি?

আমরা এখন এইচটিএমএল কি? এবং এইচটিএমএল সিনট্যাক্স নিয়ে আলোচনা করবো ।

এইচটিএমএল কি?

এইচটিএমএল এর পূর্ণরূপ হচ্ছে Hypertext Markup Language (হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ ) এটা একটা মার্কাআপ ল্যাঙ্গুয়েজ । এইচটিএমএল কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয় । এটা দিয়ে ওয়েবসাইটের কাঠামো গঠন করা হয় । যাইহোক, এইচটিএমএল শেখার প্রয়োজনীয়তা সম্পর্কে আগেই আলোচনা করেছি । এইচটিএমএল এর সর্বশেষ ভার্সন হচ্ছে এইচটিএমএল ৫ । এতে নতুন অনেক ফিচার যোগ করা হয়েছে ।

এইচটিএমএল শিখতে হলে আপনার কম্পিউটার এ একটি ব্রাউজার থাকতে হবে আর একটি টেক্সট এডিটর লাগবে । টেক্সট এডিটর হিসেবে নোটপ্যাড প্লাস প্লাস ব্যবহার করতে পারেন ।

এইচটিএমএল এর সিনট্যাক্স

এখন আমি এইচটিএমএল এর গঠন সম্পর্কে আলোচনা করবো । প্রত্যেকটা লাইন বুঝার চেষ্টা করুন । যদি কোন লাইন বুঝতে অসুবিধা হয় তাহলে আমাকে কমেন্ট এর মাধ্যমে জানাবেন । মনে রাখবেন, যদি আজকের পর্ব ভাল করে বুঝতে না পারেন তাহলে আর বাকি পর্বসমূহ বুঝতে পারবেন না ।

এইচটিএমএল শুরু করার জন্য প্রথমেই নিচের কোডটুকু নোটপ্যাড এ লিখুন । কপি করে লিখবেন না নিজের হাতে লিখুনঃ

<!DOCTYPE HTML>
<html>
<head>
<title> This is Page Title </title>
</head>
<body>
Welcome to HTML Tutorial!
</body>
</html>

এটা হচ্ছে এইচটিএমএল এর বেসিক গঠন । এবার কোডটুকু index.html নামে সেভ করুন এবং তা একটি ব্রাউজারে প্রদর্শন করুন । তাহলে দেখতে পারবেন ব্রাউজারে Welcome to HTML Tutorial! লেখাটি প্রদর্শন করেছে ।

কোড বিশ্লেষণ

আমি বুঝতে পারছি আপনারা এখনো হয়ত কিছুই বুঝতে পারেন নি । কোন সমস্যা নেই । আমি এখন প্রতিটি লাইন আপানদের বুঝিয়ে দিচ্ছি ।

১। প্রথম লাইনটি লিখে ব্রাউজারকে বুঝানো হয়েছে যে এটা একটা এইচটিএমএল ডকুমেন্ট । আমরা এইচটিএমএল৫ ব্যবহার করছি তাই আমরা <!DOCTYPE HTML> ব্যবহার করছি । যদি আমরা এইচটিএমএল ৪.০১ ব্যবহার করতাম তাহলে নিচের মত লিখতে হতো;

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

যাইহোক, যেহেতু আমরা এইচটিএমএল ৫ ব্যবহার করছি তাই আমরা শুধু <!DOCTYPE HTML> লিখবো । সব এইচটিএমএল এর শুরুতে এই ডক টাইপ ব্যবহার করতে হবে । অনেকে এইচটিএমএল ডকটাইপ এ গুরুত্ব দেন না । কিন্তু, প্রফেশনাল হতে হলে এ বিষয়টি কখনো এড়িয়ে যাবেন না । কেননা, ডকটাইপ ব্যবহার না করলে কিছু ব্রাউজারে ঠিকমত আউটপুট আসে না । তাই, প্রত্যেক এইচটিএমএল ফাইলের শুরুতে ডকটাইপ ব্যবহার করবেন ।

২ । দ্বিতীয় লাইনটি বুঝানোর আগে আমি আপনাদের কাছে এইচটিএমএল ট্যাগ সম্পর্কে আলোচনা করে নিই ।  উপরের লিখিত html, head, title, body প্রত্যেকটিকে ট্যাগ বলা হয় । একটু লক্ষ্য করে দেখুন ট্যাগ Less Than চিহ্ন দিয়ে শুরু হয় এবং Greater Than চিহ্ন দিয়ে শেষ হয় । তাই, <html>, <head>, <title>, <body> লেখা হয়েছে । প্রায় প্রত্যেকটি ট্যাগ এর শুরু এবং শেষ আছে । তাই, যখন <html> ট্যাগ শুরু হয়েছে তখন ট্যাগটি </html> এভাবে শেষ হয়েছে । ট্যাগ শেষ করার জন্য Less Than চিহ্নের পরে একটা Forward Slash (/) চিহ্ন দিতে হয় । ট্যাগ সরাসরি ব্রাউজারে প্রদর্শন করে না । তাই দেখুন index.html ফাইলটি ওপেন করার পর কোন ট্যাগ ব্রাউজারে প্রদর্শিত হয়নি । শুধু ইলিমেন্টসমূহ ব্রাউজের প্রদর্শিত হয় । এইচটিএমএল ট্যাগ এর মাঝখানে যে টেক্সট থাকে তা হচ্ছে ইলিমেন্ট ।

৩ । দ্বিতীয় লাইনটি হচ্ছে ট্যাগ । সমস্ত এইচটিএমএল কোড <html> ট্যাগ এর মাঝে লিখতে হয় । নবম লাইন এ <html> এর ট্যাগ শেষ করা হয়েছে । <html> ট্যাগ এর দুটি সেকশন রয়েছে একটি হচ্ছে <head> সেকশন এবং অপরটি হচ্ছে <body> সেকশন ।

৪। তৃতীয় লাইনটি হচ্ছে একটি ট্যাগ যা পঞ্চম লাইন এ শেষ হয়েছে । একইভাবে,  <body> একটি ট্যাগ যা পরবর্তীতে ট্যাগ শেষ করা হয়েছে ।

৫ । সপ্তম লাইন এ Welcome to HTML Tutorial! লিখেছি এবং এটা ব্রাউজারে প্রদর্শিত হয়েছে । এটা হচ্ছে এইচটিএমএল ইলিমেন্ট । শুরু করার ট্যাগ এবং শেষ করার ট্যাগ এর মাঝখানে ইলিমেন্ট থাকে এবং ইলিমেন্ট ব্রাউজারে প্রদর্শিত হয় । কিন্তু, ট্যাগ ব্রাউজারে সরাসরি প্রদর্শিত হয় না ।

সবশেষে, আপনি ফাইলটি index.html নামে সেভ করেছেন । এখানে আপনি index লেখার পরিবর্তে যেকোনো টেক্সট লিখতে পারেন । এটা আপনার ইচ্ছা । তবে .html এক্সটেনশন ঠিক রাখতে হবে । অর্থাৎ ফাইলের নামের পর .html থাকতে হবে । অনেকে .html এর পরিবর্তে ভুল করে .txt দিয়ে সেভ করে ব্রাউজারে ওপেন করান । কিন্তু এতে কাজ করবে না ।

আশা করি এইচটিএমএল কি? এবং এইচটিএমএল সিনট্যাক্স সম্পর্কে জানতে পেরেছেন ।

Series Navigation<< এইচটিএমএল টিউটোরিয়ালএইচটিএমএল ট্যাগ >>

Leave a Reply

Your email address will not be published. Required fields are marked *