# টেরারিয়াম প্রকল্প পর্ব ১: HTML পরিচিতি ```mermaid journey title Your HTML Learning Journey section Foundation Create HTML file: 3: Student Add DOCTYPE: 4: Student Structure document: 5: Student section Content Add metadata: 4: Student Include images: 5: Student Organize layout: 5: Student section Semantics Use proper tags: 4: Student Enhance accessibility: 5: Student Build terrarium: 5: Student ``` ![HTML পরিচিতি](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.bn.png) > স্কেচনোট [Tomomi Imura](https://twitter.com/girlie_mac) দ্বারা HTML, বা HyperText Markup Language, প্রতিটি ওয়েবসাইটের ভিত্তি যা আপনি কখনও পরিদর্শন করেছেন। HTML কে ওয়েব পৃষ্ঠার কাঠামো হিসেবে ভাবুন – এটি নির্ধারণ করে কোথায় বিষয়বস্তু যাবে, কীভাবে এটি সংগঠিত হবে এবং প্রতিটি অংশ কী প্রতিনিধিত্ব করে। CSS পরে আপনার HTML-কে রঙ এবং লেআউট দিয়ে সাজাবে, এবং JavaScript এটিকে ইন্টারঅ্যাক্টিভিটি দিয়ে প্রাণবন্ত করবে, HTML সেই মৌলিক কাঠামো প্রদান করে যা সবকিছু সম্ভব করে তোলে। এই পাঠে, আপনি একটি ভার্চুয়াল টেরারিয়াম ইন্টারফেসের HTML কাঠামো তৈরি করবেন। এই হাতে-কলমে প্রকল্পটি আপনাকে মৌলিক HTML ধারণা শেখাবে এবং একই সাথে কিছু চাক্ষুষভাবে আকর্ষণীয় তৈরি করবে। আপনি শিখবেন কীভাবে বিষয়বস্তুকে সেমান্টিক উপাদান ব্যবহার করে সংগঠিত করতে হয়, ছবি নিয়ে কাজ করতে হয় এবং একটি ইন্টারঅ্যাক্টিভ ওয়েব অ্যাপ্লিকেশনের ভিত্তি তৈরি করতে হয়। পাঠ শেষে, আপনার একটি কার্যকর HTML পৃষ্ঠা থাকবে যা গাছের ছবি সংগঠিত কলামে প্রদর্শন করবে, যা পরবর্তী পাঠে স্টাইলিংয়ের জন্য প্রস্তুত। যদি এটি প্রথমে সাধারণ দেখায়, চিন্তা করবেন না – CSS যোগ করার আগে HTML ঠিক এমনটাই হওয়া উচিত। ```mermaid mindmap root((HTML Fundamentals)) Structure DOCTYPE Declaration HTML Element Head Section Body Content Elements Tags & Attributes Self-closing Tags Nested Elements Block vs Inline Content Text Elements Images Containers (div) Lists Semantics Meaningful Tags Accessibility Screen Readers SEO Benefits Best Practices Proper Nesting Valid Markup Descriptive Alt Text Organized Structure ``` ## প্রাক-লেকচার কুইজ [প্রাক-লেকচার কুইজ](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **দেখুন এবং শিখুন**: এই সহায়ক ভিডিও ওভারভিউটি দেখুন > > [![HTML মৌলিক বিষয়ক ভিডিও](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## আপনার প্রকল্প সেট আপ করা HTML কোডে ডুব দেওয়ার আগে, আপনার টেরারিয়াম প্রকল্পের জন্য একটি সঠিক কর্মক্ষেত্র সেট আপ করা যাক। শুরু থেকেই একটি সংগঠিত ফাইল কাঠামো তৈরি করা একটি গুরুত্বপূর্ণ অভ্যাস যা আপনার ওয়েব ডেভেলপমেন্ট যাত্রায় আপনাকে সাহায্য করবে। ### কাজ: আপনার প্রকল্পের কাঠামো তৈরি করুন আপনি আপনার টেরারিয়াম প্রকল্পের জন্য একটি নিবেদিত ফোল্ডার তৈরি করবেন এবং আপনার প্রথম HTML ফাইল যোগ করবেন। এখানে দুটি পদ্ধতি রয়েছে যা আপনি ব্যবহার করতে পারেন: **অপশন ১: ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে** 1. ভিজ্যুয়াল স্টুডিও কোড খুলুন 2. "File" → "Open Folder" ক্লিক করুন অথবা `Ctrl+K, Ctrl+O` (Windows/Linux) বা `Cmd+K, Cmd+O` (Mac) ব্যবহার করুন 3. `terrarium` নামে একটি নতুন ফোল্ডার তৈরি করুন এবং এটি নির্বাচন করুন 4. Explorer প্যানেলে, "New File" আইকনে ক্লিক করুন 5. আপনার ফাইলের নাম দিন `index.html` ![VS Code Explorer নতুন ফাইল তৈরি দেখাচ্ছে](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.bn.png) **অপশন ২: টার্মিনাল কমান্ড ব্যবহার করে** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **এই কমান্ডগুলো কী করে:** - **নতুন ডিরেক্টরি তৈরি করে** `terrarium` নামে আপনার প্রকল্পের জন্য - **ডিরেক্টরিতে প্রবেশ করে** `terrarium` - **একটি খালি `index.html` ফাইল তৈরি করে** - **ফাইলটি খুলে** ভিজ্যুয়াল স্টুডিও কোডে সম্পাদনার জন্য > 💡 **প্রো টিপ**: ওয়েব ডেভেলপমেন্টে `index.html` ফাইলের নামটি বিশেষ। যখন কেউ একটি ওয়েবসাইট পরিদর্শন করে, ব্রাউজার স্বয়ংক্রিয়ভাবে `index.html` কে ডিফল্ট পৃষ্ঠা হিসেবে প্রদর্শন করার জন্য খুঁজে বের করে। এর মানে হল যে `https://mysite.com/projects/` এর মতো একটি URL স্বয়ংক্রিয়ভাবে `projects` ফোল্ডার থেকে `index.html` ফাইলটি পরিবেশন করবে, URL-এ ফাইলের নাম উল্লেখ করার প্রয়োজন ছাড়াই। ## HTML ডকুমেন্টের কাঠামো বোঝা প্রতিটি HTML ডকুমেন্ট একটি নির্দিষ্ট কাঠামো অনুসরণ করে যা ব্রাউজারগুলি সঠিকভাবে বুঝতে এবং প্রদর্শন করতে প্রয়োজন। এই কাঠামোটি একটি আনুষ্ঠানিক চিঠির মতো – এতে একটি নির্দিষ্ট ক্রমে প্রয়োজনীয় উপাদান রয়েছে যা প্রাপক (এই ক্ষেত্রে, ব্রাউজার) বিষয়বস্তু সঠিকভাবে প্রক্রিয়া করতে সাহায্য করে। ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> Heading"] G --> I["<div> Containers"] G --> J["<img> Images"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` চলুন শুরু করি সেই মৌলিক ভিত্তি যোগ করে যা প্রতিটি HTML ডকুমেন্টে প্রয়োজন। ### DOCTYPE ঘোষণা এবং মূল উপাদান যেকোনো HTML ফাইলের প্রথম দুটি লাইন ব্রাউজারের কাছে ডকুমেন্টের "পরিচিতি" হিসেবে কাজ করে: ```html <!DOCTYPE html> <html></html> ``` **এই কোডটি কী করে:** - **ডকুমেন্ট টাইপ ঘোষণা করে** HTML5 হিসেবে `<!DOCTYPE html>` ব্যবহার করে - **মূল `<html>` উপাদান তৈরি করে** যা সমস্ত পৃষ্ঠার বিষয়বস্তু ধারণ করবে - **আধুনিক ওয়েব স্ট্যান্ডার্ড প্রতিষ্ঠা করে** সঠিক ব্রাউজার রেন্ডারিংয়ের জন্য - **বিভিন্ন ব্রাউজার এবং ডিভাইস জুড়ে** সামঞ্জস্যপূর্ণ প্রদর্শন নিশ্চিত করে > 💡 **VS Code টিপ**: ভিজ্যুয়াল স্টুডিও কোডে যেকোনো HTML ট্যাগের উপর মাউস রাখুন এবং MDN Web Docs থেকে সহায়ক তথ্য দেখুন, যার মধ্যে ব্যবহার উদাহরণ এবং ব্রাউজার সামঞ্জস্যতার বিবরণ রয়েছে। > 📚 **আরও জানুন**: DOCTYPE ঘোষণা ব্রাউজারগুলিকে "quirks mode" এ প্রবেশ করা থেকে বিরত রাখে, যা খুব পুরানো ওয়েবসাইটগুলিকে সমর্থন করার জন্য ব্যবহৃত হত। আধুনিক ওয়েব ডেভেলপমেন্ট সহজ `<!DOCTYPE html>` ঘোষণা ব্যবহার করে [স্ট্যান্ডার্ড-কমপ্লায়েন্ট রেন্ডারিং](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) নিশ্চিত করে। ### 🔄 **শিক্ষামূলক চেক-ইন** **থামুন এবং চিন্তা করুন**: চালিয়ে যাওয়ার আগে নিশ্চিত করুন: - ✅ কেন প্রতিটি HTML ডকুমেন্টে DOCTYPE ঘোষণা প্রয়োজন - ✅ `<html>` মূল উপাদান কী ধারণ করে - ✅ কীভাবে এই কাঠামো ব্রাউজারগুলিকে পৃষ্ঠাগুলি সঠিকভাবে রেন্ডার করতে সাহায্য করে **দ্রুত স্ব-পরীক্ষা**: আপনি কি আপনার নিজের ভাষায় "স্ট্যান্ডার্ড-কমপ্লায়েন্ট রেন্ডারিং" এর অর্থ ব্যাখ্যা করতে পারেন? ## প্রয়োজনীয় ডকুমেন্ট মেটাডেটা যোগ করা HTML ডকুমেন্টের `<head>` অংশে গুরুত্বপূর্ণ তথ্য থাকে যা ব্রাউজার এবং সার্চ ইঞ্জিনের প্রয়োজন, কিন্তু দর্শকরা সরাসরি পৃষ্ঠায় দেখতে পান না। এটি "পর্দার পিছনের" তথ্যের মতো যা আপনার ওয়েবপৃষ্ঠাকে সঠিকভাবে কাজ করতে এবং বিভিন্ন ডিভাইস এবং প্ল্যাটফর্ম জুড়ে সঠিকভাবে প্রদর্শিত হতে সাহায্য করে। এই মেটাডেটা ব্রাউজারগুলিকে আপনার পৃষ্ঠা কীভাবে প্রদর্শন করতে হবে, কোন ক্যারেক্টার এনকোডিং ব্যবহার করতে হবে এবং বিভিন্ন স্ক্রিন সাইজ কীভাবে পরিচালনা করতে হবে তা বলে – যা পেশাদার, অ্যাক্সেসযোগ্য ওয়েব পৃষ্ঠা তৈরি করার জন্য অপরিহার্য। ### কাজ: ডকুমেন্ট হেড যোগ করুন আপনার `<html>` ট্যাগের শুরু এবং শেষের মধ্যে এই `<head>` অংশটি যোগ করুন: ```html <head> <title>Welcome to my Virtual Terrarium ``` **প্রতিটি উপাদান কী অর্জন করে তা বিশ্লেষণ:** - **পৃষ্ঠার শিরোনাম সেট করে** যা ব্রাউজার ট্যাব এবং সার্চ রেজাল্টে প্রদর্শিত হয় - **UTF-8 ক্যারেক্টার এনকোডিং নির্দিষ্ট করে** সারা বিশ্বে সঠিক টেক্সট প্রদর্শনের জন্য - **ইন্টারনেট এক্সপ্লোরারের আধুনিক সংস্করণের সাথে সামঞ্জস্য নিশ্চিত করে** - **রেসপন্সিভ ডিজাইন কনফিগার করে** ডিভাইসের প্রস্থের সাথে ভিউপোর্ট সেট করে - **প্রাথমিক জুম লেভেল নিয়ন্ত্রণ করে** বিষয়বস্তু প্রাকৃতিক আকারে প্রদর্শনের জন্য > 🤔 **এটি নিয়ে ভাবুন**: যদি আপনি এইরকম একটি ভিউপোর্ট মেটা ট্যাগ সেট করেন: ``, তাহলে কী হবে? এটি পৃষ্ঠাটিকে সর্বদা ৬০০ পিক্সেল চওড়া করতে বাধ্য করবে, যা রেসপন্সিভ ডিজাইনকে নষ্ট করবে! [সঠিক ভিউপোর্ট কনফিগারেশন](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) সম্পর্কে আরও জানুন। ## ডকুমেন্ট বডি তৈরি করা HTML ডকুমেন্টের `` উপাদানটি আপনার ওয়েবপৃষ্ঠার সমস্ত দৃশ্যমান বিষয়বস্তু ধারণ করে – ব্যবহারকারীরা যা দেখবে এবং যার সাথে ইন্টারঅ্যাক্ট করবে। যেখানে `` অংশটি ব্রাউজারকে নির্দেশনা প্রদান করেছে, সেখানে `` অংশটি প্রকৃত বিষয়বস্তু ধারণ করে: টেক্সট, ছবি, বোতাম এবং অন্যান্য উপাদান যা আপনার ব্যবহারকারীর ইন্টারফেস তৈরি করে। চলুন বডি কাঠামো যোগ করি এবং বুঝি কীভাবে HTML ট্যাগগুলি একসাথে কাজ করে অর্থপূর্ণ বিষয়বস্তু তৈরি করতে। ### HTML ট্যাগ কাঠামো বোঝা HTML উপাদান সংজ্ঞায়িত করতে জোড়া ট্যাগ ব্যবহার করে। বেশিরভাগ ট্যাগের একটি ওপেনিং ট্যাগ থাকে যেমন `

` এবং একটি ক্লোজিং ট্যাগ থাকে যেমন `

`, যার মধ্যে বিষয়বস্তু থাকে: `

Hello, world!

`। এটি একটি প্যারাগ্রাফ উপাদান তৈরি করে যা "Hello, world!" টেক্সট ধারণ করে। ### কাজ: বডি উপাদান যোগ করুন আপনার HTML ফাইলটি আপডেট করুন এবং `` উপাদানটি যোগ করুন: ```html Welcome to my Virtual Terrarium ``` **এই সম্পূর্ণ কাঠামোটি কী প্রদান করে:** - **মৌলিক HTML5 ডকুমেন্ট ফ্রেমওয়ার্ক প্রতিষ্ঠা করে** - **সঠিক ব্রাউজার রেন্ডারিংয়ের জন্য প্রয়োজনীয় মেটাডেটা অন্তর্ভুক্ত করে** - **দৃশ্যমান বিষয়বস্তু জন্য একটি খালি বডি তৈরি করে** - **আধুনিক ওয়েব ডেভেলপমেন্টের সেরা অনুশীলন অনুসরণ করে** এখন আপনি আপনার টেরারিয়ামের দৃশ্যমান উপাদানগুলি যোগ করতে প্রস্তুত। আমরা `
` উপাদানগুলি ব্যবহার করব বিষয়বস্তু সংগঠিত করতে এবং `` উপাদানগুলি গাছের ছবি প্রদর্শন করতে। ### ছবি এবং লেআউট কন্টেইনার নিয়ে কাজ করা HTML-এ ছবি বিশেষ কারণ তারা "স্ব-বন্ধ" ট্যাগ ব্যবহার করে। `

` এর মতো উপাদানগুলির বিপরীতে যা বিষয়বস্তু ঘিরে থাকে, `` ট্যাগটি তার সমস্ত তথ্য ট্যাগের মধ্যে ধারণ করে, যেমন `src` চিত্র ফাইলের পথ এবং `alt` অ্যাক্সেসিবিলিটির জন্য। ছবি আপনার HTML-এ যোগ করার আগে, আপনার প্রকল্প ফাইলগুলি সঠিকভাবে সংগঠিত করতে হবে একটি ইমেজ ফোল্ডার তৈরি করে এবং গাছের গ্রাফিক্স যোগ করে। **প্রথমে, আপনার ছবি সেট আপ করুন:** 1. আপনার টেরারিয়াম প্রকল্প ফোল্ডারের ভিতরে `images` নামে একটি ফোল্ডার তৈরি করুন 2. [সমাধান ফোল্ডার](../../../../3-terrarium/solution/images) থেকে গাছের ছবিগুলি ডাউনলোড করুন (মোট ১৪টি গাছের ছবি) 3. সমস্ত গাছের ছবি আপনার নতুন `images` ফোল্ডারে কপি করুন ### কাজ: গাছের প্রদর্শন লেআউট তৈরি করুন এখন আপনার `` ট্যাগের মধ্যে গাছের ছবি দুটি কলামে সংগঠিত করে যোগ করুন: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **ধাপে ধাপে, এই কোডে কী ঘটছে:** - **প্রধান পৃষ্ঠার কন্টেইনার তৈরি করে** `id="page"` দিয়ে যা সমস্ত বিষয়বস্তু ধারণ করবে - **দুটি কলাম কন্টেইনার তৈরি করে**: `left-container` এবং `right-container` - **৭টি গাছের ছবি বাম কলামে এবং ৭টি ডান কলামে সংগঠিত করে** - **প্রতিটি গাছের ছবিকে একটি `plant-holder` div-এ মোড়ানো হয়** ব্যক্তিগত অবস্থানের জন্য - **সঙ্গতিপূর্ণ ক্লাস নাম প্রয়োগ করে** যা পরবর্তী পাঠে CSS স্টাইলিংয়ের জন্য - **প্রতিটি গাছের ছবিকে একটি অনন্য ID বরাদ্দ করে** পরবর্তী সময়ে JavaScript ইন্টারঅ্যাকশন জন্য - **সঠিক ফাইল পথ অন্তর্ভুক্ত করে** যা ইমেজ ফোল্ডারের দিকে নির্দেশ করে > 🤔 **এটি বিবেচনা করুন**: লক্ষ্য করুন যে সমস্ত ছবির একই alt টেক্সট রয়েছে "plant"। এটি অ্যাক্সেসিবিলিটির জন্য আদর্শ নয়। স্ক্রিন রিডার ব্যবহারকারীরা "plant" শব্দটি ১৪ বার শুনবে, কিন্তু কোন নির্দিষ্ট গাছের ছবি দেখানো হচ্ছে তা জানতে পারবে না। আপনি কি প্রতিটি ছবির জন্য আরও ভালো, বর্ণনামূলক alt টেক্সট ভাবতে পারেন? > 📝 **HTML উপাদান প্রকার**: `
` উপাদানগুলি "ব্লক-লেভেল" এবং সম্পূর্ণ প্রস্থ নেয়, যেখানে `` উপাদানগুলি "ইনলাইন" এবং শুধুমাত্র প্রয়োজনীয় প্রস্থ নেয়। আপনি যদি সমস্ত `
` ট্যাগকে `` ট্যাগে পরিবর্তন করেন তবে কী ঘটবে বলে মনে করেন? ### 🔄 **শিক্ষামূলক চেক-ইন** **কাঠামো বোঝা**: আপনার HTML কাঠামো পর্যালোচনা করতে একটি মুহূর্ত নিন: - ✅ আপনি কি আপনার লেআউটের প্রধান কন্টেইনারগুলি চিহ্নিত করতে পারেন? - ✅ আপনি কি বুঝতে পারেন কেন প্রতিটি ছবির একটি অনন্য ID রয়েছে? - ✅ আপনি কীভাবে `plant-holder` div-এর উদ্দেশ্য বর্ণনা করবেন? **দৃশ্য পরিদর্শন**: আপনার HTML ফাইলটি একটি ব্রাউজারে খুলুন। আপনি দেখতে পাবেন: - গাছের ছবির একটি সাধারণ তালিকা - ছবি দুটি কলামে সংগঠিত - সাধারণ, স্টাইলবিহীন লেআউট **মনে রাখবেন**: CSS স্টাইলিং যোগ করার আগে HTML ঠিক এমনটাই দেখতে হওয়া উচিত! এই মার্কআপ যোগ করার সাথে সাথে, গাছগুলি স্ক্রিনে প্রদর্শিত হবে, যদিও তারা এখনও সুন্দর দেখাবে না – এটি পরবর্তী পাঠে CSS-এর কাজ! আপাতত, আপনার কাছে একটি শক্ত HTML ভিত্তি রয়েছে যা আপনার বিষয়বস্তু সঠিকভাবে সংগঠিত করে এবং অ্যাক্সেসিবিলিটির সেরা অনুশীলন অনুসরণ করে। ## অ্যাক্সেসিবিলিটির জন্য সেমান্টিক HTML ব্যবহার সেমান্টিক HTML মানে HTML উপাদানগুলি তাদের অর্থ এবং উদ্দেশ্যের উপর ভিত্তি করে নির্বাচন করা, শুধুমাত্র তাদের চেহারার উপর নয়। যখন আপনি সেমান্টিক মার্কআপ ব্যবহার করেন, তখন আপনি আপনার বিষয়বস্তু কাঠামো এবং অর্থ ব্রাউজার, সার্চ ইঞ্জিন এবং স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তিগুলিকে জানাচ্ছেন। ```mermaid flowchart TD A[Need to add content?] --> B{What type?} B -->|Main heading| C["

"] B -->|Subheading| D["

,

, etc."] B -->|Paragraph| E["

"] B -->|List| F["

    ,
      "] B -->|Navigation| G["