26 KiB
टेरारियम परियोजना भाग १: HTML को परिचय
स्केच नोट टोमोमी इमुरा द्वारा
प्रि-लेक्चर क्विज
भिडियो हेर्नुहोस्
परिचय
HTML, वा हाइपरटेक्स्ट मार्कअप भाषा, वेबको 'कंकाल' हो। यदि CSS ले तपाईंको HTML लाई सजाउँछ र JavaScript ले यसलाई जीवन दिन्छ भने, HTML तपाईंको वेब एप्लिकेसनको शरीर हो। HTML को सिन्ट्याक्सले पनि यो विचारलाई प्रतिबिम्बित गर्दछ, किनकि यसमा "head", "body", र "footer" ट्यागहरू समावेश छन्।
यस पाठमा, हामी HTML प्रयोग गरेर हाम्रो भर्चुअल टेरारियमको इन्टरफेसको 'कंकाल' लेआउट गर्नेछौं। यसमा एक शीर्षक र तीन स्तम्भहरू हुनेछन्: दायाँ र बायाँ स्तम्भ जहाँ तान्न मिल्ने बिरुवाहरू राखिन्छन्, र बीचको क्षेत्र जसले वास्तविक काँच-जस्तो टेरारियमको रूपमा काम गर्नेछ। यस पाठको अन्त्यसम्म, तपाईं स्तम्भहरूमा बिरुवाहरू देख्न सक्नुहुनेछ, तर इन्टरफेस अलि अजीब देखिनेछ; चिन्ता नगर्नुहोस्, अर्को खण्डमा तपाईं CSS शैलीहरू थपेर इन्टरफेसलाई राम्रो देखाउने बनाउनुहुनेछ।
कार्य
तपाईंको कम्प्युटरमा 'terrarium' नामको फोल्डर बनाउनुहोस् र त्यसको भित्र 'index.html' नामको फाइल बनाउनुहोस्। तपाईंले यो Visual Studio Code मा आफ्नो टेरारियम फोल्डर बनाएपछि नयाँ VS Code विन्डो खोलेर, 'open folder' क्लिक गरेर, र आफ्नो नयाँ फोल्डरमा नेभिगेट गरेर गर्न सक्नुहुन्छ। Explorer प्यानलमा सानो 'file' बटन क्लिक गरेर नयाँ फाइल बनाउनुहोस्:
वा
तपाईं आफ्नो git bash मा यी कमाण्डहरू प्रयोग गर्न सक्नुहुन्छ:
mkdir terrariumcd terrariumtouch index.htmlcode index.htmlवाnano index.html
index.html फाइलहरूले ब्राउजरलाई संकेत गर्दछ कि यो फोल्डरको डिफल्ट फाइल हो; जस्तै
https://anysite.com/testजस्ता URL हरूtestनामको फोल्डर र त्यसको भित्रindex.htmlसमावेश गरेर बनाइएका हुन सक्छन्;index.htmlURL मा देखिनु पर्दैन।
डकटाइप र html ट्यागहरू
HTML फाइलको पहिलो लाइन यसको डकटाइप हो। यो अलि अचम्मको कुरा हो कि तपाईंले यो लाइन फाइलको सबैभन्दा माथि राख्नुपर्छ, तर यसले पुरानो ब्राउजरहरूलाई पृष्ठलाई मानक मोडमा र वर्तमान HTML स्पेसिफिकेशन अनुसरण गर्दै रेंडर गर्न आवश्यक छ भनी बताउँछ।
टिप: VS Code मा, तपाईं ट्यागमा होभर गर्न सक्नुहुन्छ र यसको प्रयोगको बारेमा MDN Reference गाइडहरूबाट जानकारी प्राप्त गर्न सक्नुहुन्छ।
दोस्रो लाइन <html> ट्यागको ओपनिङ ट्याग हुनुपर्छ, अहिलेको लागि यसको क्लोजिङ ट्याग </html> द्वारा पछ्याइएको। यी ट्यागहरू तपाईंको इन्टरफेसका रूट एलिमेन्टहरू हुन्।
कार्य
तपाईंको index.html फाइलको माथि यी लाइनहरू थप्नुहोस्:
<!DOCTYPE html>
<html></html>
✅ डकटाइप सेट गरेर केही फरक मोडहरू निर्धारण गर्न सकिन्छ: Quirks Mode र Standards Mode। यी मोडहरू वास्तवमै पुरानो ब्राउजरहरूलाई समर्थन गर्न प्रयोग गरिन्थ्यो जुन सामान्यतया आजकल प्रयोग गरिँदैन (जस्तै Netscape Navigator 4 र Internet Explorer 5)। तपाईं मानक डकटाइप घोषणा प्रयोग गर्न सक्नुहुन्छ।
डकुमेन्टको 'head'
HTML डकुमेन्टको 'head' क्षेत्रले तपाईंको वेब पृष्ठको बारेमा महत्त्वपूर्ण जानकारी समावेश गर्दछ, जसलाई मेटाडाटा पनि भनिन्छ। हाम्रो केसमा, हामी वेब सर्भरलाई चार कुराहरू बताउँछौं:
- पृष्ठको शीर्षक
- पृष्ठ मेटाडाटा समावेश गर्दै:
- 'character set', जसले पृष्ठमा प्रयोग गरिएको क्यारेक्टर इन्कोडिङको बारेमा बताउँछ
- ब्राउजर जानकारी, जसमा
x-ua-compatibleसमावेश छ जसले IE=edge ब्राउजरलाई समर्थन गरिएको संकेत गर्दछ - पृष्ठ लोड हुँदा viewport कसरी व्यवहार गर्ने भन्ने जानकारी। viewport लाई प्रारम्भिक स्केल 1 मा सेट गर्दा पृष्ठ पहिलो पटक लोड हुँदा जूम स्तर नियन्त्रण हुन्छ।
कार्य
तपाईंको डकुमेन्टमा <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>
✅ यदि तपाईंले viewport मेटा ट्यागलाई यसरी सेट गर्नुभयो भने के हुन्छ: <meta name="viewport" content="width=600">? viewport को बारेमा थप पढ्नुहोस्।
डकुमेन्टको body
HTML ट्यागहरू
HTML मा, तपाईं आफ्नो .html फाइलमा ट्यागहरू थपेर वेब पृष्ठका एलिमेन्टहरू सिर्जना गर्नुहुन्छ। प्रत्येक ट्याग सामान्यतया ओपनिङ र क्लोजिङ ट्याग हुन्छ, जस्तै: <p>hello</p> जसले अनुच्छेदलाई संकेत गर्दछ। आफ्नो इन्टरफेसको body सिर्जना गर्न <html> ट्यागको जोडी भित्र <body> ट्यागहरूको सेट थप्नुहोस्; तपाईंको मार्कअप अहिले यसरी देखिन्छ:
कार्य
<!DOCTYPE html>
<html>
<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>
<body></body>
</html>
अब, तपाईं आफ्नो पृष्ठ निर्माण गर्न सुरु गर्न सक्नुहुन्छ। सामान्यतया, तपाईं पृष्ठमा छुट्टाछुट्टै एलिमेन्टहरू सिर्जना गर्न <div> ट्यागहरू प्रयोग गर्नुहुन्छ। हामी <div> एलिमेन्टहरूको श्रृंखला सिर्जना गर्नेछौं जसले छविहरू समावेश गर्नेछ।
छविहरू
एक HTML ट्याग जसलाई क्लोजिङ ट्याग आवश्यक पर्दैन भने <img> ट्याग हो, किनकि यसमा src एलिमेन्ट हुन्छ जसले पृष्ठलाई वस्तु रेंडर गर्न आवश्यक सबै जानकारी समावेश गर्दछ।
तपाईंको एपमा images नामको फोल्डर सिर्जना गर्नुहोस् र त्यसमा source code folder मा भएका सबै छविहरू थप्नुहोस्; (त्यहाँ १४ वटा बिरुवाका छविहरू छन्)।
कार्य
तपाईंको <body></body> ट्यागहरू बीचमा ती बिरुवाका छविहरू दुई स्तम्भहरूमा थप्नुहोस्:
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/plant1.d87946a2ca70cc4316bda6e6c3af7210fbe9ada5539a7885141a9ce0efaf7be3.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/plant2.8daa1606c9c1ad896bb171212c7d1d882e504b76b8ec3a2d1c337d775cf50dc3.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/plant3.8b0d484381a2a2a77c5c06ad97ab6ae5b7023da8c6c7678b0183bc0e46ea17a7.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/plant4.656e16ae1df37be2af5f4e7b5ab6c5decc432c3d3ec2eb98b904ddbecad49db0.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/plant5.2b41b9355f11ebccd62d327f5f14e56531ecda9c6f970bc89e386ee9f0273bb0.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/plant6.3d1827d03b6569946be13ae5da1f32947ae56732638a43757a7c616a6adccc5d.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/plant7.8152c302ac97f621a6c595bdf3939103568f9efc7d3b06a0f02a1ea66f479de0.ne.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/plant8.38d6428174ffa850a47cd1b81d528fa528adda7d23f3ae0bb42f4a27356ca5e6.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/plant9.f0e38d3327c37fc29cd2734d48d20c2cf69300898ece6d46708829e02ce540e3.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/plant10.b159d6d6e985595f56d86b4b38061b8e7b4c9969c210c199fe967269cf935e7f.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/plant11.2a03a1c2ec8ea84ef3a80c06cc6883f3960fbb669f2c0b0bd824ba33d7eb7d32.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/plant12.60e9b53e538fbaf3e5797ebf800acb483baf5639e6cf378292ac2321ab8a5ea9.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/plant13.07a51543c820bcf57f67a9a6c0acbd6211ff795e2e67a42a9718224534e95fab.ne.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/plant14.6e486371ba7d36ba3520d9828887993cb4c3edad8bdd8ff9b1b315717ff8cb63.ne.png" />
</div>
</div>
</div>
नोट: स्प्यान बनाम डिभ। डिभहरू 'ब्लक' एलिमेन्ट मानिन्छन्, र स्प्यानहरू 'इनलाइन'। यदि तपाईंले यी डिभहरूलाई स्प्यानमा परिवर्तन गर्नुभयो भने के हुन्छ?
यस मार्कअपको साथ, बिरुवाहरू अब स्क्रिनमा देखिन्छन्। यो अलि नराम्रो देखिन्छ, किनकि तिनीहरू CSS प्रयोग गरेर अझै शैलीबद्ध गरिएको छैन, र हामी यो अर्को पाठमा गर्नेछौं।
प्रत्येक छविमा alt टेक्स्ट हुन्छ जुन तपाईंले छवि देख्न वा रेंडर गर्न नसके पनि देखिनेछ। यो समावेश गर्न महत्त्वपूर्ण विशेषता हो जसले पहुँचयोग्यता प्रदान गर्दछ। भविष्यका पाठहरूमा पहुँचयोग्यताको बारेमा थप जान्नुहोस्; अहिलेको लागि, सम्झनुहोस् कि alt विशेषताले छविको लागि वैकल्पिक जानकारी प्रदान गर्दछ यदि कुनै कारणले प्रयोगकर्ताले यसलाई हेर्न सक्दैन (ढिलो कनेक्शन, src विशेषतामा त्रुटि, वा प्रयोगकर्ताले स्क्रिन रिडर प्रयोग गरेमा)।
✅ के तपाईंले ध्यान दिनुभयो कि प्रत्येक छविमा एउटै alt ट्याग छ? के यो राम्रो अभ्यास हो? किन वा किन होइन? के तपाईंले यो कोड सुधार गर्न सक्नुहुन्छ?
सेम्यान्टिक मार्कअप
सामान्यतया, HTML लेख्दा अर्थपूर्ण 'सेम्यान्टिक्स' प्रयोग गर्नु राम्रो हुन्छ। यसको मतलब के हो? यसको मतलब तपाईंले HTML ट्यागहरूलाई तिनीहरू डिजाइन गरिएको डाटा वा अन्तर्क्रियाको प्रकारलाई प्रतिनिधित्व गर्न प्रयोग गर्नुहुन्छ। उदाहरणका लागि, पृष्ठको मुख्य शीर्षक पाठले <h1> ट्याग प्रयोग गर्नुपर्छ।
तपाईंको ओपनिङ <body> ट्यागको ठीक तल निम्न लाइन थप्नुहोस्:
<h1>My Terrarium</h1>
सेम्यान्टिक मार्कअप प्रयोग गर्दा जस्तै हेडरहरू <h1> र अनऑर्डर्ड सूचीहरू <ul> को रूपमा रेंडर गर्दा स्क्रिन रिडरहरूले पृष्ठमा नेभिगेट गर्न मद्दत गर्दछ। सामान्यतया, बटनहरू <button> को रूपमा लेखिनुपर्छ र सूचीहरू <li> को रूपमा। जबकि यो संभव छ कि विशेष शैली गरिएको <span> एलिमेन्टहरू क्लिक ह्यान्डलरहरूसँग बटनहरूको नक्कल गर्न प्रयोग गरिन्छ, यो अपाङ्ग प्रयोगकर्ताहरूलाई प्रविधिहरू प्रयोग गरेर पृष्ठमा बटन कहाँ छ भनेर निर्धारण गर्न र यससँग अन्तर्क्रिया गर्न राम्रो हुन्छ, यदि एलिमेन्ट बटनको रूपमा देखा पर्दछ। यस कारणले गर्दा, सकेसम्म सेम्यान्टिक मार्कअप प्रयोग गर्न प्रयास गर्नुहोस्।
✅ स्क्रिन रिडर र यो वेब पृष्ठसँग कसरी अन्तर्क्रिया गर्छ हेर्नुहोस्। के तपाईं देख्न सक्नुहुन्छ कि गैर-सेम्यान्टिक मार्कअपले प्रयोगकर्तालाई किन निराश पार्न सक्छ?
टेरारियम
यस इन्टरफेसको अन्तिम भागमा टेरारियम सिर्जना गर्न शैलीबद्ध गरिने मार्कअप समावेश छ।
कार्य:
अन्तिम </div> ट्यागको माथि यो मार्कअप थप्नुहोस्:
<div id="terrarium">
<div class="jar-top"></div>
<div class="jar-walls">
<div class="jar-glossy-long"></div>
<div class="jar-glossy-short"></div>
</div>
<div class="dirt"></div>
<div class="jar-bottom"></div>
</div>
✅ तपाईंले यो मार्कअप स्क्रिनमा थपे पनि, तपाईंले बिल्कुलै केही रेंडर भएको देख्नुहुन्न। किन?
GitHub Copilot एजेन्ट चुनौती 🚀
एजेन्ट मोड प्रयोग गरेर निम्न चुनौती पूरा गर्नुहोस्:
विवरण: टेरारियम परियोजनामा थप्न सकिने बिरुवा हेरचाह गाइड खण्डको लागि सेम्यान्टिक HTML संरचना सिर्जना गर्नुहोस्।
प्रोम्प्ट: "Plant Care Guide" मुख्य शीर्षक, "Watering", "Light Requirements", र "Soil Care" शीर्षक भएका तीन उप-खण्डहरू, प्रत्येकमा बिरुवा हेरचाह जानकारीको अनुच्छेद समावेश गर्ने सेम्यान्टिक HTML खण्ड सिर्जना गर्नुहोस्। सामग्रीलाई उपयुक्त रूपमा संरचना गर्न <section>, <h2>, <h3>, र <p> जस्ता सही सेम्यान्टिक HTML ट्यागहरू प्रयोग गर्नुहोस्।
🚀चुनौती
HTML मा केही पुराना 'ट्यागहरू' छन् जुन अझै रमाइलो खेल्नको लागि छन्, यद्यपि तपाईंले आफ्नो मार्कअपमा यी ट्यागहरू जस्ता डिप्रिकेटेड ट्यागहरू प्रयोग गर्नु हुँदैन। अझै पनि, के तपाईंले पुरानो <marquee> ट्याग प्रयोग गरेर h1 शीर्षकलाई क्षैतिज रूपमा स्क्रोल गर्न बनाउन सक्नुहुन्छ? (यदि तपाईंले गर्नुभयो भने, पछि यसलाई हटाउन नबिर्सनुहोस्)
पोस्ट-लेक्चर क्विज
समीक्षा र आत्म अध्ययन
HTML 'परीक्षण गरिएको र सत्य' निर्माण ब्लक प्रणाली हो जसले वेबलाई आजको अवस्थामा निर्माण गर्न मद्दत गरेको छ। यसको इतिहासको बारेमा केही पुराना र नयाँ ट्यागहरू अध्ययन गरेर जान्नुहोस्। के तपाईंले पत्ता लगाउन सक्नुहुन्छ कि किन केही ट्यागहरू डिप्रिकेटेड भए र केही थपिए? भविष्यमा कुन ट्यागहरू परिचय गराइनेछन्?
वेब र मोबाइल उपकरणहरूको लागि साइटहरू निर्माण गर्ने बारेमा थप जान्नुहोस् Microsoft Learn मा।
असाइनमेन्ट
तपाईंको HTML अभ्यास गर्नुहोस्: ब्लग मक्कअप बनाउनुहोस्
अस्वीकरण:
यो दस्तावेज़ AI अनुवाद सेवा Co-op Translator प्रयोग गरेर अनुवाद गरिएको छ। हामी शुद्धताको लागि प्रयास गर्छौं, तर कृपया ध्यान दिनुहोस् कि स्वचालित अनुवादमा त्रुटिहरू वा अशुद्धताहरू हुन सक्छ। यसको मूल भाषा मा रहेको दस्तावेज़लाई आधिकारिक स्रोत मानिनुपर्छ। महत्वपूर्ण जानकारीको लागि, व्यावसायिक मानव अनुवाद सिफारिस गरिन्छ। यस अनुवादको प्रयोगबाट उत्पन्न हुने कुनै पनि गलतफहमी वा गलत व्याख्याको लागि हामी जिम्मेवार हुने छैनौं।