इतनी सारी प्रोग्रामिंग, शैली और मार्कअप भाषाओं के विकास के साथ, वेब डिज़ाइन सीखना पहले से कहीं अधिक जटिल होता जा रहा है। सौभाग्य से, आरंभ करने में आपकी सहायता के लिए ढेर सारे टूल उपलब्ध हैं। कुछ बुनियादी संसाधनों की तलाश करें, जैसे ऑनलाइन ट्यूटोरियल या वेब डिज़ाइन पर एक अप-टू-डेट पुस्तक। एक बार जब आप शुरू करने के लिए तैयार हों, तो HTML और CSS की मूल बातों में महारत हासिल करके शुरुआत करें। फिर आप जावास्क्रिप्ट जैसी अधिक उन्नत वेब डिज़ाइन भाषाओं की खोज शुरू कर सकते हैं!
कदम
विधि 1: 4 में से: वेब डिज़ाइन संसाधन ढूँढना
चरण 1. वेब डिज़ाइन पाठ्यक्रम और ट्यूटोरियल के लिए ऑनलाइन जाँच करें।
इंटरनेट वेब डिज़ाइन के बारे में विस्तृत जानकारी से भरा है, और इसका बहुत कुछ स्वतंत्र रूप से उपलब्ध है। आप उडेमी या कोडकैडमी पर कुछ मुफ्त ऑनलाइन पाठ्यक्रम शुरू कर सकते हैं, या फ्रीकोडकैम्प जैसे कोडिंग समुदाय में शामिल हो सकते हैं। आप YouTube पर वेब डिज़ाइन वीडियो ट्यूटोरियल भी पा सकते हैं।
- यदि आप ठीक-ठीक जानते हैं कि आप क्या खोज रहे हैं, तो विशिष्ट शब्दों (जैसे, "सीएसएस ट्यूटोरियल में वर्ग चयनकर्ता") का उपयोग करके खोज करने का प्रयास करें।
- यदि आप बिना वेब डिज़ाइन के अनुभव के साथ शुरुआत कर रहे हैं, तो HTML और CSS में कोडिंग की मूल बातें सीखकर शुरुआत करें।
चरण 2. एक स्थानीय कॉलेज या विश्वविद्यालय में कक्षा लेने पर विचार करें।
यदि आप किसी कॉलेज या विश्वविद्यालय में भाग ले रहे हैं, तो अपने स्कूल के कंप्यूटर विज्ञान विभाग से संपर्क करें या यह पता लगाने के लिए कि कोई वेब डिज़ाइन पाठ्यक्रम उपलब्ध है या नहीं, अपनी पाठ्यक्रम सूची देखें। यदि आप स्कूल में नहीं हैं, तो यह देखने के लिए जांचें कि क्या आपके आस-पास कोई कॉलेज या विश्वविद्यालय वेब डिज़ाइन में सतत शिक्षा कक्षाएं प्रदान करते हैं।
कुछ विश्वविद्यालय ऑनलाइन वेब डिज़ाइन कक्षाएं प्रदान करते हैं जो नामांकन करने की इच्छा रखने वाले किसी भी व्यक्ति के लिए खुली हैं। विश्वविद्यालय के प्रशिक्षकों द्वारा सिखाई जाने वाली मुफ्त या सस्ती वेब डिज़ाइन कक्षाएं खोजने के लिए Coursera.org जैसी वेबसाइटों की जाँच करें।
चरण 3. किताबों की दुकान या पुस्तकालय से कुछ वेब डिज़ाइन पुस्तकें प्राप्त करें।
वेब डिज़ाइन पर एक अच्छी किताब एक अमूल्य संदर्भ हो सकती है क्योंकि आप अपने शिल्प को सीख रहे हैं और लागू कर रहे हैं। सामान्य वेब डिज़ाइन या विशिष्ट कोडिंग प्रारूपों और उन भाषाओं पर अप-टू-डेट पुस्तकों की तलाश करें जिन्हें आप सीखना चाहते हैं।
वेब डिज़ाइन के बारे में पत्रिकाएँ और ब्लॉग लेख पढ़ना भी नई तकनीकों को सीखने, प्रेरणा पाने और नवीनतम रुझानों के साथ बने रहने का एक अच्छा तरीका है।
चरण 4. कुछ वेब डिज़ाइन सॉफ़्टवेयर डाउनलोड करें या ख़रीदें।
अच्छा वेब डिज़ाइन सॉफ़्टवेयर आपको वेबसाइटों को अधिक कुशलतापूर्वक और प्रभावी ढंग से बनाने में मदद कर सकता है, और कोडिंग, स्क्रिप्टिंग और अन्य प्रमुख डिज़ाइन तत्वों को लागू करने के बारे में जानने में आपकी मदद करने के लिए भी बहुत अच्छा है। आपको इस तरह के टूल का उपयोग करने से लाभ हो सकता है:
- ग्राफिक डिज़ाइन प्रोग्राम, जैसे Adobe Photoshop, GIMP, या Sketch।
- वेबसाइट निर्माण उपकरण, जैसे कि WordPress, Chrome DevTools, या Adobe Dreamweaver।
- आपकी तैयार फाइलों को आपके सर्वर पर स्थानांतरित करने के लिए एफ़टीपी सॉफ्टवेयर।
चरण 5. आरंभ करने के साथ खेलने के लिए कुछ वेबसाइट टेम्पलेट खोजें।
जब आप वेब डिज़ाइन की मूल बातें सीखते हैं तो टेम्प्लेट का उपयोग करने में कुछ भी गलत नहीं है। अपनी पसंद के वेबपेज टेम्प्लेट की खोज करें, और डिज़ाइनर ने पेज को एक साथ कैसे रखा है, इसका अंदाजा लगाने के लिए कोड पर करीब से नज़र डालें। आप कोड बदलने और टेम्पलेट में अपने स्वयं के तत्वों को जोड़ने के साथ भी प्रयोग कर सकते हैं।
आरंभ करने के लिए निःशुल्क वेबसाइट टेम्पलेट खोजें, या अपने वेब डिज़ाइन सॉफ़्टवेयर के साथ आने वाले टेम्प्लेट के साथ प्रयोग करें।
विधि 2 का 4: HTML में महारत हासिल करना
चरण 1. बुनियादी HTML टैग्स से खुद को परिचित करें।
HTML एक साधारण मार्कअप भाषा है जिसका उपयोग किसी वेबसाइट के मूल तत्वों को प्रारूपित करने के लिए किया जाता है। आप टैग का उपयोग करके अपनी वेबसाइट के विभिन्न तत्वों को प्रारूपित कर सकते हैं। टैग प्रत्येक तत्व के पहले और बाद में कोण वाले कोष्ठक में दिखाई देते हैं, और यह निर्देश प्रदान करते हैं कि वह तत्व पृष्ठ पर कैसे कार्य करेगा। टैग को बंद करने के लिए, एंगल्ड ब्रैकेट्स के अंदर अंतिम टैग के सामने / लगा दें।
- उदाहरण के लिए, यदि आप चाहते हैं कि आपका कुछ टेक्स्ट हो बोल्ड, आप टैग के साथ तत्व को घेर लेंगे, जैसे: यह पाठ बोल्ड है।
- कुछ सामान्य टैग्स में शामिल हैं (पैराग्राफ), (एंकर, जो लिंक किए गए टेक्स्ट को परिभाषित करता है), और (फ़ॉन्ट, जो टेक्स्ट की विभिन्न विशेषताओं को परिभाषित करने में मदद कर सकता है, जैसे आकार और रंग)।
- अन्य टैग HTML दस्तावेज़ के विभिन्न भागों को ही परिभाषित करते हैं। उदाहरण के लिए, उस पृष्ठ के बारे में जानकारी शामिल करने के लिए उपयोग किया जाता है जो दर्शक को दिखाई नहीं देगा, जैसे कीवर्ड या पृष्ठ विवरण जो खोज इंजन परिणामों में दिखाई देगा।
चरण 2. टैग विशेषताओं का उपयोग करना सीखें।
कुछ टैग को यह निर्दिष्ट करने के लिए अतिरिक्त जानकारी की आवश्यकता होती है कि उन्हें कैसे कार्य करना चाहिए। यह अतिरिक्त जानकारी शुरुआती टैग में दिखाई देती है, और इसे "विशेषता" कहा जाता है। विशेषता नाम टैग नाम के तुरंत बाद दिखाई देता है, जिसे एक स्थान से अलग किया जाता है। विशेषता मान विशेषता नाम से एक = चिह्न द्वारा संलग्न होता है और उद्धरण चिह्नों से घिरा होता है।
- उदाहरण के लिए, यदि आप अपने कुछ टेक्स्ट को लाल बनाना चाहते हैं, तो आप टैग और उपयुक्त फ़ॉन्ट रंग विशेषता का उपयोग करके ऐसा कर सकते हैं, जैसे: यह टेक्स्ट लाल है।
- कई प्रभाव जो कभी नियमित रूप से HTML टैग विशेषताओं के साथ प्राप्त किए गए थे, जैसे कि विभिन्न फ़ॉन्ट रंग सेट करना, अब आमतौर पर इसके बजाय CSS कोडिंग के साथ किया जाता है।
चरण 3. नेस्टेड तत्वों के साथ प्रयोग।
HTML आपको अधिक जटिल स्वरूपण बनाने के लिए तत्वों को अन्य तत्वों के भीतर रखने की भी अनुमति देता है। उदाहरण के लिए, यदि आप एक पैराग्राफ को परिभाषित करना चाहते हैं और फिर पैराग्राफ के कुछ टेक्स्ट को इटैलिक करना चाहते हैं, तो आप इसे इस तरह कर सकते हैं:
मुझे कोडिंग पसंद है!
चरण 4. खाली तत्वों से परिचित हों।
HTML में कुछ तत्वों को ओपनिंग और क्लोजिंग टैग दोनों की आवश्यकता नहीं होती है। उदाहरण के लिए, यदि आप एक छवि सम्मिलित कर रहे हैं, तो आपको केवल एक "img" टैग की आवश्यकता होगी जिसमें टैग नाम और कोई अन्य आवश्यक विशेषताएँ हों (जैसे कि छवि फ़ाइल नाम और कोई वैकल्पिक पाठ जिसे आप एक्सेसिबिलिटी उद्देश्यों के लिए जोड़ना चाहते हैं)। उदाहरण के लिए:
चरण 5. एक HTML दस्तावेज़ के मूल लेआउट का अन्वेषण करें।
आपकी HTML-आधारित वेबसाइट के ठीक से काम करने के लिए, आपको यह जानना होगा कि पूरे पृष्ठ को कैसे प्रारूपित किया जाए। इसमें यह परिभाषित करना शामिल है कि आपका html कोड कहां से शुरू और समाप्त होता है, साथ ही यह निर्धारित करने के लिए टैग का उपयोग करना कि कोड के कौन से हिस्से प्रदर्शित किए जाएंगे बनाम कौन से छिपे हुए पृष्ठभूमि जानकारी प्रदान करने के लिए हैं। उदाहरण के लिए:
- अपने पृष्ठ को HTML दस्तावेज़ के रूप में परिभाषित करने के लिए टैग का उपयोग करें।
- इसके बाद, यह निर्धारित करने के लिए कि आपका कोड कहां से शुरू और समाप्त होता है, अपने पूरे पृष्ठ को टैग के भीतर समाहित करें।
- टैग के भीतर ऐसी कोई भी जानकारी रखें जो दर्शकों को प्रदर्शित नहीं होगी, जैसे पृष्ठ शीर्षक, कीवर्ड और आपके पृष्ठ का विवरण।
- टैग के साथ अपने पृष्ठ के मुख्य भाग (अर्थात, कोई भी पाठ और चित्र जिसे आप दर्शक देखना चाहते हैं) को परिभाषित करें।
विधि 3 का 4: CSS से परिचित होना
चरण 1. अपने HTML दस्तावेज़ों में शैलियाँ लागू करने के लिए CSS का उपयोग करें।
CSS एक स्टाइलशीट भाषा है जो आपको अपने वेबपेज पर विभिन्न शैली और डिज़ाइन तत्वों को लागू करने की अनुमति देती है। उदाहरण के लिए, यदि आप अपने पृष्ठ पर कुछ टेक्स्ट तत्वों के लिए एक विशिष्ट फ़ॉन्ट या टेक्स्ट रंग को चुनिंदा रूप से लागू करना चाहते हैं, तो आप ऐसा करने के लिए एक सीएसएस फ़ाइल बना सकते हैं। फिर, आप जहाँ चाहें अपने HTML दस्तावेज़ में CSS फ़ाइल सम्मिलित कर सकते हैं।
-
उदाहरण के लिए, यदि आप चाहते हैं कि एक CSS फ़ाइल आपके HTML दस्तावेज़ के सभी अनुच्छेद तत्वों को हरा कर दे, तो आप पंक्तियों वाली एक.css फ़ाइल बना सकते हैं:
- पी {
- हरा रंग करें;
- }
- फिर आप फ़ाइल को style.css जैसे नाम से सहेजेंगे।
- अपने HTML दस्तावेज़ में स्टाइलशीट लागू करने के लिए, आप इसे टैग के भीतर एक खाली लिंक तत्व के रूप में सम्मिलित करेंगे। उदाहरण के लिए:
चरण 2. CSS नियम सेट के तत्वों से परिचित हों।
CSS कोड के एक व्यक्तिगत भाग को "नियम सेट" कहा जाता है। नियम सेट में विभिन्न तत्व होते हैं जो परिभाषित करते हैं कि आप अपना कोड क्या करना चाहते हैं। इसमे शामिल है:
- चयनकर्ता, जो उस HTML तत्व को परिभाषित करता है जिसे आप स्टाइल करना चाहते हैं। उदाहरण के लिए, यदि आप चाहते हैं कि आपका नियम पैराग्राफ तत्वों को प्रभावित करे, तो आप अपने नियम को "p" अक्षर से शुरू करेंगे।
- घोषणा, जो उन गुणों को परिभाषित करती है जिन्हें आप स्टाइल करना चाहते हैं (जैसे फ़ॉन्ट रंग)। घोषणा घुंघराले कोष्ठक {} के भीतर समाहित है।
- संपत्ति, जो निर्दिष्ट करती है कि आप HTML तत्व की कौन सी संपत्ति को स्टाइल करना चाहते हैं। उदाहरण के लिए, टैग के भीतर, आप निर्दिष्ट कर सकते हैं कि आप टेक्स्ट के रंग को स्टाइल करना चाहते हैं।
- संपत्ति मूल्य विशेष रूप से परिभाषित करता है कि आप संपत्ति को कैसे बदलना चाहते हैं (उदाहरण के लिए, यदि संपत्ति फ़ॉन्ट रंग है, तो संपत्ति का मूल्य "हरा" होगा)।
- आप एक ही घोषणा के भीतर कई अलग-अलग गुणों को संशोधित कर सकते हैं।
चरण 3. अपनी टाइपसेटिंग को अच्छा दिखाने के लिए अपने टेक्स्ट में CSS लागू करें।
HTML में प्रत्येक प्रॉपर्टी को अलग-अलग कोड किए बिना आपके टेक्स्ट पर कई तरह के प्रभाव लागू करने के लिए CSS उपयोगी है। CSS में विभिन्न टाइपसेटिंग गुणों को बदलने के साथ प्रयोग करें, जिसमें शामिल हैं:
- लिपि का रंग
- फ़ॉन्ट आकार
- फ़ॉन्ट फ़ैमिली (उदाहरण के लिए, आप अपने टेक्स्ट में उपयोग किए जाने वाले फ़ॉन्ट्स की श्रेणी)
- पाठ्य संरेखण
- ऊंची लाईन
- पत्र अंतराल
चरण 4. बक्से और अन्य सीएसएस लेआउट टूल के साथ प्रयोग करें।
CSS आपके पेज पर आकर्षक विज़ुअल एलिमेंट जोड़ने के लिए भी उपयोगी है, जैसे टेक्स्ट बॉक्स और टेबल। इसके अतिरिक्त, आप इसका उपयोग अपने पृष्ठ के समग्र लेआउट को बदलने और परिभाषित करने के लिए कर सकते हैं कि विभिन्न तत्व एक दूसरे के सापेक्ष कहाँ स्थित हैं।
उदाहरण के लिए, आप किसी तत्व की चौड़ाई और पृष्ठभूमि रंग जैसी विशेषताओं को परिभाषित कर सकते हैं, एक सीमा जोड़ सकते हैं, या मार्जिन सेट कर सकते हैं जो आपके पृष्ठ पर विभिन्न तत्वों के बीच स्थान बनाएगा।
विधि 4 का 4: अन्य डिज़ाइन भाषाओं के साथ कार्य करना
चरण 1. यदि आप अपने पृष्ठों में सहभागी तत्व जोड़ना चाहते हैं तो जावास्क्रिप्ट सीखें।
यदि आप अपनी वेबसाइटों में एनिमेशन और पॉपअप जैसी अधिक उन्नत सुविधाओं को जोड़ने में रुचि रखते हैं, तो सीखने के लिए जावास्क्रिप्ट एक बेहतरीन भाषा है। जावास्क्रिप्ट में कोड कैसे करें और उन कोड किए गए तत्वों को अपने वेब पेजों में शामिल करने के बारे में एक कोर्स करें या ऑनलाइन ट्यूटोरियल देखें।एचटीएमएल का उपयोग करना।
इससे पहले कि आप जावास्क्रिप्ट के साथ सहज हो सकें, आपको HTML और CSS में पेज बनाने की मूल बातों से परिचित होना होगा।
चरण 2. जावास्क्रिप्ट कोडिंग को आसान बनाने के लिए स्वयं को jQuery से परिचित कराएं।
jQuery एक जावास्क्रिप्ट लाइब्रेरी है जो आपको विभिन्न प्रकार के पूर्व-कोडित जावास्क्रिप्ट तत्वों तक पहुँचने की अनुमति देकर जावा प्रोग्रामिंग को सरल बना सकती है। यदि आप पहले से ही जावास्क्रिप्ट कोडिंग की मूल बातों से परिचित हैं तो jQuery एक बेहतरीन टूल है।
आप jQuery फाउंडेशन की वेबसाइट, jQuery.org के माध्यम से jQuery लाइब्रेरी और कई अन्य मूल्यवान संसाधनों तक पहुंच सकते हैं।
चरण 3. यदि आप बैक-एंड डेवलपमेंट में रुचि रखते हैं तो सर्वर-साइड भाषाओं का अध्ययन करें।
जबकि HTML, CSS और JavaScript वेब डिज़ाइनरों के लिए आदर्श हैं, जो इस बात पर ध्यान केंद्रित करते हैं कि उपयोगकर्ता वेबसाइट पर क्या देखता है और क्या करता है, सर्वर-साइड भाषाएँ उपयोगी होती हैं यदि आप पर्दे के पीछे के काम में अधिक रुचि रखते हैं। यदि आप बैक-एंड डेवलपमेंट के बारे में सीखना चाहते हैं, तो पाइथन, पीएचपी और रूबी ऑन रेल्स जैसी भाषाओं को सीखने पर ध्यान दें।
ये भाषाएं डेटा को प्रबंधित करने और संसाधित करने के लिए उपयोगी हैं जो उपयोगकर्ता नहीं देखता है। उदाहरण के लिए, PHP का उपयोग उन वेबसाइटों पर सुरक्षित पासवर्ड निर्माण उपकरण बनाने के लिए किया जा सकता है जिनके लिए लॉगिन की आवश्यकता होती है।
मदद फ़ाइलें
एचटीएमएल धोखा पत्र
सीएसएस धोखा पत्रक
