शुरुआती के लिए अपनी खुद की वेबसाइट बनाना: 5 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:20

चाहे आपने कभी कंप्यूटर प्रोग्रामर बनने का सपना देखा हो या कभी ऐसी वेबसाइट का उपयोग किया हो, जिसका सामना हम सभी करते हैं, सूचना प्रौद्योगिकी व्यवसाय की रीढ़ बन गई है। हालाँकि प्रोग्रामिंग पहली बार में थोड़ी डरावनी लग सकती है, मेरा लक्ष्य आपको वेब डिज़ाइन की मूलभूत मूल बातें सिखाना है ताकि इस ट्यूटोरियल के बाद, आप अपना स्वयं का वेबपेज बना सकें। उस रास्ते से हटकर, आइए इसे प्राप्त करें!

आपूर्ति

• एक मैकिंटोश या विंडोज पीसी (हालांकि लिनक्स डिस्ट्रोस का भी उपयोग किया जा सकता है, मैं उन्हें अभी के लिए छोड़ रहा हूं क्योंकि यह एक शुरुआती परिचय है)।
• टेक्स्ट एडिटर की आपकी पसंद (विंडोज़ पर नोटपैड, मैक पर टेक्स्टएडिट) या आईडीई की आपकी पसंद। अपने अनुभव में, मैंने अपने लिए सबसे अच्छा काम करने के लिए विजुअल स्टूडियो कोड पाया है, इसलिए मैं इसे यहां जांचने की भी सिफारिश करता हूं: https://code.visualstudio.com/ यह उल्लेख नहीं है कि यह सभी ओएस प्लेटफॉर्म पर काम करता है।

चरण 1: टैग और इतिहास का एक सा

एक बार जब आप टेक्स्ट एडिटर या आईडीई की अपनी पसंद पर फैसला कर लेते हैं, तो मूल बातें शुरू करते हैं।

मानो या न मानो, HTML या हाइपरटेक्स्ट मार्कअप लैंग्वेज को लगभग 30 साल हो गए हैं और हर साल भाषा में अधिक से अधिक सुधार हुए हैं। अब, आप पूछ रहे होंगे कि ब्राउज़र स्क्रीन पर क्या रखा जाए, इसकी व्याख्या कैसे करता है? यह कुछ भागों में किया जाता है:

HTML दस्तावेज़ स्वरूपण आसान है। आपके पास दो खंड हैं जिन्हें सिर और शरीर के रूप में जाना जाता है। वेबसाइट के प्रमुख में कोड होता है जो उपयोगकर्ता को दिखाई नहीं देता है। इसका उपयोग स्टाइलशीट को जोड़ने और साइट को ठीक से प्रदर्शित करने के लिए आवश्यक अन्य आवश्यक बिट्स घोषित करने के लिए किया जाता है। सिर के बाद, शरीर जैसा लगता है, वेबसाइट का शरीर है। यह वह जगह है जहां आप अपनी आवाज बोल सकते हैं और दर्शकों को अपने शानदार HTML कौशल दिखा सकते हैं! अब यह उतना आसान नहीं है जितना कि शरीर में सिर्फ टेक्स्ट टाइप करना और इसे ठीक वैसे ही प्रदर्शित करना जैसा आप चाहते हैं, लेकिन यह लगभग इतना आसान है कि हम जिन चीजों को टैग कहते हैं, उनके उपयोग के साथ।

यहां कुछ बुनियादी HTML टैग दिए गए हैं:

• शीर्षक - जिसका उपयोग ब्राउज़र को यह बताने के लिए किया जाता है कि पृष्ठ का शीर्षक क्या है। जब आप किसी वेबपेज के टैब को देखते हैं तो आपको भी यही दिखाई देता है।
• h1, h2, h3, h4 - जो विभिन्न हेडर आकारों के लिए उपयोग किए जाते हैं जिनमें h1 सबसे बड़ा और h4 सबसे छोटा होता है। मैं अगले भाग में इस पर और अधिक जानकारी दूंगा।
• पी - पैराग्राफ, पाठ के पैराग्राफ लिखने के लिए उपयोग किया जाता है। एक कागज पर पैराग्राफ की तरह।
• br - ब्रेक, जो पाठ के अनुरूप एक विराम सम्मिलित करता है।
• a - अन्य पृष्ठों के लिंक बनाने के लिए उपयोग किया जाता है, जैसे क्लिक करने योग्य लिंक।
• img - किसी छवि को वेबपेज से जोड़ने के लिए उपयोग किया जाता है।
• उल, ओएल, ली - अनियंत्रित सूचियां, आदेशित सूचियां, और सूची आइटम।
• - कोड में इनलाइन टिप्पणियां करने के लिए उपयोग किया जाता है जो अंतिम उपयोगकर्ता द्वारा नहीं देखा जाएगा।

और यहाँ कुछ CSS टैग (दृश्य) हैं:

• रंग - किसी विशिष्ट तत्व को एक विशिष्ट रंग निर्दिष्ट करने या वेबपेज पर सेट करने के लिए उपयोग किया जाता है।
• फ़ॉन्ट-आकार - पृष्ठ पर फ़ॉन्ट आकार बदलने के लिए उपयोग किया जाता है।
• बैकग्राउंड-कलर - किसी विशेष तत्व या पूरे पृष्ठ की पृष्ठभूमि का रंग बदलने के लिए उपयोग किया जाता है।

यदि आप थोड़ा खोया हुआ महसूस करते हैं, तो आपकी मदद करने के लिए मैंने एक छोटी सी चीट-शीट भी संलग्न की है, लेकिन चिंता न करें, आप इसे कुछ ही समय में समझ जाएंगे! इसके अलावा, आपके किसी भी प्रोग्रामिंग प्रश्न के लिए www.w3schools.com भी एक शानदार संसाधन है। उन्होंने निश्चित रूप से मुझे एक या एक समय भी बचाया है।

अनिवार्य रूप से ब्राउज़र फ़ाइल को कैसे पढ़ता है यह आसान है। यह लाइन से लाइन तक जाता है और फंक्शन द्वारा प्रोसेस फंक्शन करता है। एक टैग घोषित करने के लिए वर्णों का उपयोग किया जाता है जैसे

और टैग को बंद करने के लिए उपयोग किया जाता है जैसे कि

. यह महत्वपूर्ण है अन्यथा ब्राउजर यह नहीं जानता कि कहां रुकना है। के बीच में

तथा

टैग, वह जगह है जहाँ आप जो चाहें दर्ज करते हैं!

चरण 2: संपादक सेटअप

अब जबकि हमने एक HTML वेबसाइट के मूल तत्वों के बारे में थोड़ा सा कवर कर लिया है, तो आइए इसमें गोता लगाएँ और इसे अपने लिए आज़माएँ। इस अगले चरण के लिए मैं वेबसाइट को प्रोग्राम करने के लिए विजुअल स्टूडियो कोड का उपयोग करूंगा, लेकिन कोड का लेआउट वही होगा यदि आप नोटपैड या टेक्स्टएडिट का उपयोग करने में अधिक सहज हैं।

नोटपैड के भीतर:

• नोटपैड के साथ, प्रोग्राम एक रिक्त फ़ाइल के साथ लॉन्च होता है जो इसे आरंभ करना बहुत आसान बनाता है। यह हमें वीएस कोड का उपयोग करने की तुलना में कुछ कदम आगे बढ़ने की अनुमति भी देगा। आइए फाइल को सही फॉर्मेट में सेव करके शुरू करें।
• फ़ाइल> सहेजें पर क्लिक करें
• अपनी फ़ाइल के लिए एक नाम दर्ज करें जिसके बाद.html और इस प्रकार सहेजें के अंतर्गत, सभी फ़ाइलों का चयन करें। सेव पर क्लिक करें।

वीएस कोड के भीतर:

• आपके लिए IDE की सभी सुविधाओं का लाभ उठाने का सबसे अच्छा तरीका है कि आप फ़ाइल बनाकर और IDE को बताएं कि यह किस प्रकार की फ़ाइल है। इसे इस प्रकार किया जा सकता है:
• फ़ाइल > नई फ़ाइल पर क्लिक करें
• एक खाली फाइल खुलती है
• इसके बाद, आप फ़ाइल को सहेज कर शुरू करना चाहेंगे, हालांकि यह खाली है, क्योंकि इससे आईडीई यह समझने में सक्षम होगा कि अंतिम उत्पाद किस प्रकार की फ़ाइल होगी। सहेजते समय फ़ाइल नाम के अंत में.html एक्सटेंशन शामिल करना सुनिश्चित करें। सेव पर क्लिक करें।

चरण 3: ब्लूप्रिंट

आपके द्वारा अपनी filename.html फ़ाइल को सफलतापूर्वक सहेज लेने के बाद, आइए हमारे वेबपेज के लिए रूपरेखा बनाकर शुरू करें। ऊपर से याद रखें कि बाकी HTML पेज बनाने के साथ शुरू करने से पहले हमें फाइल के किन प्रमुख हिस्सों को घोषित करने की आवश्यकता है। प्रो-टिप: साइट के लिए फ्रेमवर्क शुरू करते समय, !DOCTYPE HTML टैग ब्राउज़र को बताता है कि वह जिस फाइल को पढ़ रहा है वह एक html फाइल है। यह तब काम आ सकता है जब आपके पास एक ही फाइल में विभिन्न प्रकार के कोड हों और आप दुभाषियों के बीच स्विच करना चाहते हों। इस निर्देश के दायरे के लिए, हम इस पर बहुत अधिक ध्यान नहीं देंगे, लेकिन यदि इस निर्देश के बाद आप HTML विकास के बारे में अधिक जानने के लिए उत्सुक हैं, तो बेझिझक इसे एक शॉट दें। मैं सर्वोत्तम अभ्यास के लिए फ़ाइल के शीर्ष पर !DOCTYPE HTML टैग डालूँगा। के साथ खोलना और बंद करना याद रखें।

यहां प्रोग्रामिंग शुरू करने से पहले फ़ाइल को सहेजना काम आता है, अब जब आईडीई जानता है कि यह एक HTML फ़ाइल के साथ काम कर रहा है, तो यह अभिव्यक्ति को समाप्त करने और सुझाव देने के लिए इंटेलिजेंस का उपयोग करेगा ताकि आप गलती से टैग को बंद करना न भूलें. ध्यान दें कि आप में से जो नोटपैड का उपयोग कर रहे हैं, उनके लिए इंटेलिजेंस आईडीई की तरह उपलब्ध नहीं है। हम हेड और बॉडी टैग को निम्नानुसार दर्ज करके शुरू करते हैं: (दूसरी छवि देखें)।

अब जब दस्तावेज़ सेटअप पूरा हो गया है, तो हम दौड़ में शामिल हो सकते हैं और कुछ मज़ा कर सकते हैं!

चरण 4: कोड; कोड; कोड;

हम अपनी नई बनाई गई फ़ाइल के लिए एक शीर्षक डालने से शुरू कर सकते हैं। आप जो चाहें दर्ज करें। याद रखें कि यह वह नाम है जो ब्राउज़र टैब में दिखाई देता है। आइए हमारी साइट के लिए एक शीर्षक दर्ज करके भी शुरुआत करें। पहले से याद कीजिए कि हम यह कैसे करते हैं। क्या मैंने h1/2/3/4 सुना? यह सही है!

जारी रखने से पहले, मुझे ब्राउज़र विंडो में अपनी फ़ाइल खोलने में मदद मिलती है ताकि हम वास्तविक समय में देख सकें कि ब्राउज़र में हमारे परिवर्तन कैसे दिखाई दे रहे हैं। आप फ़ाइल> फ़ाइल को सहेजने के लिए सहेजें पर क्लिक करके, उस फ़ोल्डर में नेविगेट करके ऐसा कर सकते हैं जिसमें HTML फ़ाइल सहेजी गई है, मेरे लिए यह डेस्कटॉप है, और फ़ाइल खोलने के लिए अपनी पसंद के ब्राउज़र का उपयोग करें और क्या आप इसे देखेंगे, आपका वेबपेज है! नोट: मैं व्यक्तिगत रूप से अपने कंप्यूटर पर अपने पसंद के ब्राउज़र के रूप में सफारी का उपयोग करता हूं, हालांकि, वेब विकास में, फ़ायरफ़ॉक्स परीक्षण के लिए स्वर्ण मानक ब्राउज़र है क्योंकि यह लगभग हर वेब स्क्रिप्टिंग भाषा के साथ काम करता है।

जैसा कि आप देख सकते हैं, शीर्षक टैब पर दिखाई दे रहा है, साथ ही हमारे h1 शीर्षक को भी देख रहा है। मैं IDE के साथ फ़ाइल की दोनों ब्राउज़र विंडो को खोलना पसंद करता हूँ क्योंकि जब आप IDE में परिवर्तन करते हैं और सहेजते हैं, तो ब्राउज़र में परिवर्तन तुरंत होते हैं।

बेझिझक टैग जोड़ने का प्रयास करें और उन विभिन्न चीजों के साथ खेलें जो आप HTML के साथ कर सकते हैं। जैसा कि आप नीचे देख सकते हैं, मैंने Instructables.com पर कुछ पैराग्राफ, ब्रेक, बाहरी हाइपरलिंक जोड़ा है, एक छवि, (जिसे या तो बाहरी स्रोत से या उसी निर्देशिका में जोड़ा जा सकता है जहां. HTML फ़ाइल संग्रहीत है), एक अनियंत्रित सूची का एक उदाहरण, एक आदेशित सूची, और अंत में एक टिप्पणी।

यदि आप कुछ रंग, और व्यवस्था विकल्प जोड़ने का प्रयास करना चाहते हैं, तो आप फ़ाइल के शीर्ष में एक शैली टैग दर्ज कर सकते हैं। यह वह बिंदु है जिस पर यह HTML से CSS में बदल जाता है, लेकिन दृश्य के लिए, मैं कुछ पंक्तियाँ दर्ज करूँगा ताकि आप देख सकें कि यह कैसे काम करता है। अनिवार्य रूप से CSS कैसे काम करता है, यह आपको एक विशिष्ट HTML तत्व के लिए अपना कोड दर्ज करने के लिए कोष्ठक {} का उपयोग करके HTML तत्वों को फ़ंक्शन के भीतर नियंत्रित करने की अनुमति देता है।

चरण 5: अंतिम विचार

आखिर तुमने इसे हासिल कर ही लिया है; आपने अपना पहला वेबपेज सफलतापूर्वक बना लिया है! चूंकि यह एक शुरुआती मार्गदर्शिका है, इसलिए मैं HTML के साथ आपके पहले अनुभव को सुखद बनाना चाहता हूं। मेरे अनुभव में सीखने का सबसे अच्छा तरीका है कि आप इसमें गोता लगाएँ और चीजों को आजमाएँ, देखें कि आप अपने कोड के साथ क्या कर सकते हैं और यह भी देखें कि आप अपने कोड को कैसे तोड़ सकते हैं। यह अखंडता बनाता है और आपको यह समझने में मदद करता है कि कोड कैसे और क्यों काम करता है। याद रखें कि www. W3Schools.com प्रश्नों के लिए एक बेहतरीन संसाधन है और वे आपके कोड को आज़माने के लिए ब्राउज़र के भीतर एक वर्चुअल सैंडबॉक्स भी प्रदान करते हैं। उम्मीद है कि आपने कुछ सीखा है और कोडिंग को खुश किया है!