You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
21 KiB
230 lines
21 KiB
# टेरारियम प्रोजेक्ट पार्ट 1: HTML का परिचय
|
|
|
|
|
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
|
|
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
|
|
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15?loc=hi)
|
|
|
|
### परिचय
|
|
|
|
HTML, या HyperText Markup Language, वेब का 'कंकाल' है। यदि CSS आपके HTML और 'ड्रेस अप' को जीवन में लाता है, तो HTML आपके वेब एप्लिकेशन का मुख्य भाग है। HTML का सिंटैक्स भी उस विचार को दर्शाता है, क्योंकि इसमें "head", "body" और "footer" टैग शामिल हैं।
|
|
|
|
इस पाठ में, हम अपने वर्चुअल टेरारियम के इंटरफ़ेस के 'कंकाल' को लेआउट करने के लिए HTML का उपयोग करने जा रहे हैं। इसमें एक शीर्षक और तीन कॉलम होंगे: एक दाएं और बाएं स्तंभ जहां ड्रैगेबल पौधे रहते हैं, और एक केंद्र क्षेत्र जो वास्तविक ग्लास दिखने वाला टेरारियम होगा। इस पाठ के अंत तक, आप कॉलम में पौधों को देख पाएंगे, लेकिन इंटरफ़ेस थोड़ा अजीब लगेगा; चिंता न करें, अगले भाग में आप सीएसएस शैली को बेहतर बनाने के लिए इंटरफ़ेस में जोड़ देंगे।
|
|
|
|
### टास्क
|
|
|
|
अपने कंप्यूटर पर, 'टेरारियम' नामक एक फ़ोल्डर बनाएं और उसके अंदर, एक फ़ाइल 'index.html'। विज़ुअल स्टूडियो कोड में आप ऐसा कर सकते हैं, जब आप एक नया वीएस कोड विंडो खोलकर, 'open folder' पर क्लिक करके, और अपने नए फ़ोल्डर में नेविगेट करके अपना टेरारियम फ़ोल्डर बना सकते हैं। एक्सप्लोरर फलक में छोटे 'फ़ाइल' बटन पर क्लिक करें और नई फ़ाइल बनाएँ:
|
|
|
|
|
|
|
|
या
|
|
|
|
अपने git bash पर इन कमांड का उपयोग करें:
|
|
* `mkdir terrarium`
|
|
* `cd terrarium`
|
|
* `touch index.html`
|
|
* `code index.html` या `nano index.html`
|
|
|
|
> index.html फ़ाइलें एक ब्राउज़र को इंगित करती हैं कि यह एक फ़ोल्डर में डिफ़ॉल्ट फ़ाइल है; URL जैसे `https://anysite.com/test` को एक फ़ोल्डर संरचना का उपयोग करके बनाया जा सकता है, जिसमें इसके अंदर` index` नाम के साथ `test` नामक एक फ़ोल्डर शामिल है; `index.html` को URL में नहीं दिखाना है।
|
|
|
|
---
|
|
|
|
## DocType और html टैग
|
|
|
|
HTML फ़ाइल की पहली पंक्ति इसका सिद्धांत है। यह थोड़ा आश्चर्य की बात है कि आपको इस लाइन को फ़ाइल के शीर्ष पर रखने की आवश्यकता है, लेकिन यह पुराने ब्राउज़रों को बताता है कि वर्तमान HTML विनिर्देश के बाद ब्राउज़र को मानक मोड में पृष्ठ को प्रस्तुत करना होगा।
|
|
|
|
> युक्ति: वीएस कोड में, आप एक टैग पर होवर कर सकते हैं और एमडीएन संदर्भ गाइड से इसके उपयोग के बारे में जानकारी प्राप्त कर सकते हैं।
|
|
|
|
दूसरी पंक्ति `<html>` टैग का शुरुआती टैग होनी चाहिए, इसके ठीक बाद इसके समापन टैग `</html>` द्वारा होना चाहिए। ये टैग आपके इंटरफ़ेस के मूल तत्व हैं।
|
|
|
|
### टास्क
|
|
|
|
अपने `index.html` फ़ाइल के शीर्ष पर इन पंक्तियों को जोड़ें:
|
|
|
|
```HTML
|
|
<!DOCTYPE html>
|
|
<html></html>
|
|
```
|
|
|
|
✅ कुछ अलग तरीके हैं जो डॉक टाइप को क्वेरी स्ट्रिंग के साथ निर्धारित करके निर्धारित किए जा सकते हैं: [क्विर्क मोड और स्टैंडर्ड मोड](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ये मोड वास्तव में पुराने ब्राउज़रों का समर्थन करते थे जो आजकल सामान्य रूप से उपयोग नहीं किए जाते हैं (नेटस्केप नेविगेटर 4 और इंटरनेट एक्सप्लोरर 5)। आप मानक सिद्धांत घोषणा से चिपक सकते हैं।
|
|
|
|
---
|
|
|
|
## दस्तावेज़ का 'head'
|
|
|
|
HTML दस्तावेज़ के 'हेड' क्षेत्र में आपके वेब पेज के बारे में महत्वपूर्ण जानकारी शामिल है, जिसे [मेटाडेटा](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) के रूप में भी जाना जाता है। हमारे मामले में, हम वेब सर्वर को बताते हैं कि इस पेज को किस पेज पर भेजा जाएगा, ये चार बातें:
|
|
|
|
- पेज का शीर्षक
|
|
- पृष्ठ मेटाडेटा सहित:
|
|
- 'वर्ण सेट', पृष्ठ में किस वर्ण एन्कोडिंग का उपयोग किया जाता है, इस बारे में बताना
|
|
- `x-ua-compatible` सहित ब्राउज़र जानकारी, जो इंगित करता है कि IE = एज ब्राउज़र समर्थित है
|
|
- लोड होने पर व्यूपोर्ट कैसे व्यवहार करना चाहिए, इसके बारे में जानकारी। जब पृष्ठ पहली बार लोड होता है तो व्यूपोर्ट के शुरुआती स्तर को नियंत्रित करने के लिए व्यूपोर्ट सेट करना 1 को नियंत्रित करता है।
|
|
|
|
### टास्क
|
|
|
|
'<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>
|
|
```
|
|
|
|
✅ यदि आप व्यूपोर्ट मेटा टैग इस तरह सेट करते हैं तो क्या होगा: `<meta name="viewport" content="width=600">`? [Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) के बारे में और पढ़ें।
|
|
---
|
|
|
|
## दस्तावेज़ की `body`
|
|
|
|
### HTML टैग्स
|
|
|
|
HTML में, आप वेब पेज के तत्वों को बनाने के लिए अपने .html फ़ाइल में टैग जोड़ते हैं। प्रत्येक टैग में आमतौर पर एक उद्घाटन और समापन टैग होता है, जैसे: पैराग्राफ को इंगित करने के लिए `<p>hello</ p>`। `<Html>` टैग जोड़ी के अंदर `<body>` टैग का एक सेट जोड़कर अपने इंटरफ़ेस का शरीर बनाएं; आपका मार्कअप अब इस तरह दिखता है:
|
|
|
|
### टास्क
|
|
|
|
```html
|
|
<!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` कहा जाता है और उस में, [स्रोत कोड फ़ोल्डर](../solution/images) में सभी छवियों को जोड़ें; (पौधों की 14 छवियां हैं)।
|
|
|
|
### टास्क
|
|
|
|
`<Body> </ body>` टैग के बीच उन पौधों की छवियों को दो कॉलमों में जोड़ें:
|
|
|
|
```html
|
|
<div id="page">
|
|
<div id="left-container" class="container">
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
|
|
</div>
|
|
</div>
|
|
<div id="right-container" class="container">
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
|
|
</div>
|
|
<div class="plant-holder">
|
|
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
> नोट: स्पैन बनाम डिवाज। डिव को 'ब्लॉक' तत्व माना जाता है और स्पैन को 'इनलाइन'। अगर आप इन डिवो को स्पैन में तब्दील कर देंगे तो क्या होगा?
|
|
|
|
इस मार्कअप के साथ, पौधे अब स्क्रीन पर दिखाई देते हैं। यह बहुत बुरा लग रहा है, क्योंकि वे अभी तक CSS का उपयोग नहीं कर रहे हैं, और हम अगले पाठ में ऐसा करेंगे।
|
|
|
|
प्रत्येक छवि में ऑल्ट टेक्स्ट होता है, भले ही आप किसी चित्र को देख या प्रस्तुत नहीं कर सकते हैं। पहुँच के लिए शामिल करने के लिए यह एक महत्वपूर्ण विशेषता है। भविष्य के पाठों में पहुंच के बारे में अधिक जानें; अभी के लिए, याद रखें कि यदि कोई उपयोगकर्ता किसी कारण से इसे नहीं देख सकता है (धीमी गति से कनेक्शन के कारण, src विशेषता में कोई त्रुटि, या यदि उपयोगकर्ता एक स्क्रीन रीडर का उपयोग करता है), तो सर्वोच्च विशेषता किसी छवि के लिए वैकल्पिक जानकारी प्रदान करती है।
|
|
|
|
✅ क्या आपने देखा कि प्रत्येक छवि का एक ही ऑल्ट टैग है? क्या यह अच्छा अभ्यास है? क्यों या क्यों नहीं? क्या आप इस कोड को सुधार सकते हैं?
|
|
|
|
---
|
|
|
|
## शब्दार्थ मार्कअप
|
|
|
|
सामान्य तौर पर, HTML लिखते समय सार्थक 'शब्दार्थ' का उपयोग करना बेहतर होता है। इसका क्या मतलब है? इसका अर्थ है कि आप जिस प्रकार के डेटा या इंटरैक्शन के लिए डिज़ाइन किए गए थे, उनका प्रतिनिधित्व करने के लिए आप HTML टैग का उपयोग करते हैं। उदाहरण के लिए, किसी पृष्ठ पर मुख्य शीर्षक पाठ में `<h1>` टैग का उपयोग करना चाहिए।
|
|
|
|
अपने उद्घाटन के ठीक नीचे निम्न पंक्ति जोड़ें `<body>` टैग:
|
|
|
|
```html
|
|
<h1>My Terrarium</h1>
|
|
```
|
|
|
|
सिमेंटिक मार्कअप का उपयोग करना जैसे हेडर होना `<h1>` और अनऑर्डर किए गए सूचियों को `<ul>` के रूप में प्रस्तुत किया जाना चाहिए। स्क्रीन रीडर्स को पेज के माध्यम से नेविगेट करने में मदद करता है। सामान्य तौर पर, बटन को `<button>` के रूप में लिखा जाना चाहिए और सूचियों को `<li>` होना चाहिए। हालांकि यह संभव नहीं है कि विशेष रूप से स्टाइल किए गए `<span>` 'तत्वों का उपयोग करने के लिए क्लिक हैंडलर के साथ बटन को मॉक करें, अक्षम उपयोगकर्ताओं के लिए प्रौद्योगिकियों का उपयोग करना बेहतर होता है यह निर्धारित करने के लिए कि एक पृष्ठ पर बटन कहाँ रहता है, और इसके साथ बातचीत करने के लिए, यदि तत्व एक के रूप में प्रकट होता है बटन। इस कारण से, संभव के रूप में अर्थ मार्कअप का उपयोग करने का प्रयास करें।
|
|
|
|
✅ एक स्क्रीन रीडर पर नज़र डालें और [यह कैसे एक वेब पेज के साथ बातचीत करता है](https://www.youtube.com/watch?v=OUDV1gqs9GA)। क्या आप देख सकते हैं कि गैर शब्दार्थ मार्कअप होने से उपयोगकर्ता निराश हो सकता है?
|
|
|
|
## टेरारियम
|
|
|
|
इस इंटरफ़ेस के अंतिम भाग में मार्कअप बनाना शामिल है जिसे टेरारियम बनाने के लिए स्टाइल किया जाएगा।
|
|
|
|
### टास्क:
|
|
|
|
इस मार्कअप को अंतिम `</div>` टैग के ऊपर जोड़ें:
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
✅ हालाँकि आपने इस मार्कअप को स्क्रीन पर जोड़ा है, फिर भी आप बिल्कुल कुछ भी प्रस्तुत नहीं करते हैं। क्यों?
|
|
|
|
---
|
|
|
|
## 🚀चुनौती
|
|
|
|
HTML में कुछ जंगली 'पुराने' टैग हैं जो अभी भी खेलने में मज़ेदार हैं, हालांकि आपको [[इन टैग्स](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obirect_and_deprecated_elements) जैसे अस्वीकृत टैग का उपयोग नहीं करना चाहिए आपके मार्कअप में । फिर भी, आप h1 शीर्षक स्क्रॉल को क्षैतिज रूप से बनाने के लिए पुराने `<marquee>` टैग का उपयोग कर सकते हैं? (यदि आप ऐसा करते हैं, तो इसे बाद में हटाना न भूलें)
|
|
|
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
|
|
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16?loc=hi)
|
|
|
|
## समीक्षा और स्व अध्ययन
|
|
|
|
HTML 'ट्राइ एंड ट्रू' बिल्डिंग ब्लॉक सिस्टम है जिसने वेब को आज के समय में बनाने में मदद की है। कुछ पुराने और नए टैग का अध्ययन करके इसके इतिहास के बारे में थोड़ा जानें। क्या आप यह पता लगा सकते हैं कि कुछ टैग क्यों हटाए गए और कुछ जोड़े गए? भविष्य में कौन से टैग पेश किए जा सकते हैं?
|
|
|
|
[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academy-13441-cxa) पर वेब और मोबाइल उपकरणों के लिए साइट बनाने के बारे में और जानें।
|
|
|
|
## असाइनमेंट
|
|
|
|
[अपने HTML का अभ्यास करें: एक ब्लॉग मॉकअप बनाएँ](assignment.hi.md)
|