21 KiB

Raw Blame History Unescape Escape

টেরারিয়াম প্রকল্প পর্ব ১: HTML পরিচিতি

স্কেচনোট: Tomomi Imura

HTML, বা HyperText Markup Language, প্রতিটি ওয়েবসাইটের ভিত্তি যা আপনি কখনও পরিদর্শন করেছেন। HTML হলো একটি কঙ্কাল যা ওয়েব পৃষ্ঠাগুলিকে গঠন দেয় – এটি নির্ধারণ করে কোথায় বিষয়বস্তু থাকবে, কীভাবে এটি সংগঠিত হবে এবং প্রতিটি অংশ কী প্রতিনিধিত্ব করে। CSS পরে আপনার HTML-কে রঙ এবং বিন্যাস দিয়ে সাজাবে, এবং JavaScript এটিকে ইন্টারঅ্যাক্টিভিটি দিয়ে প্রাণবন্ত করবে। HTML সেই প্রয়োজনীয় কাঠামো প্রদান করে যা অন্য সবকিছুকে সম্ভব করে তোলে।

এই পাঠে, আপনি একটি ভার্চুয়াল টেরারিয়াম ইন্টারফেসের HTML কাঠামো তৈরি করবেন। এই হাতে-কলমে প্রকল্পটি আপনাকে মৌলিক HTML ধারণাগুলি শেখাবে এবং একই সাথে একটি চাক্ষুষভাবে আকর্ষণীয় কিছু তৈরি করবে। আপনি শিখবেন কীভাবে বিষয়বস্তুকে সেমান্টিক উপাদান ব্যবহার করে সংগঠিত করতে হয়, ছবি নিয়ে কাজ করতে হয় এবং একটি ইন্টারঅ্যাক্টিভ ওয়েব অ্যাপ্লিকেশনের ভিত্তি তৈরি করতে হয়।

পাঠ শেষে, আপনার একটি কার্যকর HTML পৃষ্ঠা থাকবে যা গাছের ছবি সংগঠিত কলামে প্রদর্শন করবে, যা পরবর্তী পাঠে স্টাইলিংয়ের জন্য প্রস্তুত থাকবে। প্রথমে এটি সাধারণ দেখালেও চিন্তা করবেন না – CSS যোগ করার আগে HTML ঠিক এমনটাই হওয়া উচিত।

প্রাক-লেকচার কুইজ

📺 দেখুন এবং শিখুন: এই সহায়ক ভিডিও ওভারভিউটি দেখুন

আপনার প্রকল্প সেট আপ করা

HTML কোডে প্রবেশ করার আগে, আপনার টেরারিয়াম প্রকল্পের জন্য একটি সঠিক কর্মক্ষেত্র সেট আপ করা যাক। শুরু থেকেই একটি সংগঠিত ফাইল কাঠামো তৈরি করা একটি গুরুত্বপূর্ণ অভ্যাস যা আপনার ওয়েব ডেভেলপমেন্ট যাত্রায় আপনাকে সাহায্য করবে।

কাজ: আপনার প্রকল্প কাঠামো তৈরি করুন

আপনার টেরারিয়াম প্রকল্পের জন্য একটি নিবেদিত ফোল্ডার তৈরি করুন এবং আপনার প্রথম HTML ফাইল যোগ করুন। এখানে দুটি পদ্ধতি রয়েছে যা আপনি ব্যবহার করতে পারেন:

অপশন ১: Visual Studio Code ব্যবহার করে

Visual Studio Code খুলুন
"File" → "Open Folder" ক্লিক করুন অথবা Ctrl+K, Ctrl+O (Windows/Linux) বা Cmd+K, Cmd+O (Mac) ব্যবহার করুন
terrarium নামে একটি নতুন ফোল্ডার তৈরি করুন এবং এটি নির্বাচন করুন
Explorer প্যানেলে, "New File" আইকনে ক্লিক করুন
আপনার ফাইলের নাম দিন index.html

অপশন ২: টার্মিনাল কমান্ড ব্যবহার করে

mkdir terrarium
cd terrarium
touch index.html
code index.html

এই কমান্ডগুলি কী করে:

নতুন ডিরেক্টরি তৈরি করে terrarium নামে আপনার প্রকল্পের জন্য
ডিরেক্টরিতে প্রবেশ করে terrarium
একটি খালি index.html ফাইল তৈরি করে
ফাইলটি খুলে Visual Studio Code-এ সম্পাদনার জন্য

💡 প্রো টিপ: ফাইলের নাম index.html ওয়েব ডেভেলপমেন্টে বিশেষ। যখন কেউ একটি ওয়েবসাইট পরিদর্শন করে, ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে index.html খুঁজে বের করে এবং এটি ডিফল্ট পৃষ্ঠা হিসেবে প্রদর্শন করে। এর মানে হলো একটি URL যেমন https://mysite.com/projects/ স্বয়ংক্রিয়ভাবে projects ফোল্ডার থেকে index.html ফাইলটি পরিবেশন করবে, URL-এ ফাইলের নাম উল্লেখ করার প্রয়োজন ছাড়াই।

HTML ডকুমেন্ট কাঠামো বোঝা

প্রতিটি HTML ডকুমেন্ট একটি নির্দিষ্ট কাঠামো অনুসরণ করে যা ব্রাউজারগুলি সঠিকভাবে বুঝতে এবং প্রদর্শন করতে প্রয়োজন। এই কাঠামোটি একটি আনুষ্ঠানিক চিঠির মতো – এতে একটি নির্দিষ্ট ক্রমে প্রয়োজনীয় উপাদান থাকে যা প্রাপককে (এই ক্ষেত্রে, ব্রাউজার) বিষয়বস্তু সঠিকভাবে প্রক্রিয়া করতে সাহায্য করে।

চলুন শুরু করি সেই প্রয়োজনীয় ভিত্তি যোগ করে যা প্রতিটি HTML ডকুমেন্টে থাকা উচিত।

DOCTYPE ঘোষণা এবং মূল উপাদান

প্রতিটি HTML ফাইলের প্রথম দুটি লাইন ব্রাউজারের জন্য ডকুমেন্টের "পরিচিতি" হিসেবে কাজ করে:

<!DOCTYPE html>
<html></html>

এই কোডটি কী করে:

ডকুমেন্ট টাইপ ঘোষণা করে HTML5 হিসেবে <!DOCTYPE html> ব্যবহার করে
মূল <html> উপাদান তৈরি করে যা সমস্ত পৃষ্ঠার বিষয়বস্তু ধারণ করবে
আধুনিক ওয়েব মান প্রতিষ্ঠা করে সঠিক ব্রাউজার রেন্ডারিংয়ের জন্য
নিশ্চিত করে বিভিন্ন ব্রাউজার এবং ডিভাইস জুড়ে সামঞ্জস্যপূর্ণ প্রদর্শন

💡 VS Code টিপ: VS Code-এ যেকোনো HTML ট্যাগের উপর মাউস রেখে দিন, MDN Web Docs থেকে সহায়ক তথ্য, ব্যবহার উদাহরণ এবং ব্রাউজার সামঞ্জস্যের বিবরণ দেখতে।

📚 আরও জানুন: DOCTYPE ঘোষণা ব্রাউজারগুলিকে "quirks mode"-এ প্রবেশ করতে বাধা দেয়, যা খুব পুরানো ওয়েবসাইটগুলিকে সমর্থন করার জন্য ব্যবহৃত হয়। আধুনিক ওয়েব ডেভেলপমেন্ট সহজ <!DOCTYPE html> ঘোষণা ব্যবহার করে মান-সম্মত রেন্ডারিং নিশ্চিত করতে।

প্রয়োজনীয় ডকুমেন্ট মেটাডেটা যোগ করা

HTML ডকুমেন্টের <head> অংশে গুরুত্বপূর্ণ তথ্য থাকে যা ব্রাউজার এবং সার্চ ইঞ্জিনগুলির প্রয়োজন, কিন্তু দর্শকরা সরাসরি পৃষ্ঠায় দেখতে পান না। এটি "পর্দার পিছনে" তথ্যের মতো যা আপনার ওয়েবপৃষ্ঠাকে সঠিকভাবে কাজ করতে এবং বিভিন্ন ডিভাইস ও প্ল্যাটফর্ম জুড়ে সঠিকভাবে প্রদর্শিত হতে সাহায্য করে।

এই মেটাডেটা ব্রাউজারকে বলে কীভাবে আপনার পৃষ্ঠা প্রদর্শন করতে হবে, কোন অক্ষর এনকোডিং ব্যবহার করতে হবে, এবং বিভিন্ন স্ক্রিন সাইজ কীভাবে পরিচালনা করতে হবে – পেশাদার, অ্যাক্সেসযোগ্য ওয়েব পৃষ্ঠা তৈরির জন্য সবই অত্যন্ত গুরুত্বপূর্ণ।

কাজ: ডকুমেন্ট হেড যোগ করুন

আপনার <html> ট্যাগের মধ্যে এই <head> অংশটি যোগ করুন:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

প্রতিটি উপাদান কী অর্জন করে তা বিশ্লেষণ:

পৃষ্ঠার শিরোনাম সেট করে যা ব্রাউজার ট্যাব এবং সার্চ রেজাল্টে প্রদর্শিত হয়
UTF-8 অক্ষর এনকোডিং নির্ধারণ করে সারা বিশ্বে সঠিক টেক্সট প্রদর্শনের জন্য
**আধুন প্রম্পট: একটি সেমান্টিক HTML সেকশন তৈরি করুন যেখানে একটি প্রধান শিরোনাম "গাছের যত্ন নির্দেশিকা", তিনটি উপ-শিরোনাম "জল দেওয়া", "আলো প্রয়োজনীয়তা", এবং "মাটির যত্ন" থাকবে, প্রতিটি উপ-শিরোনামের অধীনে গাছের যত্ন সম্পর্কিত একটি প্যারাগ্রাফ থাকবে। সঠিক সেমান্টিক HTML ট্যাগ যেমন <section>, <h2>, <h3>, এবং <p> ব্যবহার করে কন্টেন্টটি সঠিকভাবে গঠন করুন।

এজেন্ট মোড সম্পর্কে আরও জানুন এখানে।

HTML ইতিহাস চ্যালেঞ্জ অন্বেষণ করুন

ওয়েব বিবর্তন সম্পর্কে শেখা

HTML উল্লেখযোগ্যভাবে বিকশিত হয়েছে যেহেতু টিম বার্নার্স-লি ১৯৯০ সালে CERN-এ প্রথম ওয়েব ব্রাউজার তৈরি করেছিলেন। কিছু পুরনো ট্যাগ যেমন <marquee> এখন অপ্রচলিত কারণ সেগুলি আধুনিক অ্যাক্সেসিবিলিটি মান এবং রেসপন্সিভ ডিজাইনের নীতিগুলির সাথে ভালোভাবে কাজ করে না।

এই পরীক্ষা করুন:

আপনার <h1> শিরোনামটি সাময়িকভাবে একটি <marquee> ট্যাগে মোড়ান: <marquee><h1>আমার টেরারিয়াম</h1></marquee>
আপনার পৃষ্ঠাটি একটি ব্রাউজারে খুলুন এবং স্ক্রলিং প্রভাবটি পর্যবেক্ষণ করুন
বিবেচনা করুন কেন এই ট্যাগটি অপ্রচলিত হয়েছে (ইঙ্গিত: ব্যবহারকারীর অভিজ্ঞতা এবং অ্যাক্সেসিবিলিটি সম্পর্কে চিন্তা করুন)
<marquee> ট্যাগটি সরিয়ে ফেলুন এবং সেমান্টিক মার্কআপে ফিরে যান

প্রতিফলন প্রশ্ন:

একটি স্ক্রলিং শিরোনাম কীভাবে ভিজ্যুয়াল প্রতিবন্ধকতা বা গতিশীল সংবেদনশীলতার সাথে ব্যবহারকারীদের প্রভাবিত করতে পারে?
কোন আধুনিক CSS কৌশলগুলি আরও অ্যাক্সেসযোগ্যভাবে অনুরূপ ভিজ্যুয়াল প্রভাব অর্জন করতে পারে?
কেন বর্তমান ওয়েব মান ব্যবহার করা অপ্রচলিত উপাদানের পরিবর্তে গুরুত্বপূর্ণ?

অপ্রচলিত এবং অপ্রচলিত HTML উপাদান সম্পর্কে আরও জানুন যাতে ওয়েব মানগুলি কীভাবে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে বিকশিত হয় তা বুঝতে পারেন।

পোস্ট-লেকচার কুইজ

পর্যালোচনা এবং স্ব-অধ্যয়ন

আপনার HTML জ্ঞান গভীর করুন

HTML ৩০ বছরেরও বেশি সময় ধরে ওয়েবের ভিত্তি হয়ে আছে, একটি সাধারণ ডকুমেন্ট মার্কআপ ভাষা থেকে একটি ইন্টারেক্টিভ অ্যাপ্লিকেশন তৈরির জন্য একটি উন্নত প্ল্যাটফর্মে বিকশিত হয়েছে। এই বিবর্তনটি বোঝা আপনাকে আধুনিক ওয়েব মানগুলির প্রশংসা করতে এবং আরও ভাল উন্নয়ন সিদ্ধান্ত নিতে সাহায্য করে।

প্রস্তাবিত শেখার পথ:

HTML ইতিহাস এবং বিবর্তন
- HTML 1.0 থেকে HTML5 পর্যন্ত টাইমলাইনটি গবেষণা করুন
- কেন কিছু ট্যাগ অপ্রচলিত হয়েছে তা অন্বেষণ করুন (অ্যাক্সেসিবিলিটি, মোবাইল-বন্ধুত্ব, রক্ষণাবেক্ষণযোগ্যতা)
- উদীয়মান HTML বৈশিষ্ট্য এবং প্রস্তাবগুলি তদন্ত করুন
সেমান্টিক HTML গভীরভাবে অন্বেষণ করুন
- HTML5 সেমান্টিক উপাদানগুলির সম্পূর্ণ তালিকা অধ্যয়ন করুন
- কখন <article>, <section>, <aside>, এবং <main> ব্যবহার করবেন তা চিহ্নিত করার অনুশীলন করুন
- উন্নত অ্যাক্সেসিবিলিটির জন্য ARIA অ্যাট্রিবিউট সম্পর্কে জানুন
আধুনিক ওয়েব ডেভেলপমেন্ট
- রেসপন্সিভ ওয়েবসাইট তৈরি Microsoft Learn-এ অন্বেষণ করুন
- HTML কীভাবে CSS এবং JavaScript-এর সাথে সংহত হয় তা বুঝুন
- ওয়েব পারফরম্যান্স এবং SEO সেরা অনুশীলন সম্পর্কে জানুন