# टेरॅरियम प्रकल्प भाग 1: 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
```
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून
HTML, म्हणजेच हायपरटेक्स्ट मार्कअप भाषा, ही तुम्ही कधीही भेट दिलेल्या प्रत्येक वेबसाइटची पायाभूत रचना आहे. 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)
> 📺 **पहा आणि शिका**: या उपयुक्त व्हिडिओचा आढावा पहा
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## तुमचा प्रकल्प सेट अप करणे
HTML कोडमध्ये जाण्यापूर्वी, तुमच्या टेरॅरियम प्रकल्पासाठी योग्य कार्यक्षेत्र सेट अप करूया. सुरुवातीपासूनच व्यवस्थित फाइल संरचना तयार करणे ही एक महत्त्वाची सवय आहे जी तुमच्या वेब विकास प्रवासात तुम्हाला चांगली सेवा देईल.
### कार्य: तुमची प्रकल्प संरचना तयार करा
तुम्ही तुमच्या टेरॅरियम प्रकल्पासाठी एक समर्पित फोल्डर तयार कराल आणि तुमची पहिली HTML फाइल जोडाल. तुम्ही वापरू शकता अशा दोन पद्धती येथे आहेत:
**पर्याय 1: व्हिज्युअल स्टुडिओ कोड वापरणे**
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` ठेवा
**पर्याय 2: टर्मिनल कमांड्स वापरणे**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
**या कमांड्सने काय साध्य होते:**
- **नवीन डिरेक्टरी तयार करते** ज्याचे नाव `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 कोड टिप**: VS कोडमध्ये कोणत्याही HTML टॅगवर होवर करा आणि MDN वेब डॉक्समधून उपयुक्त माहिती पहा, ज्यामध्ये वापर उदाहरणे आणि ब्राउझर सुसंगतता तपशील समाविष्ट आहेत.
> 📚 **अधिक जाणून घ्या**: 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 कॅरेक्टर एन्कोडिंग निर्दिष्ट करते** जागतिक स्तरावर योग्य मजकूर प्रदर्शनासाठी
- **आधुनिक इंटरनेट एक्सप्लोरर आवृत्त्यांसह सुसंगतता सुनिश्चित करते**
- **डिव्हाइसच्या रुंदीशी जुळण्यासाठी व्ह्यूपोर्ट कॉन्फिगर करते**
- **प्रारंभिक झूम स्तर नियंत्रित करते** नैसर्गिक आकारात सामग्री प्रदर्शित करण्यासाठी
> 🤔 **याचा विचार करा**: जर तुम्ही व्ह्यूपोर्ट मेटा टॅग असे सेट केले: `` तर काय होईल? यामुळे पृष्ठ नेहमी 600 पिक्सेल रुंद असेल, प्रतिसादात्मक डिझाइन तुटेल! [योग्य व्ह्यूपोर्ट कॉन्फिगरेशन](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) मधून वनस्पतींच्या प्रतिमा डाउनलोड करा (एकूण 14 वनस्पतींच्या प्रतिमा)
3. सर्व वनस्पतींच्या प्रतिमा तुमच्या नवीन `images` फोल्डरमध्ये कॉपी करा
### कार्य: वनस्पती प्रदर्शन लेआउट तयार करा
आता तुमच्या `` टॅगमध्ये दोन स्तंभांमध्ये आयोजित केलेल्या वनस्पतींच्या प्रतिमा जोडा:
```html
```
**पायरी-पायरीने, या कोडमध्ये काय घडत आहे:**
- **`id="page"` सह मुख्य पृष्ठ कंटेनर तयार करते** सर्व सामग्री ठेवण्यासाठी
- **दोन स्तंभ कंटेनर स्थापित करते**: `left-container` आणि `right-container`
- **डाव्या स्तंभात 7 वनस्पती आणि उजव्या स्तंभात 7 वनस्पती आयोजित करते**
- **प्रत्येक वनस्पती प्रतिमेला `plant-holder` div मध्ये लपेटते** वैयक्तिक स्थितीसाठी
- **CSS शैलीसाठी सुसंगत वर्ग नावे लागू करते** पुढील धड्यात
- **प्रत्येक वनस्पती प्रतिमेला अद्वितीय ID असाइन करते** JavaScript परस्परसंवादासाठी नंतर
- **प्रतिमा फोल्डरकडे निर्देश करणारे योग्य फाइल पथ समाविष्ट करते**
> 🤔 **याचा विचार करा**: लक्षात घ्या की सर्व प्रतिमांमध्ये सध्या समान alt मजकूर "plant" आहे. हे प्रवेशयोग्यतेसाठी आदर्श नाही. स्क्रीन रीडर वापरकर्त्यांना "plant" 14 वेळा ऐकायला मिळेल, प्रत्येक प्रतिमा कोणती विशिष्ट वनस्पती दर्शवते हे न कळता. प्रत्येक प्रतिमेसाठी चांगला, अधिक वर्णनात्मक 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["
