# टेरॅरियम प्रकल्प भाग 1: HTML ची ओळख ![HTML ची ओळख](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.mr.png) > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) यांच्याकडून HTML, म्हणजेच हायपरटेक्स्ट मार्कअप भाषा, ही तुम्ही कधीही भेट दिलेल्या प्रत्येक वेबसाइटची पायाभूत रचना आहे. HTML ला वेब पृष्ठांचे सांगाडा समजले जाते – ते सामग्री कुठे जाते, ती कशी आयोजित केली जाते आणि प्रत्येक भागाचे प्रतिनिधित्व काय आहे हे परिभाषित करते. CSS नंतर तुमच्या HTML ला रंग आणि लेआउटसह "सजवेल", आणि JavaScript त्याला परस्परसंवादी बनवेल, HTML ही मूलभूत रचना प्रदान करते ज्यामुळे बाकी सर्व शक्य होते. या धड्यात, तुम्ही व्हर्च्युअल टेरॅरियम इंटरफेससाठी HTML रचना तयार कराल. हा प्रकल्प तुम्हाला मूलभूत HTML संकल्पना शिकवेल आणि काहीतरी दृश्यात्मक आकर्षक तयार करेल. तुम्ही सामग्रीला सेमॅंटिक घटकांचा वापर करून कसे आयोजित करायचे, प्रतिमांसोबत कसे काम करायचे आणि परस्परसंवादी वेब अनुप्रयोगासाठी पाया कसा तयार करायचा हे शिकाल. या धड्याच्या शेवटी, तुम्ही वनस्पतींच्या प्रतिमा व्यवस्थित स्तंभांमध्ये प्रदर्शित करणारे कार्यरत HTML पृष्ठ तयार केले असेल, जे पुढील धड्यात शैलीसाठी तयार असेल. सुरुवातीला ते मूलभूत दिसत असल्यास काळजी करू नका – CSS दृश्यात्मक आकर्षण जोडण्यापूर्वी HTML नेमके तेच करायला हवे. ## पूर्व-व्याख्यान प्रश्नमंजुषा [पूर्व-व्याख्यान प्रश्नमंजुषा](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: व्हिज्युअल स्टुडिओ कोड वापरणे** 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` ठेवा ![VS Code Explorer नवीन फाइल तयार करणे दाखवत आहे](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.mr.png) **पर्याय 2: टर्मिनल कमांड्स वापरणे** ```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 दस्तऐवज विशिष्ट रचना अनुसरतो ज्याची ब्राउझरला योग्यरित्या समजून घेण्यासाठी आणि प्रदर्शित करण्यासाठी आवश्यकता असते. या रचनेला औपचारिक पत्रासारखे समजा – त्यात विशिष्ट क्रमाने आवश्यक घटक असतात जे प्राप्तकर्त्याला (या प्रकरणात, ब्राउझर) सामग्री योग्य प्रकारे प्रक्रिया करण्यास मदत करतात. चला प्रत्येक HTML दस्तऐवजाला आवश्यक असलेला मूलभूत पाया जोडण्यास सुरुवात करूया. ### DOCTYPE घोषणा आणि मूळ घटक कोणत्याही HTML फाइलच्या पहिल्या दोन ओळी ब्राउझरला दस्तऐवजाची "ओळख" म्हणून काम करतात: ```html ``` **या कोडचे कार्य समजून घेणे:** - **दस्तऐवज प्रकार HTML5 म्हणून घोषित करते** `` वापरून - **मूळ `` घटक तयार करते** जो सर्व पृष्ठ सामग्री समाविष्ट करेल - **आधुनिक वेब मानके स्थापित करते** योग्य ब्राउझर रेंडरिंगसाठी - **वेगवेगळ्या ब्राउझर आणि उपकरणांमध्ये सुसंगत प्रदर्शन सुनिश्चित करते** > 💡 **VS Code टिप**: VS Code मध्ये कोणत्याही HTML टॅगवर होवर करा आणि MDN वेब डॉक्समधून उपयुक्त माहिती पहा, ज्यामध्ये वापर उदाहरणे आणि ब्राउझर सुसंगतता तपशील समाविष्ट आहेत. > 📚 **अधिक जाणून घ्या**: DOCTYPE घोषणा ब्राउझरला "quirks mode" मध्ये प्रवेश करण्यापासून प्रतिबंधित करते, जी खूप जुनी वेबसाइट्सला समर्थन देण्यासाठी वापरली जात होती. आधुनिक वेब विकास साध्या `` घोषणेसह [मानक-अनुरूप रेंडरिंग](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) सुनिश्चित करतो. ## आवश्यक दस्तऐवज मेटाडेटा जोडणे HTML दस्तऐवजाचा `` विभाग महत्त्वाची माहिती समाविष्ट करतो जी ब्राउझर आणि शोध इंजिनला आवश्यक असते, परंतु जी अभ्यागतांना थेट पृष्ठावर दिसत नाही. याला "पर्द्यामागील" माहिती समजा जी तुमचे वेबपृष्ठ योग्य प्रकारे कार्य करण्यास आणि वेगवेगळ्या उपकरणे आणि प्लॅटफॉर्मवर योग्यरित्या दिसण्यास मदत करते. हे मेटाडेटा ब्राउझरला तुमचे पृष्ठ कसे प्रदर्शित करायचे, कोणते कॅरेक्टर एन्कोडिंग वापरायचे आणि वेगवेगळ्या स्क्रीन आकारांशी कसे हाताळायचे हे सांगते – व्यावसायिक, प्रवेशयोग्य वेबपृष्ठे तयार करण्यासाठी सर्व आवश्यक. ### कार्य: दस्तऐवज हेड जोडा तुमच्या उघडणाऱ्या आणि बंद होणाऱ्या `` टॅगमध्ये हा `` विभाग घाला: ```html 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. [solution folder](../../../../3-terrarium/solution/images) मधून वनस्पतींच्या प्रतिमा डाउनलोड करा (एकूण 14 वनस्पतींच्या प्रतिमा) 3. सर्व वनस्पतींच्या प्रतिमा तुमच्या नवीन `images` फोल्डरमध्ये कॉपी करा ### कार्य: वनस्पती प्रदर्शन लेआउट तयार करा आता तुमच्या `` टॅगमध्ये दोन स्तंभांमध्ये आयोजित केलेल्या वनस्पतींच्या प्रतिमा जोडा: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **या कोडमध्ये काय होत आहे याचे चरण-दर-चरण विश्लेषण:** - **मुख्य पृष्ठ कंटेनर तयार करते** `id="page"` सह सर्व सामग्री ठेवण्यासाठी - **दोन स्तंभ कंटेनर स्थापित करते**: `left-container` आणि `right-container` - **डाव्या स्तंभात 7 वनस्पती आणि उजव्या स्तंभात 7 वनस्पती आयोजित करते** - **प्रत्येक वनस्पती प्रतिमेला `plant-holder` div मध्ये लपेटते** वैयक्तिक स्थितीसाठी - **सुसंगत वर्ग नावे लागू करते** पुढील धड्यात CSS शैलीसाठी - **प्रत्येक वनस्पती प्रतिमेला अद्वितीय IDs नियुक्त करते** नंतर JavaScript परस्परसंवादासाठी - **प्रतिमा फोल्डरकडे निर्देश करणारे योग्य फाइल पथ समाविष्ट करते** > 🤔 **याचा विचार करा**: लक्षात घ्या की सर्व प्रतिमांमध्ये सध्या समान alt मजकूर "plant" आहे. हे प्रवेशयोग्यतेसाठी आदर्श नाही. स्क्रीन रीडर वापरकर्त्यांना "plant" 14 वेळा ऐकायला मिळेल, प्रत्येक प्रतिमा कोणती विशिष्ट वनस्पती दर्शवते हे न कळता. प्रत्येक प्रतिमेसाठी चांगले, अधिक वर्णनात्मक alt मजकूर विचार करू शकता का? > 📝 **HTML घटक प्रकार**: `
` घटक "ब्लॉक-स्तरीय" असतात आणि पूर्ण रुंदी घेतात, तर `` घटक "इनलाइन" असतात आणि आवश्यक रुंदी घेतात. जर तुम्ही सर्व `
` टॅग्स `` टॅग्समध्ये बदलले तर काय होईल असे तुम्हाला वाटते? या मार्कअपसह, वनस्पती स्क्रीनवर दिसतील, जरी ते अद्याप आकर्षक दिसणार नाहीत – त्यासाठी CSS पुढील धड्यात आहे! सध्या, तुमच्याकडे तुमची सामग्री योग्य प्रकारे आयोजित करणारा आणि प्रवेशयोग्यतेच्या सर्वोत्तम पद्धतींचे अनुसरण करणारा एक ठोस HTML पाया आहे. ## प्रवेशयोग्यतेसाठी सेमॅंटिक HTML वापरणे सेमॅंटिक HTML म्हणजे HTML घटक त्यांच्या अर्थ आणि उद्देशावर आधारित निवडणे, फक्त त्यांच्या स्वरूपावर नाही. जेव्हा तुम्ही सेमॅंटिक मार्कअप वापरता, तेव्हा तुम्ही ब्राउझर, शोध इंजिन आणि स्क्रीन रीडर सारख्या सहाय्यक तंत्रज्ञानाला तुमच्या सामग्रीची रचना आणि अर्थ सांगत असता. हा दृष्टिकोन अपंगत्व असलेल्या वापरकर्त्यांसाठी तुमच्या वेबसाइट्स अधिक प्रवेशयोग्य बनवतो आणि शोध इंजिनांना तुमची सामग्री चांगल्या प्रकारे समजण्यास मदत करतो. आधुनिक वेब विकासाचा हा एक मूलभूत तत्त्व आहे जो सर्वांसाठी चांगले अनुभव तयार करतो. ### सेमॅंटिक पृष्ठ शीर्षक जोडणे चला तुमच्या टेरॅरियम पृष्ठाला योग्य शीर्षक जोडूया. तुमच्या उघडणाऱ्या `` टॅगनंतर ही ओळ घाला: ```html

My Terrarium

``` **सेमॅंटिक मार्कअप का महत्त्वाचे आहे:** - **स्क्रीन रीडरला पृष्ठ रचना नेव्हिगेट करण्यात आणि समजून घेण्यात मदत करते** - **शोध इंजिन ऑप्टिमायझेशन (SEO) सुधारते** सामग्री श्रेणी स्पष्ट करून - **दृष्टीदोष किंवा संज्ञानात्मक फरक असलेल्या वापरकर्त्यांसाठी प्रवेशयोग्यता वाढवते** - **सर्व उपकरणे आणि प्लॅटफॉर्मवर चांगले वापरकर्ता अनुभव तयार करते** - **वेब मानके आणि व्यावसायिक विकासासाठी सर्वोत्तम पद्धतींचे अनुसरण करते** **सेमॅंटिक विरुद्ध गैर-सेमॅंटिक निवडींची उदाहरणे:** | उद्देश | ✅ सेमॅंटिक निवड | ❌ गैर-सेमॅंटिक निवड | |---------|-------------------|------------------------| | मुख्य शीर्षक | `

Title

` | `
Title
` | | नेव्हिगेशन | `` | `
` | | बटण | `` | `Click me` | | लेख सामग्री | `

` | `
` | > 🎥 **ते कृतीत पहा**: [स्क्रीन रीडर वेब पृष्ठांशी कसे संवाद साधतात](https://www.youtube.com/watch?v=OUDV1gqs9GA) हे पहा, सेमॅंटिक मार्कअप का महत्त्वाचे आहे हे समजून घेण्यासाठी. योग्य HTML रचना वापरकर्त्यांना कार्यक्षमतेने नेव्हिगेट करण्यात कशी मदत करते ते लक्षात घ्या. ## टेरॅरियम कंटेनर तयार करणे आता टेरॅरियमसाठी HTML रचना जोडूया – काचेचा कंटेनर जिथे वनस्पती अखेरीस ठेवले जातील. हा विभाग एक महत्त्वाचा संकल्पना दर्शवतो: HTML रचना प्रदान करते, परंतु CSS शैलीशिवाय, हे घटक अद्याप दृश्यमान होणार नाहीत. टेरॅरियम मार्कअप वर्णनात्मक वर्ग नावे वापरतो ज्यामुळे CSS शैली पुढील धड्यात अंतर्ज्ञानी आणि देखभालक्षम होईल. ### कार्य: टेरॅरियम रचना जोडा शेवटच्या `
` टॅगच्या वर (पृष्ठ कंटेनरच्या बंद टॅगच्या आधी) हा मार्कअप घाला: ```html
``` **या टेरॅ **प्रॉम्प्ट:** मुख्य शीर्षक "वनस्पती काळजी मार्गदर्शक" असलेला एक सेमॅंटिक HTML विभाग तयार करा, ज्यामध्ये "पाणी देणे", "प्रकाशाची आवश्यकता" आणि "मातीची काळजी" या तीन उपविभागांसह प्रत्येकामध्ये वनस्पती काळजीविषयी माहिती असलेली एक परिच्छेद असेल. योग्य सेमॅंटिक HTML टॅग्स जसे की `
`, `

`, `

`, आणि `

` वापरून सामग्री योग्य प्रकारे संरचित करा. [एजंट मोड](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) बद्दल अधिक जाणून घ्या. ## HTML इतिहास आव्हानाचा शोध **वेब उत्क्रांतीबद्दल शिकणे** HTML मध्ये खूप बदल झाले आहेत, 1990 मध्ये टिम बर्नर्स-ली यांनी CERN येथे पहिला वेब ब्राउझर तयार केल्यापासून. काही जुन्या टॅग्स जसे की `` आता अप्रचलित झाले आहेत कारण ते आधुनिक प्रवेशयोग्यता मानक आणि प्रतिसादात्मक डिझाइन तत्त्वांसोबत चांगले कार्य करत नाहीत. **हा प्रयोग करून पहा:** 1. तुमच्या `

` शीर्षकाला तात्पुरते `` टॅगमध्ये गुंडाळा: `

माझा टेरॅरियम

` 2. तुमचा पृष्ठ ब्राउझरमध्ये उघडा आणि स्क्रोलिंग प्रभाव पाहा 3. विचार करा की हा टॅग का अप्रचलित झाला (सूचना: वापरकर्ता अनुभव आणि प्रवेशयोग्यतेबद्दल विचार करा) 4. `` टॅग काढा आणि सेमॅंटिक मार्कअपवर परत जा **चिंतन प्रश्न:** - स्क्रोलिंग शीर्षकाचा व्हिज्युअल इम्पेअरमेंट किंवा मोशन सेन्सिटिव्हिटी असलेल्या वापरकर्त्यांवर कसा परिणाम होऊ शकतो? - समान व्हिज्युअल प्रभाव अधिक प्रवेशयोग्यतेने साध्य करण्यासाठी कोणत्या आधुनिक CSS तंत्रांचा वापर करता येईल? - अप्रचलित घटकांऐवजी वर्तमान वेब मानकांचा वापर करणे का महत्त्वाचे आहे? [अप्रचलित आणि अप्रचलित HTML घटक](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) बद्दल अधिक शोधा जेणेकरून वेब मानक कसे विकसित होतात आणि वापरकर्ता अनुभव सुधारतात हे समजून घेता येईल. ## व्याख्यानानंतरचा क्विझ [व्याख्यानानंतरचा क्विझ](https://ff-quizzes.netlify.app/web/quiz/16) ## पुनरावलोकन आणि स्व-अभ्यास **तुमचे HTML ज्ञान वाढवा** HTML गेल्या 30 वर्षांपासून वेबचा पाया आहे, एक साधा दस्तऐवज मार्कअप भाषा म्हणून विकसित होऊन परस्परसंवादी अनुप्रयोग तयार करण्यासाठी एक परिष्कृत प्लॅटफॉर्म बनला आहे. ही उत्क्रांती समजून घेणे तुम्हाला आधुनिक वेब मानकांचे कौतुक करण्यास मदत करते आणि चांगले विकास निर्णय घेण्यास मदत करते. **शिफारस केलेले शिक्षण मार्ग:** 1. **HTML इतिहास आणि उत्क्रांती** - HTML 1.0 पासून HTML5 पर्यंतचा टाइमलाइन शोधा - विशिष्ट टॅग्स का अप्रचलित झाले याचा अभ्यास करा (प्रवेशयोग्यता, मोबाइल-फ्रेंडलीनेस, देखभालक्षमता) - उदयोन्मुख HTML वैशिष्ट्ये आणि प्रस्तावांचा शोध घ्या 2. **सेमॅंटिक HTML सखोल अभ्यास** - [HTML5 सेमॅंटिक घटकांची संपूर्ण यादी](https://developer.mozilla.org/docs/Web/HTML/Element) अभ्यासा - `
`, `
`, `