# टेरारियम परियोजना भाग १: 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.ne.png) > स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा HTML, वा हाइपरटेक्स्ट मार्कअप भाषा, तपाईंले कहिल्यै भ्रमण गरेको प्रत्येक वेबसाइटको आधार हो। HTML लाई वेब पृष्ठहरूको संरचना दिने कंकालको रूपमा सोच्नुहोस् – यसले सामग्री कहाँ जान्छ, कसरी व्यवस्थित हुन्छ, र प्रत्येक टुक्राले के प्रतिनिधित्व गर्दछ भनेर परिभाषित गर्दछ। CSS ले पछि तपाईंको HTML लाई रंग र लेआउटको साथ "सजाउनेछ", र जाभास्क्रिप्टले अन्तरक्रियात्मकता संग यसलाई जीवनमा ल्याउनेछ, 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. "फाइल" → "फोल्डर खोल्नुहोस्" क्लिक गर्नुहोस् वा `Ctrl+K, Ctrl+O` (विन्डोज/लिनक्स) वा `Cmd+K, Cmd+O` (म्याक) प्रयोग गर्नुहोस् 3. `terrarium` नामक नयाँ फोल्डर सिर्जना गर्नुहोस् र यसलाई चयन गर्नुहोस् 4. एक्सप्लोरर प्यानमा, "नयाँ फाइल" आइकन क्लिक गर्नुहोस् 5. तपाईंको फाइललाई `index.html` नाम दिनुहोस् ![VS कोड एक्सप्लोरर नयाँ फाइल सिर्जना देखाउँदै](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ne.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 कोड टिप**: VS कोडमा कुनै पनि HTML ट्यागमा होभर गर्नुहोस् र MDN वेब डक्सबाट उपयोगी जानकारी हेर्नुहोस्, जसमा प्रयोग उदाहरणहरू र ब्राउजर अनुकूलता विवरणहरू समावेश छन्। > 📚 **थप जान्नुहोस्**: DOCTYPE घोषणाले ब्राउजरहरूलाई "क्विर्क्स मोड" मा प्रवेश गर्नबाट रोक्छ, जुन धेरै पुरानो वेबसाइटहरूलाई समर्थन गर्न प्रयोग गरिएको थियो। आधुनिक वेब विकासले सरल `<!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 प्रदान गर्छ** जाभास्क्रिप्ट अन्तरक्रियाको लागि पछि - **छविहरूको फोल्डरमा सही फाइल पथ समावेश गर्छ** > 🤔 **यसको बारेमा विचार गर्नुहोस्**: ध्यान दिनुहोस् कि सबै छविहरूको हाल समान alt पाठ "plant" छ। यो पहुँचयोग्यताको लागि आदर्श छैन। स्क्रिन रिडर प्रयोगकर्ताहरूले "plant" १४ पटक दोहोरिएको सुन्नेछन् बिना प्रत्येक छविले कुन विशिष्ट बिरुवा देखाउँछ भन्ने थाहा पाए। के तपाईं प्रत्येक छविको लागि राम्रो, थप वर्णनात्मक alt पाठ सोच्न सक्नुहुन्छ? > 📝 **HTML तत्व प्रकारहरू**: `
` तत्वहरू "ब्लक-स्तर" हुन् र पूर्ण चौडाइ लिन्छन्, जबकि `` तत्वहरू "इनलाइन" हुन् र केवल आवश्यक चौडाइ लिन्छन्। तपाईंले यी सबै `
` ट्यागहरूलाई `` ट्यागहरूमा परिवर्तन गर्नुभयो भने के हुन्छ? ### 🔄 **शिक्षण जाँच** **संरचना बुझाइ**: तपाईंको HTML संरचनालाई समीक्षा गर्न एक क्षण लिनुहोस्: - ✅ के तपाईं लेआउटमा मुख्य कन्टेनरहरू पहिचान गर्न सक्नुहुन्छ? - ✅ के तपाईं बुझ्नुहुन्छ किन प्रत्येक छविलाई अनौठो ID छ? - ✅ तपाईं `plant-holder` div को उद्देश्यलाई कसरी वर्णन गर्नुहुन्छ? **दृश्य निरीक्षण**: तपाईंको HTML फाइललाई ब्राउजरमा खोल्नुहोस्। तपाईंले देख्नुपर्छ: - बिरुवाको छविहरूको आधारभूत सूची - छविहरू दुई स्तम्भहरूमा व्यवस्थित - सरल, बिना शैलीको लेआउट **स्मरण गर्नुहोस्**: यो साधारण उपस्थिति ठीक HTML ले CSS शैलीको अघि देखिनु पर्ने हो! यस मार्कअपलाई थपेर, बिरुवाहरू स्क्रिनमा देखा पर्नेछन्, यद्यपि तिनीहरू अझै चमकदार देखिने छैनन् – त्यसका लागि 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["