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.
249 lines
22 KiB
249 lines
22 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "89f7f9f800ce7c9f149e98baaae8491a",
|
|
"translation_date": "2025-08-28T16:19:34+00:00",
|
|
"source_file": "3-terrarium/1-intro-to-html/README.md",
|
|
"language_code": "mr"
|
|
}
|
|
-->
|
|
# टेरॅरियम प्रकल्प भाग 1: HTML ची ओळख
|
|
|
|
|
|
> स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांनी तयार केलेली
|
|
|
|
## व्याख्यानपूर्व प्रश्नमंजुषा
|
|
|
|
[व्याख्यानपूर्व प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/15)
|
|
|
|
> व्हिडिओ पहा
|
|
|
|
>
|
|
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
|
|
|
|
### परिचय
|
|
|
|
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 terrarium`
|
|
* `cd terrarium`
|
|
* `touch index.html`
|
|
* `code index.html` किंवा `nano index.html`
|
|
|
|
> index.html फाइल्स ब्राउझरला सूचित करतात की ती फोल्डरमधील डिफॉल्ट फाइल आहे; जसे की `https://anysite.com/test` सारख्या URL चा फोल्डर संरचनेचा वापर करून तयार केला जाऊ शकतो ज्यामध्ये `test` नावाचा फोल्डर आणि त्यात `index.html` असतो; URL मध्ये `index.html` दिसण्याची गरज नाही.
|
|
|
|
---
|
|
|
|
## डोकटाइप आणि html टॅग्स
|
|
|
|
HTML फाइलची पहिली ओळ म्हणजे तिचा डोकटाइप. फाइलच्या अगदी वर ही ओळ असणे आवश्यक आहे हे थोडे आश्चर्यकारक आहे, परंतु ती जुन्या ब्राउझरला सांगते की पृष्ठ सध्याच्या HTML स्पेसिफिकेशनचे अनुसरण करून मानक मोडमध्ये रेंडर करणे आवश्यक आहे.
|
|
|
|
> टिप: VS Code मध्ये, तुम्ही टॅगवर होवर करू शकता आणि MDN संदर्भ मार्गदर्शकांमधून त्याच्या वापराबद्दल माहिती मिळवू शकता.
|
|
|
|
दुसरी ओळ `<html>` टॅगची ओपनिंग टॅग असावी, आणि त्यानंतर लगेच त्याचा क्लोजिंग टॅग `</html>` असावा. हे टॅग्स तुमच्या इंटरफेसचे मूळ घटक आहेत.
|
|
|
|
### कार्य
|
|
|
|
तुमच्या `index.html` फाइलच्या शीर्षस्थानी या ओळी जोडा:
|
|
|
|
```HTML
|
|
<!DOCTYPE html>
|
|
<html></html>
|
|
```
|
|
|
|
✅ डोकटाइप सेट करून क्वेरी स्ट्रिंगद्वारे काही वेगवेगळे मोड्स ठरवले जाऊ शकतात: [Quirks Mode आणि Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). हे मोड्स खूप जुने ब्राउझर (Netscape Navigator 4 आणि Internet Explorer 5) समर्थित करण्यासाठी वापरले जात होते जे आजकाल सामान्यतः वापरले जात नाहीत. तुम्ही मानक डोकटाइप घोषणेला चिकटून राहू शकता.
|
|
|
|
---
|
|
|
|
## दस्तऐवजाचा 'head'
|
|
|
|
HTML दस्तऐवजाचा 'head' भाग तुमच्या वेब पृष्ठाबद्दल महत्त्वाची माहिती समाविष्ट करतो, ज्याला [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta) असेही म्हणतात. आपल्या प्रकरणात, आम्ही वेब सर्व्हरला सांगतो ज्याला हे पृष्ठ रेंडर करण्यासाठी पाठवले जाईल, या चार गोष्टी:
|
|
|
|
- पृष्ठाचे शीर्षक
|
|
- पृष्ठ मेटाडेटा ज्यामध्ये समाविष्ट आहे:
|
|
- 'character set', पृष्ठात कोणते अक्षर एन्कोडिंग वापरले आहे हे सांगते
|
|
- ब्राउझर माहिती, ज्यामध्ये `x-ua-compatible` समाविष्ट आहे जे सूचित करते की IE=edge ब्राउझर समर्थित आहे
|
|
- पृष्ठ लोड झाल्यावर viewport कसे वागावे याबद्दलची माहिती. viewport ला प्रारंभिक स्केल 1 वर सेट करणे पृष्ठ प्रथम लोड झाल्यावर झूम स्तर नियंत्रित करते.
|
|
|
|
### कार्य
|
|
|
|
`<html>` टॅगच्या ओपनिंग आणि क्लोजिंग टॅग्सच्या दरम्यान 'head' ब्लॉक जोडा.
|
|
|
|
```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>
|
|
```
|
|
|
|
✅ जर तुम्ही viewport meta टॅग असे सेट केले: `<meta name="viewport" content="width=600">`, तर काय होईल? [viewport](https://developer.mozilla.org/docs/Web/HTML/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` नावाचा फोल्डर तयार करा आणि त्यात [source code folder](../../../../3-terrarium/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 वापरून अद्याप शैलीबद्ध केलेले नाही, आणि आपण ते पुढील धड्यात करू.
|
|
|
|
प्रत्येक प्रतिमेसाठी alt टेक्स्ट असतो जो प्रतिमा दिसत नसल्यास किंवा रेंडर होत नसल्यास दिसतो. हे समाविष्ट करणे एक महत्त्वाचे गुणधर्म आहे कारण ते अॅक्सेसिबिलिटीसाठी उपयुक्त आहे. भविष्यातील धडांमध्ये अॅक्सेसिबिलिटीबद्दल अधिक जाणून घ्या; सध्या, लक्षात ठेवा की alt गुणधर्म वापरकर्त्यासाठी प्रतिमेची पर्यायी माहिती प्रदान करतो जर काही कारणास्तव प्रतिमा पाहता येत नसेल (मंद कनेक्शन, src गुणधर्मातील त्रुटी, किंवा वापरकर्ता स्क्रीन रीडर वापरत असल्यास).
|
|
|
|
✅ तुम्ही लक्षात घेतले का की प्रत्येक प्रतिमेसाठी समान alt टॅग आहे? हे चांगले सराव आहे का? का? तुम्ही हा कोड सुधारू शकता का?
|
|
|
|
---
|
|
|
|
## सेमॅंटिक मार्कअप
|
|
|
|
सामान्यतः, 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/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) सारखे अप्रचलित टॅग्स तुमच्या मार्कअपमध्ये वापरू नयेत. तरीही, तुम्ही `<marquee>` टॅग वापरून h1 शीर्षक आडवे स्क्रोल करू शकता का? (जर तुम्ही केले, तर नंतर ते काढून टाकायला विसरू नका)
|
|
|
|
## व्याख्यानानंतरची प्रश्नमंजुषा
|
|
|
|
[व्याख्यानानंतरची प्रश्नमंजुषा](https://ff-quizzes.netlify.app/web/quiz/16)
|
|
|
|
## पुनरावलोकन आणि स्व-अभ्यास
|
|
|
|
HTML ही 'विश्वासार्ह' बिल्डिंग ब्लॉक प्रणाली आहे ज्यामुळे वेब आज ज्या स्थितीत आहे तशी तयार झाली आहे. काही जुने आणि नवीन टॅग्स अभ्यासून त्याच्या इतिहासाबद्दल थोडेसे जाणून घ्या. तुम्ही शोधू शकता का की काही टॅग्स का अप्रचलित झाले आणि काही जोडले गेले? भविष्यात कोणते टॅग्स सादर केले जाऊ शकतात?
|
|
|
|
वेब आणि मोबाइल डिव्हाइससाठी साइट्स तयार करण्याबद्दल अधिक जाणून घ्या [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) वर.
|
|
|
|
## असाइनमेंट
|
|
|
|
[तुमच्या HTML सराव करा: ब्लॉग मॉकअप तयार करा](assignment.md)
|
|
|
|
---
|
|
|
|
**अस्वीकरण**:
|
|
हा दस्तऐवज AI भाषांतर सेवा [Co-op Translator](https://github.com/Azure/co-op-translator) वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही. |