# Terrarium Project Part 1: HTML का परिचय
```mermaid
journey
title आपका HTML सीखने की यात्रा
section आधार
Create HTML file: 3: Student
Add DOCTYPE: 4: Student
Structure document: 5: Student
section सामग्री
Add metadata: 4: Student
Include images: 5: Student
Organize layout: 5: Student
section सेमांटिक्स
Use proper tags: 4: Student
Enhance accessibility: 5: Student
Build terrarium: 5: Student
```
> स्केचनोट द्वारा [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, या हाइपरटेक्स्ट मार्कअप भाषा, हर उस वेबसाइट की नींव है जिसे आपने कभी देखा है। HTML को ऐसे समझें जैसे कंकाल जो वेब पेजों को संरचना देता है – यह निर्धारित करता है कि सामग्री कहाँ जाती है, यह कैसे संगठित है, और प्रत्येक भाग क्या दर्शाता है। जबकि बाद में CSS आपके HTML को रंग और लेआउट से "सजाएगा", और जावास्क्रिप्ट इसे इंटरैक्टिविटी के साथ जीवन में लाएगा, HTML वह मूल संरचना प्रदान करता है जो सब कुछ संभव बनाती है।
इस पाठ में, आप एक वर्चुअल टेरारियम इंटरफ़ेस के लिए HTML संरचना बनाएंगे। यह व्यावहारिक प्रोजेक्ट आपको बुनियादी HTML अवधारणाएं सिखाएगा जबकि कुछ दृश्यात्मक रूप से आकर्षक बनाएगा। आप यह सीखेंगे कि कैसे सैमान्टिक एलिमेंट्स का उपयोग करके कंटेंट को व्यवस्थित करें, तस्वीरों के साथ काम करें, और एक इंटरैक्टिव वेब एप्लिकेशन के लिए आधार तैयार करें।
इस पाठ के अंत तक, आपके पास एक कार्यशील HTML पेज होगा जो पौधों की तस्वीरें व्यवस्थित स्तंभों में प्रदर्शित करेगा, जो अगले पाठ में स्टाइलिंग के लिए तैयार होगा। यदि यह शुरू में साधारण दिखे तो चिंता न करें – यही HTML को CSS से दृश्य सुंदरीकरण से पहले करना चाहिए।
```mermaid
mindmap
root((HTML मूल बातें))
Structure
DOCTYPE घोषणा
HTML तत्त्व
हेड सेक्शन
बॉडी सामग्री
Elements
टैग और विशेषताएँ
स्व-समापन टैग
नेस्टेड तत्त्व
ब्लॉक बनाम इनलाइन
Content
टेक्स्ट तत्त्व
चित्र
कंटेनर (div)
सूचियाँ
Semantics
अर्थपूर्ण टैग
पहुंच योग्यता
स्क्रीन रीडर
SEO लाभ
Best Practices
उचित नेस्टिंग
वैध मार्कअप
वर्णनात्मक Alt टेक्स्ट
सुव्यवस्थित संरचना
```
## पूर्व-व्याख्यान क्विज़
[पूर्व-व्याख्यान क्विज़](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **देखें और सीखें**: इस सहायक वीडियो अवलोकन को देखें
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## अपने प्रोजेक्ट की सेटअप
HTML कोड में जाने से पहले, आइए अपने टेरारियम प्रोजेक्ट के लिए एक उचित कार्यक्षेत्र सेट अप करें। शुरुआत से ही एक व्यवस्थित फ़ाइल संरचना बनाना एक महत्वपूर्ण आदत है जो आपके वेब विकास यात्रा में अच्छी सेवा देगी।
### कार्य: अपना प्रोजेक्ट स्ट्रक्चर बनाएं
आप अपने टेरारियम प्रोजेक्ट के लिए एक समर्पित फ़ोल्डर बनाएंगे और अपनी पहली HTML फ़ाइल जोड़ेंगे। आप निम्न दो तरीकों में से किसी एक का उपयोग कर सकते हैं:
**विकल्प 1: Visual Studio Code का उपयोग करना**
1. Visual Studio Code खोलें
2. "File" → "Open Folder" पर क्लिक करें या `Ctrl+K, Ctrl+O` (Windows/Linux) या `Cmd+K, Cmd+O` (Mac) का उपयोग करें
3. `terrarium` नामक नया फ़ोल्डर बनाएं और उसे सेलेक्ट करें
4. एक्सप्लोरर पैन में, "New File" आइकन पर क्लिक करें
5. अपनी फ़ाइल का नाम `index.html` रखें
**विकल्प 2: टर्मिनल कमांड का उपयोग करना**
```bash
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 दस्तावेज़ एक विशिष्ट संरचना का पालन करता है जिसे ब्राउज़र को समझना और ठीक से दिखाना ज़रूरी होता है। इसे आप एक औपचारिक पत्र की तरह सोचें – इसमें आवश्यक तत्व एक विशेष क्रम में होते हैं जो रिसीवर (इस मामले में ब्राउज़र) को सामग्री को सही से संसाधित करने में मदद करता है।
```mermaid
flowchart TD
A[""] --> B[""]
B --> C[""]
C --> D[""]
C --> E["<meta charset>"]
C --> F["<meta viewport>"]
B --> G["<body>"]
G --> H["<h1> शीर्षक"]
G --> I["<div> कंटेनर"]
G --> J["<img> चित्र"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
```
आइए हर HTML दस्तावेज़ के लिए आवश्यक नींव जोड़कर शुरू करें।
### DOCTYPE घोषणा और मूल तत्व
किसी भी HTML फ़ाइल की पहली दो पंक्तियाँ दस्तावेज़ का ब्राउज़र के लिए "परिचय" होती हैं:
```html
<!DOCTYPE html>
<html></html>
```
**यह कोड क्या करता है, समझें:**
- `<!DOCTYPE html>` का उपयोग करके दस्तावेज़ प्रकार को HTML5 घोषित करता है
- `<html>` रूट एलिमेंट बनाता है जिसमें पूरा पेज कंटेंट शामिल होगा
- आधुनिक वेब मानकों को स्थापित करता है ताकि ब्राउज़र सही तरीके से रेंडर करें
- विभिन्न ब्राउज़रों और उपकरणों में स्थिर और संगत प्रदर्शन सुनिश्चित करता है
> 💡 **VS Code टिप**: 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 कैरेक्टर एनकोडिंग निर्दिष्ट करता है
- Internet Explorer के आधुनिक संस्करणों के साथ अनुकूलता सुनिश्चित करता है
- डिवाइस की चौड़ाई से मेल खाने के लिए व्यूपोर्ट निर्धारित करता है जिससे रेस्पॉन्सिव डिजाइन काम करे
- सामग्री को प्राकृतिक आकार में दिखाने के लिए प्रारंभिक ज़ूम स्तर नियंत्रित करता है
> 🤔 **इस बारे में सोचें**: यदि आप इस तरह का viewport मेटा टैग सेट करें: `` तो क्या होगा? इससे पेज हमेशा 600 पिक्सेल चौड़ा दिखेगा, जिससे रेस्पॉन्सिव डिजाइन टूट जाएगी! अधिक जानने के लिए [सही व्यूपोर्ट कॉन्फिगरेशन](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) देखें।
## दस्तावेज़ बॉडी बनाना
`` तत्व आपके वेबपेज की सारी दृश्य सामग्री रखता है – वे सब कुछ जो उपयोगकर्ता देखेंगे और इंटरैक्ट करेंगे। जबकि `` सेक्शन ब्राउज़र को निर्देश देता है, `` में वास्तविक सामग्री होती है: टेक्स्ट, चित्र, बटन, और अन्य तत्व जो आपके यूजर इंटरफेस बनाते हैं।
आइए बॉडी संरचना जोड़ें और समझें कि HTML टैग कैसे मिलकर सार्थक सामग्री बनाते हैं।
### HTML टैग संरचना को समझना
HTML जोड़ियाँ टैग का उपयोग करता है। अधिकांश टैग के एक उद्घाटन टैग जैसे `
` और एक समापन टैग जैसे `
` होते हैं, दोनों के बीच सामग्री होती है: `
Hello, world!
`। यह एक पैराग्राफ एलिमेंट बनाता है जिसमें "Hello, world!" टेक्स्ट होता है।
### कार्य: बॉडी एलिमेंट जोड़ें
अपने HTML फ़ाइल को `` एलिमेंट जोड़ने के लिए अपडेट करें:
```html
Welcome to my Virtual Terrarium
```
**यह पूरी संरचना क्या प्रदान करती है:**
- मूल HTML5 दस्तावेज़ फ्रेमवर्क स्थापित करता है
- ब्राउज़र द्वारा ठीक से रेंडरिंग के लिए आवश्यक मेटाडेटा शामिल करता है
- आपकी दृश्य सामग्री के लिए एक खाली बॉडी बनाता है
- आधुनिक वेब विकास के सर्वोत्तम अभ्यासों का पालन करता है
अब आप अपने टेरारियम के दृश्य तत्व जोड़ने के लिए तैयार हैं। हम विभिन्न कंटेंट सेक्शन को व्यवस्थित करने के लिए कंटेनर के रूप में `
` एलिमेंट्स और पौधों की तस्वीरें दिखाने के लिए `` एलिमेंट्स का उपयोग करेंगे।
### चित्रों और लेआउट कंटेनरों के साथ काम करना
HTML में चित्र विशेष होते हैं क्योंकि वे "self-closing" टैग का उपयोग करते हैं। `` जैसे तत्वों के विपरीत जो सामग्री के चारों ओर होते हैं, `` टैग में सारी जानकारी स्वयं टैग के भीतर एट्रिब्यूट्स जैसे `src` (इमेज फाइल पाथ) और `alt` (सुलभता के लिए वैकल्पिक पाठ) के साथ होती है।
HTML में चित्र जोड़ने से पहले, आपको अपने प्रोजेक्ट फाइलों को सही तरीके से व्यवस्थित करना होगा, एक images फ़ोल्डर बनाकर और पौधों की ग्राफिक्स को उसमें जोड़कर।
**पहले, अपनी तस्वीरें सेट करें:**
1. अपने टेरारियम प्रोजेक्ट फ़ोल्डर के अंदर `images` नामक एक फ़ोल्डर बनाएं
2. [solution folder](../../../../3-terrarium/solution/images) से पौधों की चित्रे डाउनलोड करें (कुल 14 पौधों की चित्रें)
3. सभी पौधों की तस्वीरें अपने नए `images` फ़ोल्डर में कॉपी करें
### कार्य: पौधे प्रदर्शन लेआउट बनाएं
अब अपने `` टैग्स के बीच पौधों की तस्वीरों को दो स्तंभों में व्यवस्थित करके जोड़ें:
```html
```
**कदम दर कदम, इस कोड में क्या हो रहा है:**
- एक मुख्य पेज कंटेनर `id="page"` के साथ बनाता है जो सारी सामग्री रखता है
- दो कॉलम कंटेनर बनाता है: `left-container` और `right-container`
- बाएं स्तंभ में 7 पौधे और दाहिने स्तंभ में 7 पौधे व्यवस्थित करता है
- प्रत्येक पौधे की छवि को `plant-holder` डिव में लपेटता है ताकि व्यक्तिगत स्थिति मिल सके
- अगले पाठ में CSS स्टाइलिंग के लिए लगातार क्लास नाम लागू करता है
- बाद में जावास्क्रिप्ट इंटरैक्शन के लिए प्रत्येक पौधे की छवि को अनोखी आईडी देता है
- उचित फाइल पाथस के साथ images फ़ोल्डर की ओर ईशारा करता है
> 🤔 **इस बारे में सोचें**: ध्यान दें कि सभी छवियों का alt टेक्स्ट अभी समान "plant" है। यह सुलभता के लिए आदर्श नहीं है। स्क्रीन रीडर उपयोगकर्ता 14 बार "plant" सुनेंगे बिना यह जाने कि कौन सा पौधा कौन सा है। क्या आप प्रत्येक छवि के लिए बेहतर, अधिक वर्णनात्मक alt टेक्स्ट के बारे में सोच सकते हैं?
> 📝 **HTML एलिमेंट प्रकार**: `
` तत्व "ब्लॉक-लेवल" होते हैं और पूरी चौड़ाई लेते हैं, जबकि `` तत्व "इनलाइन" होते हैं और केवल आवश्यक चौड़ाई लेते हैं। यदि आप इन सभी `
` टैग्स को `` टैग्स में बदल दें तो क्या होगा आप सोचते हैं?
### 🔄 **शैक्षिक जाँच**
**संरचना समझना**: अपनी HTML संरचना का एक पल के लिए अवलोकन करें:
- ✅ क्या आप अपने लेआउट में मुख्य कंटेनर पहचान सकते हैं?
- ✅ क्या आप समझते हैं कि प्रत्येक छवि को अनोखी आईडी क्यों मिली है?
- ✅ आप `plant-holder` डिव का उद्देश्य कैसे वर्णित करेंगे?
**दृश्य निरीक्षण**: अपनी HTML फ़ाइल किसी ब्राउज़र में खोलें। आपको दिखना चाहिए:
- एक बेसिक पौधों की तस्वीरों की सूची
- दो स्तंभों में व्यवस्थित तस्वीरें
- सरल, बिना स्टाइल की गई लेआउट
**याद रखें**: यह सादा रूप ठीक उसी प्रकार का होता है जैसा CSS स्टाइलिंग से पहले HTML होना चाहिए!
यह मार्कअप जोड़ने के साथ, पौधे स्क्रीन पर दिखाई देंगे, हालांकि वे अभी चमकदार नहीं दिखेंगे – यही काम CSS अगले पाठ में करेगा! फिलहाल, आपके पास एक ठोस HTML आधार है जो आपकी सामग्री को सही ढंग से व्यवस्थित करता है और सुलभता के सर्वोत्तम अभ्यासों का पालन करता है।
## सुलभता के लिए सैमान्टिक HTML का उपयोग
सैमान्टिक HTML का मतलब है HTML तत्वों को उनके अर्थ और उद्देश्य के आधार पर चुनना, केवल उनके दृश्यमान रूप से नहीं। जब आप सैमान्टिक मार्कअप का उपयोग करते हैं, तो आप अपनी सामग्री की संरचना और अर्थ को ब्राउज़र, सर्च इंजन, और सहायक तकनीकों जैसे स्क्रीन रीडर को संप्रेषित कर रहे होते हैं।
```mermaid
flowchart TD
A[सामग्री जोड़ने की जरूरत है?] --> B{किस प्रकार?}
B -->|मुख्य शीर्षक| C["
