এইচটিএমএল (HTML5)

HTML5 হলো HTML (HyperText Markup Language) এর একটি আপডেট সংস্করণ, যা 2014 সালে World Wide Web Consortium (W3C) দ্বারা স্ট্যান্ডার্ড হিসাবে গ্রহণ করা হয়। HTML5 মূলত ওয়েব পেজ তৈরির জন্য একটি মার্কআপ ভাষা, তবে এটি নতুন ফিচার, উন্নত কার্যকারিতা, এবং মাল্টিমিডিয়া সমর্থনের জন্য বিভিন্ন নতুন উপাদান নিয়ে এসেছে। HTML5 ওয়েব ডেভেলপমেন্টের জন্য আধুনিক এবং শক্তিশালী একটি প্ল্যাটফর্ম সরবরাহ করে।

HTML5 বাংলা গাইড:

১. HTML5 এর পরিচিতি

HTML5 হচ্ছে HyperText Markup Language-এর পঞ্চম সংস্করণ। এটি ওয়েব পেজ ডিজাইন এবং গঠন তৈরি করার জন্য ব্যবহৃত হয়। HTML5 পূর্বের সংস্করণের তুলনায় আরও বেশি কার্যকর এবং সহজ সরল উপায়ে ওয়েব পেজ তৈরি করার সুযোগ দেয়।

২. HTML5 ডকুমেন্টের স্ট্রাকচার

HTML5 ডকুমেন্ট সাধারণত এই ফরম্যাটে তৈরি হয়:

৩. HTML5 এর নতুন ট্যাগসমূহ

HTML5-এ কিছু নতুন ট্যাগ যুক্ত হয়েছে যা পৃষ্ঠার গঠন এবং বিষয়বস্তুকে আরও পরিষ্কারভাবে উপস্থাপন করতে সাহায্য করে। এদের মধ্যে কয়েকটি গুরুত্বপূর্ণ ট্যাগ হলো:

• : শিরোনাম অংশের জন্য ব্যবহৃত হয়।
• : পৃষ্ঠার নিচের অংশের তথ্যের জন্য ব্যবহৃত হয়।
• : স্বাধীন বা নির্দিষ্ট বিষয়বস্তুর জন্য ব্যবহৃত হয়।
• : বিষয়বস্তুর বিভাগ তৈরি করতে ব্যবহৃত হয়।
• : ন্যাভিগেশন লিঙ্কগুলি ধারণ করতে ব্যবহৃত হয়।

৪. HTML5 ফর্মস (Forms)

HTML5-এ ফর্মগুলোর জন্য বেশ কিছু নতুন ইনপুট টাইপ যুক্ত হয়েছে, যেমন:

• email: ইমেল ইনপুটের জন্য।
• url: ইউআরএল ইনপুটের জন্য।
• number: শুধুমাত্র সংখ্যা ইনপুটের জন্য।
• range: স্লাইডার ইনপুটের জন্য।
• date: তারিখ ইনপুটের জন্য।

৫. মাল্টিমিডিয়া: অডিও এবং ভিডিও

HTML5 এ মাল্টিমিডিয়া সাপোর্ট খুব সহজ এবং শক্তিশালী হয়েছে। আপনি সরাসরি অডিও এবং ভিডিও এম্বেড করতে পারেন এবং ট্যাগ ব্যবহার করে। যেমন:

অডিও:

ভিডিও:

৬. ক্যানভাস (Canvas)

HTML5 এ ট্যাগ ব্যবহার করে ২ডি (2D) গ্রাফিক্স এবং অ্যানিমেশন তৈরি করা সম্ভব। এটি জাভাস্ক্রিপ্টের সাথে সমন্বয় করে কাজ করে।

৭. ওয়েব স্টোরেজ (Web Storage)

HTML5 এ localStorage এবং sessionStorage এপিআই রয়েছে যা ব্যবহারকারীর ডেটা ব্রাউজারে সংরক্ষণ করতে সাহায্য করে। এটি কুকিজের চেয়ে নিরাপদ এবং ডেটা স্টোরেজের জন্য আরও বড় স্থান প্রদান করে।

localStorage উদাহরণ:

// ডেটা সংরক্ষণ
localStorage.setItem("name", "বাংলা গাইড");

// ডেটা পড়া
let name = localStorage.getItem("name");

৮. জিওলোকেশন এপিআই (Geolocation API)

HTML5 জিওলোকেশন API ব্যবহার করে ব্যবহারকারীর অবস্থান জানা সম্ভব। এটি গুগল ম্যাপ বা অন্য যে কোন লোকেশন নির্ভর অ্যাপ্লিকেশনের জন্য দরকারি।

উদাহরণ:

navigator.geolocation.getCurrentPosition(function(position) {
  console.log("Latitude: " + position.coords.latitude);
  console.log("Longitude: " + position.coords.longitude);
});

৯. HTML5 এর সুবিধাসমূহ

• সহজ কোডিং: HTML5 এর সিম্পল এবং ক্লিন কোডিং স্টাইলের জন্য ডেভেলপমেন্ট প্রক্রিয়া সহজ হয়েছে।
• ক্রস-ব্রাউজার সাপোর্ট: HTML5 সব আধুনিক ব্রাউজার সমর্থন করে।
• ওয়েব অ্যাপ্লিকেশন উন্নয়ন: নতুন ফিচারগুলির জন্য ওয়েব অ্যাপ্লিকেশন তৈরি করা এখন অনেক সহজ এবং কার্যকরী হয়েছে।

১০. রেসপনসিভ ডিজাইন (Responsive Design)

HTML5 এবং CSS3 এর সমন্বয়ে রেসপনসিভ ডিজাইন করা সহজ হয়েছে। Media Queries ব্যবহার করে বিভিন্ন ডিভাইস অনুযায়ী পেজের লেআউট পরিবর্তন করা সম্ভব।

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

১১. HTML5 এ SEO (Search Engine Optimization)

HTML5 এর সেম্যান্টিক ট্যাগগুলির মাধ্যমে সার্চ ইঞ্জিনগুলোর জন্য ওয়েব পেজ গুলোর গঠন বোঝা সহজ হয়েছে, যা SEO-এর জন্য গুরুত্বপূর্ণ ভূমিকা পালন করে।

উপসংহার

HTML5 একটি আধুনিক ও কার্যকর ওয়েব ডেভেলপমেন্ট টুল যা ওয়েব পেজকে আরও ইন্টারঅ্যাকটিভ, ব্যবহারকারী বান্ধব এবং রেসপনসিভ করে তোলে।