स्क्रैच से वेबसाइट को कोड कैसे करें! 5 सरल चरण

प्रोग्रामिंग भाषाओं के विभिन्न प्रकार क्या हैं?

वेबसाइटों के लिए प्रोग्रामिंग भाषाएँ दो प्रमुख श्रेणियों में आती हैं, अर्थात् फ्रंटएंड और बैकएंड। फ्रंटएंड के लिए वेबपेज को प्रोग्राम करने के लिए इस्तेमाल की जाने वाली भाषाएँ HTML, CSS और हैं Javaस्क्रिप्ट।

फ्रंटएंड भाषाओं में शामिल हैं

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

बैकएंड भाषाएं

बैकएंड को किसी भी ऐसी भाषा में कोड किया जा सकता है जो वेब डेवलपमेंट को सपोर्ट करती हो। JavaNodeJS का उपयोग करके सर्वर-साइड पर स्क्रिप्ट, Python, रूबी, या PHP। वेब साइट विकास के लिए सबसे अधिक इस्तेमाल किया जाने वाला प्रोग्राम PHP है। इस गाइड में, हम स्क्रिप्टिंग भाषा के रूप में PHP पर ध्यान केंद्रित करेंगे।

PHP:

PHP का मतलब हाइपरटेक्स्ट प्रीप्रोसेसर है। वेब ब्राउज़र में निष्पादित होने वाली फ्रंटएंड तकनीकों के विपरीत, PHP को वेबसर्वर पर निष्पादित किया जाता है। इसका उपयोग आम तौर पर उपयोगकर्ताओं को पंजीकृत करने, उपयोगकर्ताओं को प्रमाणित करने, ईमेल भेजने आदि जैसी गतिविधियों को करने के लिए किया जाता है।

वेबसाइट को कोड कैसे करें – शुरुआती लोगों के लिए सम्पूर्ण मार्गदर्शिका

इस व्यापक गाइड में, हम आपको सिखाएंगे कि कैसे स्क्रैच से एक वेबसाइट बनाएं और सभी कोड स्वयं लिखें, या आप वर्डप्रेस या जूमला आदि जैसे किसी मौजूदा प्लेटफॉर्म का उपयोग कर सकते हैं।

इस सम्पूर्ण गाइड में हम निम्नलिखित विषयों को कवर करेंगे।

  • स्क्रैच से निर्माण करना बनाम कंटेंट मैनेजमेंट सिस्टम का उपयोग करना
  • एक फ्रेमवर्क (PHP MVC फ्रेमवर्क) का उपयोग करके स्क्रैच से एक वेबसाइट बनाना
  • कंटेंट मैनेजमेंट सिस्टम (वर्डप्रेस) का उपयोग करके वेबसाइट बनाना

HTML की मूल अवधारणा

HTML दस्तावेज़ एक टेक्स्ट फ़ाइल है जिसमें HTML टैग और तत्व होते हैं और आमतौर पर .html फ़ाइल एक्सटेंशन के साथ समाप्त होता है।

HTML को अन्य स्क्रिप्टिंग भाषा फ़ाइल एक्सटेंशन जैसे *.php, *.jsp या *.asp में भी एम्बेड किया जा सकता है।

वेब ब्राउज़र वेब पेज दिखाने के लिए HTML दस्तावेज़ों को पार्स करते हैं। आप वेब ब्राउज़र में वेबपेज बनाने वाले HTML को देख सकते हैं।

वेबसाइट बनाने में आपकी मदद करने वाले चरण यहां दिए गए हैं:

चरण 1) पॉप-अप मेनू प्रदर्शित करने के लिए वेब पेज पर राइट-क्लिक करें।

HTML की मूल अवधारणा

चरण 2) पृष्ठ स्रोत देखें का चयन करें.

HTML की मूल अवधारणा

चरण 3) HTML कोड सादे पाठ में प्रदर्शित किया जाएगा, और आप पृष्ठ को बनाने वाले HTML टैग और तत्व देख सकते हैं।

आप कुछ CSS और भी देख सकते हैं Javaस्क्रिप्ट या तो एम्बेडेड है या अलग बाहरी फ़ाइलों के रूप में शामिल है।

HTML की मूल अवधारणा

वेब ब्राउज़र का कार्य HTML दस्तावेज़ को मानव-पठनीय प्रारूप में अनुवाद करना है। ब्राउज़र HTML दस्तावेज़ को मानव-पठनीय प्रारूप में भी संसाधित करता है। Javaस्क्रिप्ट जो वेब पेज में शामिल है.

HTML दस्तावेज़ संरचना को समझें

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

सभी HTML दस्तावेज़ HTML टैग में संलग्न हैं। HTML टैग के भीतर, आपके पास अन्य टैग होंगे जैसे कि हेड और बॉडी। हेडर टैग में अन्य टैग होते हैं, जैसे कि पेज का शीर्षक प्रदर्शित करने के लिए शीर्षक। इसमें CSS शैलियों के लिए बाहरी फ़ाइलों के लिंक भी शामिल हैं, Javaस्क्रिप्ट, और मेटाडेटा। बॉडी टैग में वे तत्व होते हैं जो वेबपेज बनाते हैं। बॉडी टैग के भीतर तत्व div, टेबल, सूचियाँ आदि हो सकते हैं।

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>How to create a website for beginners</title>
    <meta name="description" content="My First Webpage created using HTML, CSS, JavaScript, and PHP">
    <meta name="author" content="Guru99">
    <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
    <h3>Welcome to my first webpage</h3>
</body>
</html>

स्पष्टीकरण:

  • दस्तावेज़ प्रकार को परिभाषित करता है जो HTML है
  • … भाषा विशेषता के साथ HTML टैग को परिभाषित करता है जो वेबसाइट की भाषा निर्दिष्ट करता है।
  • इस सरल उदाहरण में, वेबसाइट की भाषा अंग्रेजी है। ओपन और क्लोजिंग HTML टैग के भीतर, हमारे पास हेड और बॉडी जैसे टैग होंगे, जो बदले में अन्य टैग और तत्वों को संलग्न करते हैं।
  • … हेड टैग को परिभाषित करता है जिसमें मेटाडेटा शामिल होता है.
  • … वेबसाइट की सामग्री को शामिल करने वाले मुख्य भाग को परिभाषित करता है।

CSS चयनकर्ताओं को जानें

CSS चयनकर्ता वेबपेज पर उन तत्वों का चयन करते हैं जिन्हें आप परिभाषित CSS नियमों के आधार पर प्रारूपित करना चाहते हैं।

CSS चयनकर्ताओं को पांच प्रमुख श्रेणियों में वर्गीकृत किया गया है:

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

CSS स्टाइलशीट तैयार करें

यह अनुभाग एक सरल CSS स्टाइल दस्तावेज़ बनाएगा जो निम्नलिखित स्टाइलिंग नियमों को परिभाषित करके सरल स्टाइलिंग करता है।

  • कक्षा केन्द्र के आधार पर केन्द्रित पाठ: यह नियम पाठ को केन्द्रित कर देगा तथा पाठ का रंग बदलकर लाल कर देगा।
  • तत्व आईडी के आधार पर पाठ प्रारूपित करें: हम आईडी शीर्षक के लिए एक स्टाइलिंग नियम बनाएंगे जो रंग को नारंगी में बदल देगा, फ़ॉन्ट-वेट को बोल्ड कर देगा और टेक्स्ट केस को अपरकेस में बदल देगा।
  • शीर्षक तत्व संख्या 2 के आधार पर पाठ को प्रारूपित करें: यह नियम शीर्षक के पाठ का रंग नीला तथा फ़ॉन्ट का आकार 60 पिक्सेल निर्धारित करेगा।

निम्नलिखित कोड उपरोक्त नियमों के साथ एक CSS दस्तावेज़ को परिभाषित करता है।

.center {
    text-align: center;
    color: red;
}
#title {
    color: orange;
    text-transform: uppercase;
    font-weight: bold;
}
h2 {
    font-size: 60px;
    color: blue;
}

समझाता है:

  • .center {…} – एक क्लास नियम केंद्र को परिभाषित करता है जो पाठ को केंद्र पर संरेखित करता है और फ़ॉन्ट का रंग बदलता है।
  • #title {…} – एक शीर्षक नियम को परिभाषित करता है जो फ़ॉन्ट का रंग बदलता है, सभी अक्षरों को बड़े अक्षरों में बदलता है, और फ़ॉन्ट-वेट को बोल्ड में बदलता है।
  • h2 {…} – सभी h3 तत्वों पर लागू होने वाले नियमों को परिभाषित करता है। फ़ॉन्ट का आकार 60 पिक्सेल पर सेट किया जाएगा, और फ़ॉन्ट का रंग नीले रंग में अपडेट किया जाएगा।

डाउनलोड/इंस्टॉल करें Bootstrap

Bootstrap यह एक CSS फ्रेमवर्क है जो कई स्टाइल के साथ आता है जिसका आप तुरंत उपयोग करना शुरू कर सकते हैं। इसमें लेआउट और फ़ॉर्मेटिंग तत्वों के लिए स्टाइल शामिल हैं।

आप अपनी CSS शैलियाँ लिख सकते हैं जो बूटस्ट्रैप CSS फ्रेमवर्क की डिफ़ॉल्ट सेटिंग्स को अनुकूलित करती हैं। इसके लिए, आप या तो डाउनलोड कर सकते हैं Bootstrap आप इसे आधिकारिक वेबसाइट से सीधे प्राप्त कर सकते हैं, या आप इसे कंटेंट डिलीवरी नेटवर्क (CDN) से अपने HTML दस्तावेज़ में शामिल कर सकते हैं।

वैकल्पिक रूप से, आप नोड पैकेज मैनेजर (एनपीएम) जैसे पैकेज प्रबंधन उपकरण का उपयोग स्थापित करने के लिए कर सकते हैं Bootstrap, लेकिन यह उन्नत वेब डेवलपर्स के लिए है। डाउनलोड करने के लिए Bootstrap, आप इस पर क्लिक कर सकते हैं यहाँ लिंक और इसे किसी भी अन्य सीएसएस की तरह अपने प्रोजेक्ट में उपयोग करें और Javaस्क्रिप्ट फाइल।

जब हम आपका पहला वेब पेज बनाएंगे तो हम नीचे दिए गए अनुभाग में इसका उपयोग करना सीखेंगे।

HTML और CSS की भूमिका

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

सीएसएस की भूमिका सामग्री को स्टाइल प्रदान करना है ताकि यह उपयोगकर्ताओं के लिए दृश्य रूप से आकर्षक हो।

सामान्य HTML शब्दों को समझना

आइए अब कुछ सामान्य HTML शब्दों पर नजर डालें जिनसे एक वेब डेवलपर के रूप में आपको परिचित होना चाहिए।

एस / एन अवधि विवरण
1 तत्व तत्व ऐसे कीवर्ड होते हैं जिनका उपयोग वेब पेज की विशिष्ट संरचनाओं और सामग्री को परिभाषित करने के लिए किया जाता है। उदाहरण के लिए, तत्व H3 का उपयोग शीर्षक संरचना को परिभाषित करने के लिए किया जाता है। तत्वों के अन्य उदाहरणों में पैराग्राफ (p), एंकर (a), और कंटेनर (div), आदि शामिल हैं।
2 टैग टैग ऐसे लेबल होते हैं जो किसी तत्व की शुरुआत और अंत को चिह्नित करते हैं। टैग में कोण कोष्ठक में तत्व कीवर्ड शामिल होते हैं। उदाहरण के लिए, अनुच्छेद एक पैराग्राफ टैग है जहाँ प्रारंभिक टैग है और समापन टैग है.
3 विशेषता विशेषताएँ तत्वों के गुण हैं जो पूरक जानकारी प्रदान करते हैं। उदाहरण के लिए, हम किसी तत्व को एक अनूठा नाम देने के लिए id विशेषता का उपयोग कर सकते हैं। id का उपयोग CSS या में किया जा सकता है Javaस्क्रिप्ट।
4 हाइपरलिंक हाइपरलिंक एक क्लिक करने योग्य लिंक है जो एक नया वेबपेज खोलता है। आप इसे एंकर एलिमेंट का उपयोग करके बना सकते हैं।
5 प्रमुख हेड टैग में वह जानकारी होती है जो उपयोगकर्ता से छिपी होती है लेकिन वेब ब्राउज़र और खोज इंजन के लिए उपयोगी होती है।
6 तन बॉडी टैग में वह जानकारी होती है जो वेब ब्राउज़र में उपयोगकर्ता को दिखाई देती है।
7 पाद फ़ुटर टैग में वह जानकारी होती है जो वेबपेज के फ़ुटर अनुभाग में प्रदर्शित होती है।
8 टिप्पणी टिप्पणियों का उपयोग HTML कोड को दस्तावेजित करने और समझाने के लिए किया जाता है, और HTML दस्तावेज़ को पार्स करते समय ब्राउज़र द्वारा उन्हें अनदेखा कर दिया जाता है।
9 Div Div एक कंटेनर तत्व है जिसका उपयोग लेआउट बनाने के लिए किया जाता है।
10 शीर्षक हेडिंग टैग का उपयोग HTML हेडिंग बनाने के लिए किया जाता है।
11 पंक्ति तोड़ना इस तत्व का उपयोग नई लाइन ब्रेक बनाने के लिए किया जाता है।
12 लिंक लिंक का उपयोग HTML दस्तावेज़ों में अन्य फ़ाइलों, जैसे बाह्य CSS फ़ाइलों को शामिल करने के लिए किया जाता है।
13 मेटाडाटा मेटाडेटा टैग वेब पेज के बारे में अनुपूरक जानकारी प्रदान करता है जो खोज इंजन बॉट्स के लिए सबसे उपयोगी है।
14 सूची सूची टैग का उपयोग सूची बनाने के लिए किया जाता है। सूची या तो क्रमबद्ध या अव्यवस्थित हो सकती है।
15 पैरा पैराग्राफ़ तत्व का उपयोग टेक्स्ट डेटा को पैराग्राफ़ प्रारूप में प्रदर्शित करने के लिए किया जाता है
16 तालिका इस तत्व का उपयोग तालिका बनाने के लिए किया जाता है
17 शीर्षक जैसा कि शीर्षक से पता चलता है, इसका उपयोग वेब पेज का शीर्षक निर्धारित करने के लिए किया जाता है।
18 प्रपत्र फॉर्म टैग का उपयोग फॉर्म बनाने के लिए किया जाता है जिसका उपयोग हम उपयोगकर्ताओं से इनपुट प्राप्त करने के लिए कर सकते हैं।
19 लिपि स्क्रिप्ट टैग बाहरी लिंक से लिंक करता है Javaस्क्रिप्ट या इनलाइन JavaHTML दस्तावेज़ के भीतर स्क्रिप्ट कोड.
20 AJAX AJAX का मतलब है एसिंक्रोनस Javaस्क्रिप्ट और XML. यह एक ऐसी तकनीक है जिसका उपयोग पूरे पेज को पुनः लोड किए बिना वेब पेज के कुछ हिस्सों को अपडेट करने के लिए किया जाता है।

सामान्य CSS शब्दों को समझना

निम्नलिखित कुछ सामान्य CSS शब्द हैं जिनसे आपको परिचित होना चाहिए।

एस / एन अवधि विवरण
1 चयनकर्ता यह उस CSS को संदर्भित करता है जो उन HTML दस्तावेज़ तत्वों को चुनने के लिए जिम्मेदार है जिन्हें हम प्रारूपित करना चाहते हैं।
2 गुण गुणधर्म उस तत्व की विशेषता को संदर्भित करते हैं जिसके लिए हम मान सेट करना चाहते हैं।
3 मान जैसा कि नाम से पता चलता है, हम स्टाइलिंग उद्देश्यों के लिए संपत्ति को मूल्य प्रदान करते हैं।
4 टिप्पणी टिप्पणियाँ CSS कोड को दस्तावेजित करने और समझाने के लिए उपयोग की जाती हैं
5 नियम सेट चयनकर्ता, घोषणा ब्रैकेट, गुण और संबंधित मानों से बने CSS कोड के एक पूर्ण अनुभाग को संदर्भित करता है।
6 घोषणा यह CSS दस्तावेज़ के भीतर कोड की एक पंक्ति को संदर्भित करता है
7 घोषणा ब्लॉक यह CSS के उस भाग को संदर्भित करता है जो स्टाइलिंग नियमों को परिभाषित करता है। यह कर्ली ब्रैकेट के बीच संलग्न है।
8 खोजशब्द यह एक आरक्षित शब्द है जिसका CSS में एक विशेष अर्थ है। उदाहरण के लिए, ऑटो शब्द का एक विशेष अर्थ है, इसलिए यह एक कीवर्ड है
9 विशेषता चयनकर्ता चयनकर्ता विशेषता मान के आधार पर एक तत्व का चयन करता है।
10 यूनिवर्सल चयनकर्ता इस चयनकर्ता का उपयोग दिए गए संदर्भ के भीतर किसी भी तत्व से मिलान करने के लिए किया जाता है। संदर्भ आमतौर पर एक पैरेंट तत्व जैसे कि सूची पर लागू किया जाता है ताकि सूची के भीतर सभी आइटम पैरेंट से स्टाइलिंग प्राप्त कर सकें
11 आईडी चयनकर्ता यह चयनकर्ता तत्व की आईडी के आधार पर चयन करता है।
12 वर्ग चयनकर्ता यह चयनकर्ता वर्ग विशेषता मान या मानों के आधार पर चयन करता है।
13 तत्व प्रकार चयनकर्ता यह चयनकर्ता HTML दस्तावेज़ में प्रयुक्त तत्व के प्रकार पर आधारित है।

HTML संपादक

HTML एडिटर एक प्रोग्राम है जिसका उपयोग HTML कोड लिखने और संपादित करने के लिए किया जाता है। आप HTML कोड लिखने के लिए किसी भी टेक्स्ट एडिटर का उपयोग कर सकते हैं, लेकिन HTML एडिटर कई अंतर्निहित सुविधाओं के साथ आते हैं जो कोड लिखना आसान बनाते हैं।

आइये कुछ लोकप्रिय विकल्पों पर नजर डालें:

Visual Studio Code

Visual Studio Code द्वारा विकसित एक क्रॉस-प्लेटफ़ॉर्म कोड संपादक है Microsoft. आप उपयोग कर सकते हैं Visual Studio Code HTML, CSS सहित कई भाषाओं के लिए कोड संपादित करने के लिए, Javaस्क्रिप्ट, और PHP. Visual Studio Code मुफ़्त है और चलता है Windows, मैक, और लिनक्स।

Sublime Text

Sublime Text एक क्रॉस-प्लेटफ़ॉर्म कोड संपादक है जिसका उपयोग HTML, CSS लिखने और संपादित करने के लिए भी किया जा सकता है। Javaस्क्रिप्ट, और PHP कोड। यह एक वाणिज्यिक उत्पाद है, और आपको इसे खरीदने की आवश्यकता है। आप इसे अपंजीकृत मोड में भी मुफ्त में उपयोग कर सकते हैं।

Notepad++

Notepad++ एक हल्का कोड संपादक है जो कई भाषाओं का भी समर्थन करता है। Visual Studio Code और Sublime Text, Notepad++ यह क्रॉस-प्लेटफ़ॉर्म नहीं है। यह केवल पर काम करता है Microsoft Windows प्लेटफार्म पर ट्रेड कैसे करना है|

NetBeans आईडीई

NetBeans एक एकीकृत विकास वातावरण (आईडीई) है जो नियमित कोड संपादक की तुलना में अधिक सुविधाएँ प्रदान करता है। NetBeans निःशुल्क और क्रॉस-प्लेटफॉर्म है।

अपना पहला वेब पेज बनाना

चलिए अब एक सरल वेब पेज बनाते हैं। यहाँ हमने एक सरल HTML दस्तावेज़ बनाया है और कुछ स्टाइलिंग लागू की है Bootstrap सी.एस.एस. हमारे पास एक क्लिक करने योग्य बटन भी होगा जो एक सरल संदेश प्रदर्शित करेगा Javaस्क्रिप्ट।

यहां कुछ चरण दिए गए हैं जो आपको यह सीखने में मदद करेंगे कि कैसे एक वेबसाइट को शुरू से बनाया जाए:

चरण 1) अपना पसंदीदा टेक्स्ट एडिटर खोलें.

यहां, हम नोटपैड खोलते हैं।

चरण 2) एक नई फ़ाइल बनाएँ।

जिसका नाम index.html है।

अपना पहला वेब पेज बनाना

चरण 3) निम्नलिखित कोड जोड़ें,

index.html फ़ाइल में.

अपना पहला वेब पेज बनाना

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>My First Web Page</title>
    <script>
    function displayMessage() {
        document.getElementById("message").innerHTML = "Greetings from JavaScript!";
    }
    </script>
</head>
<body>
    <div class="container">
        <h1>My Web App!</h1>
        <p id="message">Your message will appear here.</p>
        <button type="button" class="btn btn-primary" onclick="displayMessage()">Click Me!</button>
    </div>
</body>

</html>

स्पष्टीकरण:

  • दस्तावेज़ प्रकार को परिभाषित करता है.
  • … हेड टैग को परिभाषित करता है जिसमें मेटाडेटा होता है जो उपयोगकर्ताओं के लिए अदृश्य होता है।
  • हेड में एक स्क्रिप्ट टैग भी होता है जिसमें निम्न शामिल होता है Javaस्क्रिप्ट कोड जो शुभकामना संदेश प्रदर्शित करता है.
  • हम भी लोड कर रहे हैं Bootstrap CDN नेटवर्क से CSS.
  • … हमारे पेज की सामग्री को परिभाषित करता है: एक शीर्षक, पैराग्राफ, और एक बटन जो कुछ स्टाइलिंग लागू करता है Bootstrap सीएसएस।

स्क्रैच से निर्माण करना बनाम कंटेंट मैनेजमेंट सिस्टम का उपयोग करना

वेबसाइट को शुरू से बनाने के लिए कौशल और उचित ज्ञान की आवश्यकता होती है। इसमें अधिक समय भी लगता है और बहुत सारा पैसा भी खर्च हो सकता है।

दूसरी ओर, वर्डप्रेस जैसे कंटेंट मैनेजमेंट सिस्टम का उपयोग करके अपनी वेबसाइट बनाने के लिए आपको कुशल प्रोग्रामर होने की आवश्यकता नहीं है। कंटेंट मैनेजमेंट सिस्टम जैसे एप्लिकेशन के समान हैं Microsoft Word.

सामग्री प्रबंधन प्रणाली के साथ, आप पृष्ठ बनाने, सामग्री लिखने और सामग्री प्रकाशित करने पर ध्यान केंद्रित करते हैं, ठीक उसी तरह जैसे शब्दों में दस्तावेज़ बनाना और उन्हें प्रिंटर पर प्रिंट करना।

निम्नलिखित तालिका वेबसाइट बनाने की दो लोकप्रिय विधियों की तुलना करती है।

एस / एन पक्ष/विपक्ष स्क्रैच से निर्माण सामग्री प्रबंधन प्रणाली का उपयोग करना
1 पहर बहुत समय की आवश्यकता है. इसमें बहुत कम समय लगता है। इसे 24 घंटे से भी कम समय में बनाया जा सकता है।
2 लागत एक कुशल प्रोग्रामर को नियुक्त करना महंगा हो सकता है। आप इसे स्वयं कर सकते हैं या इसे बनाने के लिए किसी को किराये पर रख सकते हैं।
4 कौशल एक अनुभवी और कुशल प्रोग्रामर की आवश्यकता है इसके लिए कम कौशल की आवश्यकता होती है। इसे करने के लिए आपको कंप्यूटर साक्षर होना चाहिए।
5 सुरक्षा हैकर्स आसानी से कोड में कमजोरियों का फायदा नहीं उठा सकते। हैकर्स आसानी से कोड में कमज़ोरी ढूँढ़कर उसका फ़ायदा उठा सकते हैं। सुरक्षा कारणों से नियमित अपडेट महत्वपूर्ण हैं।
6 गति यह अधिक तेज़ होता है, क्योंकि रनटाइम पर केवल आवश्यक सुविधाएं ही लोड की जाती हैं। यह धीमा होता है, क्योंकि सामग्री प्रबंधन प्रणाली एक सामान्य प्रयोजन समाधान के रूप में आती है, जो उन सुविधाओं को लोड कर सकती है जिनकी आपको आवश्यक रूप से आवश्यकता नहीं है।
7 रखरखाव रखरखाव आसान है क्योंकि अपडेट केवल तभी किए जाते हैं जब जरूरत होती है इसमें अधिक कार्य की आवश्यकता होगी क्योंकि सुरक्षा कारणों से आपको CMS को नियमित रूप से अपडेट करना होगा।
8 खोज इंजन अनुकूलन (एसईओ) अधिक काम की आवश्यकता है, और प्रोग्रामर को याद दिलाने की आवश्यकता है क्योंकि अधिकांश प्रोग्रामर एसईओ विशेषज्ञ नहीं हैं अधिकांश कंटेंट मैनेजमेंट सिस्टम SEO टूल के साथ आते हैं। प्लगइन्स का उपयोग करके अतिरिक्त सुविधाएँ आसानी से जोड़ी जा सकती हैं।

फ्रेमवर्क का उपयोग करना (PHP MVC फ्रेमवर्क)

इस खंड में, हम देखेंगे कि हम अपनी वेबसाइट को कैसे स्क्रैच से बना सकते हैं। हर वेबसाइट को हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML) जैसी फ्रंटएंड तकनीकों का उपयोग करना चाहिए, Javaस्क्रिप्ट, और कैस्केडिंग स्टाइल शीट्स (सीएसएस)।

बैकएंड में प्रोग्रामिंग भाषाओं के लिए अधिक विकल्प हैं। आप PHP, Pythonमाणिक, Javaस्क्रिप्ट, आदि। PHP सबसे आम में से एक है। हम इस अनुभाग में PHP तकनीकों के बारे में बात करेंगे।

आप PHP का उपयोग कर सकते हैं क्योंकि यह एक धीमी प्रक्रिया है, इसलिए स्क्रैच से वेबसाइट बनाने वाले प्रोग्रामर को भी डेवलपमेंट फ्रेमवर्क का उपयोग करने की आवश्यकता होती है। सबसे लोकप्रिय मॉडल-व्यू-कंट्रोलर (MVC) फ्रेमवर्क है। PHP MVC फ्रेमवर्क के उदाहरणों में लारवेल, कोडइग्निटर, केक PHP, सिम्फनी आदि शामिल हैं।

MVC फ्रेमवर्क निम्नलिखित सुविधाएँ प्रदान करते हैं:

  • पुस्तकालयों के साथ अंतर्निहित डेटाबेस कनेक्टिविटी: इससे आपको डेटा लिखने और पुनः प्राप्त करने के लिए डेटाबेस से सुरक्षित रूप से कनेक्ट करने हेतु कोड लिखने में लगने वाला समय बच जाता है।
  • अंतर्निहित प्रमाणीकरण मॉड्यूल: इससे आपको कोड लिखने में लगने वाला समय बच जाता है, जिसके लिए उपयोगकर्ताओं को आवश्यकता पड़ने पर साइट पर लॉग इन और लॉग आउट करना पड़ता है।
  • संरचित कोड: MVC डिज़ाइन पैटर्न बिज़नेस लॉजिक को प्रेजेंटेशन से अलग करता है। इससे एक प्रोग्रामर को रखना आसान हो जाता है जो बैक एंड पर काम कर सकता है और एक वेब डिज़ाइनर को जो फ्रंट एंड डेवलपमेंट पर काम करता है।
  • पैकेज: ये लाइब्रेरीज़ के संग्रह हैं जो बहुत ही विशिष्ट कार्य करते हैं। उदाहरण के लिए, आप निम्न सुविधाएँ जोड़ने के लिए पैकेज का उपयोग या डाउनलोड कर सकते हैं;
    • अपनी साइट पर Disqus टिप्पणी सुविधा जोड़ना
    • API को कॉल करना
    • भुगतान गेटवे को एकीकृत करना।

आप विकास के समय को तेज़ करने के लिए MVC फ़्रेमवर्क का उपयोग कर सकते हैं। आप ओपन-सोर्स HTML टेम्प्लेट का उपयोग करके फ्रंटएंड के विकास को तेज़ करने के लिए HTML टेम्प्लेट का भी उपयोग कर सकते हैं। आप एक वाणिज्यिक HTML टेम्प्लेट भी खरीद सकते हैं और फिर उसे अपनी आवश्यकताओं के अनुसार अनुकूलित कर सकते हैं। कुछ HTML टेम्प्लेट निर्माता विशिष्ट MVC फ़्रेमवर्क HTML टेम्प्लेट भी बनाते हैं।

उदाहरण के लिए, आप एक HTML टेम्पलेट खरीद सकते हैं जो ब्लेड टेम्पलेट का उपयोग करता है, जो कि लारवेल MVC फ्रेमवर्क में निर्मित एक टेम्पलेट इंजन है।

कंटेंट मैनेजमेंट सिस्टम (वर्डप्रेस) का उपयोग करके वेबसाइट बनाना

इस अनुभाग में, हम देखेंगे कि आप वर्डप्रेस का उपयोग करके वेबसाइट कैसे बना सकते हैं:

वर्डप्रेस डाउनलोड करना

यदि आपके पास वेब सर्वर और PHP इंस्टॉल है, तो आप आधिकारिक वेबसाइट से वर्डप्रेस डाउनलोड कर सकते हैं और इसे अपने स्थानीय कंप्यूटर पर चला सकते हैं। हालाँकि, यदि आपके पास पहले से ही होस्टिंग खाता है, तो आप सीधे अपने cPanel से वर्डप्रेस इंस्टॉल कर सकते हैं।

WordPress के साथ आरंभ करना

एक बार वर्डप्रेस स्थापित हो जाने के बाद, आप अपनी वेबसाइट बनाना शुरू कर सकते हैं।

वेब होस्टिंग:

आरंभ करने से पहले, आपके पास एक होना चाहिए डोमेन नाम और वेब होस्टिंग वेब होस्टिंग खाते में PHP स्थापित होना चाहिए और MySQL डेटाबेस इंजन के रूप में। आप इसकी सेवा ले सकते हैं Bluehost, Godaddy, या आप WP इंजन के साथ होस्ट कर सकते हैं, जो प्रबंधित वर्डप्रेस होस्टिंग प्रदान करने में माहिर है।

अधिष्ठापन:

अधिकांश वेब होस्टिंग प्रदाताओं के पास प्रशासनिक पैनल में विशेष स्क्रिप्ट होती हैं जो आपको वर्डप्रेस इंस्टॉल करने की अनुमति देती हैं। यदि आपका होस्टिंग प्रदाता cPanel का उपयोग करता है, तो आपको नीचे दी गई छवि में दिखाए गए वर्डप्रेस आइकन पर क्लिक करके वर्डप्रेस इंस्टॉल करने में सक्षम होना चाहिए:

WordPress के साथ आरंभ करना

एक बार जब आप उपरोक्त विकल्प का चयन कर लेंगे, तो आपको इंस्टॉलेशन पूरा करने के लिए निम्नलिखित विंडो दिखाई देगी।

WordPress के साथ आरंभ करना

सेटिंग:

सेटिंग्स अनुभाग आपको साइट का नाम, यूआरएल स्थायी लिंक, समय क्षेत्र, यदि कोई आपकी साइट पर पंजीकरण कर सकता है, आदि जैसी चीजों को कॉन्फ़िगर करने की अनुमति देता है।

साँचा:

टेम्पलेट्स हमें यह देखने की अनुमति देते हैं कि हमारी वेबसाइट कैसी दिखती है। वर्डप्रेस मुफ़्त बिल्ट-इन टेम्पलेट्स के साथ आता है जिन्हें आप तुरंत इस्तेमाल कर सकते हैं। आप दूसरों द्वारा बनाए गए टेम्पलेट्स को भी डाउनलोड कर सकते हैं। मुफ़्त टेम्पलेट्स के अलावा, आप थीमफ़ॉरेस्ट जैसे मार्केटप्लेस से प्रीमियम टेम्पलेट्स भी खरीद सकते हैं।

प्लग-इन:

प्लगइन्स आपको वर्डप्रेस की कार्यक्षमता बढ़ाने की अनुमति देते हैं। उदाहरण के लिए, आप अपने क्लाइंट को अपनी वेबसाइट से PayPal के ज़रिए भुगतान करने में सक्षम बनाने के लिए प्लगइन का उपयोग कर सकते हैं। आप उपयोगकर्ताओं को सुरक्षित कनेक्शन (HTTPS) का उपयोग करने या साइट मैप बनाने के लिए मजबूर करने के लिए भी प्लगइन्स का उपयोग कर सकते हैं।

वेबसाइट बनाने वाले:

वेबसाइट बिल्डर्स कई विशेषताओं के साथ आते हैं जो ड्रैग और ड्रॉप विधियों का उपयोग करके वेबसाइट बनाना आसान बनाते हैं। वेबसाइट बिल्डर्स आमतौर पर प्लगइन्स के रूप में इंस्टॉल किए जाते हैं और टेम्प्लेट के साथ आते हैं जिनका आप उपयोग कर सकते हैं।

आइए कुछ सबसे लोकप्रिय वेब बिल्डरों पर नज़र डालें:

Astra

वेबसाइट बिल्डर्स एस्ट्रा

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

तत्व:

वेबसाइट बिल्डर्स एलिमेंटर

एलिमेंटर वर्डप्रेस के लिए ड्रैग एंड ड्रॉप वेबसाइट बिल्डर है जिसका इस्तेमाल 5 मिलियन से ज़्यादा यूज़र करते हैं। एलिमेंटर मुफ़्त और प्रीमियम दोनों तरह की सुविधाएँ प्रदान करता है।

बीवर बिल्डर:

वेबसाइट बिल्डर्स बीवर बिल्डर

बीवर बिल्डर वर्डप्रेस के लिए उपयोग में आसान ड्रैग-एंड-ड्रॉप वेबसाइट बिल्डर है जो आपको तेजी से पेशेवर दिखने वाली वेबसाइट बनाने की अनुमति देता है।

वर्डप्रेस विकल्प

वर्डप्रेस एकमात्र कंटेंट मैनेजमेंट सिस्टम नहीं है जिसका उपयोग आप अपनी वेबसाइट बनाने के लिए कर सकते हैं। आप इसके अलावा अन्य विकल्पों पर भी विचार कर सकते हैं जैसे

  • जूमला: जूमला एक ओपन-सोर्स कंटेंट मैनेजमेंट सिस्टम है जिसका उपयोग कंटेंट प्रकाशित करने, चर्चा मंचों, ई-कॉमर्स एप्लिकेशन आदि के लिए किया जा सकता है। यह प्रोग्रामिंग भाषा के रूप में PHP का उपयोग करता है और MySQL डेटाबेस इंजन के रूप में.
  • द्रुपाल: यह एक वेब सामग्री प्रबंधन प्रणाली है जो व्यक्तिगत ब्लॉग, कॉर्पोरेट वेबसाइट या व्यावसायिक सहयोग के लिए ज्ञान प्रबंधन बना सकती है। ड्रूपल PHP में लिखा गया है और Javaस्क्रिप्ट।
  • एमओडीएक्स: यह एक ओपन-सोर्स कंटेंट मैनेजमेंट सिस्टम है जो PHP में लिखा गया है। और इसका उपयोग करता है MySQL डेटाबेस इंजन के रूप में। इसका उपयोग वेब के साथ-साथ इंट्रानेट पर भी किया जा सकता है।
  • लगातार संपर्क: यह एक वेबसाइट बिल्डर है जो ड्रैग और ड्रॉप सुविधाएँ प्रदान करता है। इसका उपयोग बुनियादी वेबसाइट और ई-कॉमर्स स्टोर बनाने के लिए किया जा सकता है।

सारांश

  • वेबसाइटें कंप्यूटर कोड का उपयोग करके बनाई जाती हैं।
  • कंप्यूटर कोड मानव-पठनीय निर्देश होते हैं जो कंप्यूटर को एक विशिष्ट कार्य करने के लिए कहते हैं।
  • वेबसाइटें या तो शुरू से बनाई जा सकती हैं या वर्डप्रेस जैसे किसी मौजूदा प्लेटफॉर्म का उपयोग करके बनाई जा सकती हैं।
  • किसी प्लेटफॉर्म का उपयोग करके वेबसाइट बनाने की तुलना में स्क्रैच से वेबसाइट बनाना अधिक समय लेता है।
  • किसी मौजूदा प्लेटफॉर्म का उपयोग करने की तुलना में स्क्रैच से वेबसाइट बनाना अधिक लचीला है।
  • वेबसाइट बनाने के लिए उपयोग की जाने वाली प्रोग्रामिंग भाषाएँ HTML, CSS हैं। Javaस्क्रिप्ट, और बैकएंड के लिए स्क्रिप्टिंग भाषाएं, जैसे PHP, Python, रूबी, आदि।
  • वर्डप्रेस एक सामग्री प्रबंधन प्रणाली है जिसका उपयोग बहुत तेज़ी से वेबसाइट बनाने के लिए किया जा सकता है।
  • वर्डप्रेस ड्रैग और ड्रॉप वेबसाइट डिज़ाइन सुविधाएं प्रदान करने के लिए एस्ट्रा, एलिमेंटर या बीवर बिल्डर आदि जैसे प्लगइन्स का समर्थन करता है।
  • लारवेल या कोडइग्निटर जैसे MVC फ्रेमवर्क का उपयोग वेबसाइटों को तेजी से विकसित करने के लिए किया जा सकता है।