वेबसाइट विकास
4.2(174)
मॉड्यूल 1: वेब का परिचय (1-2 सप्ताह)
<ली>
पाठ 1: इंटरनेट क्या है और वेब कैसे काम करता है?
- इंटरनेट और वर्ल्ड वाइड वेब की अवधारणा का परिचय।
- यह समझना कि वेबसाइटें कैसे बनाई जाती हैं और उपयोगकर्ताओं द्वारा कैसे देखी जाती हैं।
- ब्राउज़र, सर्वर और यूआरएल का स्पष्टीकरण।
- व्यावहारिक गतिविधि: विभिन्न वेबसाइटों की खोज करना और उनकी संरचना पर चर्चा करना।
<ली>
पाठ 2: HTML का परिचय - एक वेबसाइट की संरचना का निर्माण
- एचटीएमएल क्या है? यह वेब सामग्री को संरचित करने के लिए उपयोग की जाने वाली भाषा है।
- मूल HTML टैग:
, , , , , , आदि
- तत्वों, विशेषताओं और टैग को समझना।
- व्यावहारिक गतिविधि: शीर्षक, पैराग्राफ और लिंक के साथ एक सरल वेबपेज बनाएं।
<ली>
पाठ 3: सीएसएस का परिचय - अपनी वेबसाइट को स्टाइल करना
- सीएसएस क्या है? इसका उपयोग वेब पेजों के स्वरूप को स्टाइल करने के लिए किया जाता है।
- सीएसएस चयनकर्ताओं, रंग, फ़ॉन्ट और लेआउट का परिचय।
- व्यावहारिक गतिविधि: अपने वेबपेज पर रंग, फ़ॉन्ट शैली और पृष्ठभूमि जोड़ें।
<घंटा />
मॉड्यूल 2: अपना पहला वेबपेज बनाना (2-3 सप्ताह)
<ली>
पाठ 1: अपनी वेबसाइट स्थापित करना
- अपनी फ़ाइलें कैसे व्यवस्थित करें: HTML फ़ाइलें, CSS फ़ाइलें और छवियां।
- वेब डेवलपमेंट प्लेटफ़ॉर्म (जैसे, कोडपेन, रेप्लिट, या विज़ुअल स्टूडियो कोड) का परिचय।
- व्यावहारिक गतिविधि: अपने वेबसाइट प्रोजेक्ट के लिए एक फ़ोल्डर संरचना बनाएं।
<ली>
पाठ 2: छवियों और लिंक के साथ काम करना
-
![]()
टैग का उपयोग करके अपने वेबपेज पर छवियां जोड़ना।
टैग के साथ लिंक बनाना और एंकर लिंक को समझना।
- हैंड-ऑन गतिविधि: अपने वेबपेज पर एक छवि जोड़ें और दूसरे पेज के लिए एक नेविगेशन लिंक बनाएं।
<ली>
पाठ 3: एक सरल वेबपेज की संरचना करना
- शीर्षक, पैराग्राफ और सूचियाँ बनाना।
- सरल डेटा इनपुट के लिए तालिकाओं और प्रपत्रों का उपयोग करना।
- व्यावहारिक गतिविधि: एक संक्षिप्त जीवनी, एक छवि और एक संपर्क फ़ॉर्म के साथ एक व्यक्तिगत वेबपेज बनाएं।
<घंटा />
मॉड्यूल 3: अपनी वेबसाइट को बेहतर बनाना (2-3 सप्ताह)
<ली>
पाठ 1: सीएसएस के साथ लेआउट का परिचय
- बॉक्स मॉडल (पैडिंग, मार्जिन, बॉर्डर, सामग्री) को समझना।
- पोजीशनिंग तत्वों का परिचय (स्थिर, सापेक्ष, निरपेक्ष)।
- लेआउट प्रबंधन के लिए फ्लेक्सबॉक्स और सीएसएस ग्रिड का उपयोग करना।
- हैंड-ऑन गतिविधि: एकाधिक अनुभागों (हेडर, बॉडी, फ़ूटर) के साथ एक लेआउट बनाएं।
<ली>
पाठ 2: स्टाइलिंग टेक्स्ट, बटन और नेविगेशन
- फ़ॉन्ट शैली, आकार और रंग बदलना।
- बटन बनाना और उन्हें होवर प्रभाव से स्टाइल करना।
- हैंड-ऑन गतिविधि: अपनी वेबसाइट के नेविगेशन बार को स्टाइल करें और इंटरैक्टिव बटन जोड़ें।
<ली>
पाठ 3: अपनी वेबसाइट को उत्तरदायी बनाना
- रिस्पॉन्सिव डिज़ाइन का परिचय: वेबसाइटें विभिन्न उपकरणों (फोन, टैबलेट, डेस्कटॉप) पर कैसे दिखती हैं।
- विभिन्न स्क्रीन आकारों के लिए लेआउट को समायोजित करने के लिए मीडिया प्रश्नों का उपयोग करना।
- व्यावहारिक गतिविधि: मोबाइल उपकरणों पर अच्छा दिखने के लिए अपने वेबपेज को संशोधित करें।
<घंटा />
मॉड्यूल 4: जावास्क्रिप्ट के साथ इंटरैक्टिव वेबसाइटें (2-3 सप्ताह)
<ली>
पाठ 1: जावास्क्रिप्ट का परिचय
- जावास्क्रिप्ट क्या है? इसका उपयोग आपकी वेबसाइट को इंटरैक्टिव बनाने के लिए किया जाता है।
- चर, फ़ंक्शन और घटनाओं का परिचय।
- हैंड-ऑन गतिविधि: अलर्ट या कंसोल लॉग प्रदर्शित करने के लिए अपना पहला जावास्क्रिप्ट कोड लिखें।
<ली>
पाठ 2: जावास्क्रिप्ट के साथ अन्तरक्रियाशीलता जोड़ना
- DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) के साथ काम करना: तत्वों का चयन करना और सामग्री बदलना।
- घटनाओं का परिचय: क्लिक, होवर, इनपुट, आदि
- हैंड-ऑन गतिविधि: एक बटन जोड़ें जो क्लिक करने पर टेक्स्ट या रंग बदल देता है।
<घंटा />
मॉड्यूल 5: एक व्यक्तिगत वेबसाइट बनाना (3-4 सप्ताह)
<ली>
पाठ 1: अपनी व्यक्तिगत वेबसाइट की योजना बनाना
- अपनी व्यक्तिगत वेबसाइट की संरचना पर विचार-मंथन और योजना बनाना।
- यह तय करना कि कौन से अनुभाग और सामग्री शामिल की जाए: मेरे बारे में, प्रोजेक्ट, संपर्क।
- हैंड-ऑन गतिविधि: अपनी वेबसाइट के लेआउट का एक वायरफ्रेम या स्केच बनाएं।
<ली>
पाठ 2: अपनी व्यक्तिगत वेबसाइट डिज़ाइन करना
- डिज़ाइन सिद्धांतों को लागू करना: सरलता, विरोधाभास और पठनीयता।
- अपनी वेबसाइट के लिए एक सुसंगत रंग योजना और शैली बनाना।
- व्यावहारिक गतिविधि: अपनी निजी वेबसाइट का मुखपृष्ठ डिज़ाइन करें।
<ली>
पाठ 3: अपनी व्यक्तिगत वेबसाइट पर सामग्री जोड़ना
- अपने पेजों के लिए सामग्री लिखना: परिचय, शौक, पोर्टफोलियो, या प्रोजेक्ट।
- सोशल मीडिया या बाहरी साइटों पर लिंक जोड़ना।
- व्यावहारिक गतिविधि: अतिरिक्त पेज बनाएं (उदाहरण के लिए, "मेरे बारे में", "प्रोजेक्ट", "संपर्क")।
<घंटा />
परिणाम:
इस पाठ्यक्रम के अंत तक, छात्र HTML, CSS और JavaScript का उपयोग करके अपनी स्वयं की निजी वेबसाइट बना लेंगे। वे वेब विकास के साथ व्यावहारिक अनुभव प्राप्त करेंगे और अधिक उन्नत वेबसाइट या एप्लिकेशन बनाकर अपने कौशल का और अधिक अन्वेषण और निर्माण करने में सक्षम होंगे।