बहुत से लोग सोचते हैं कि अपनी खुद की वेबसाइट बनाना हैयह एक मुश्किल व्यवसाय है और इसके लिए गंभीर तैयारी और जटिल उपकरणों के उपयोग की आवश्यकता होती है। वास्तव में, न्यूनतम ज्ञान और सबसे बुनियादी विंडोज प्रोग्राम, नोटपैड, शुरू करने के लिए पर्याप्त हैं। नोटपैड में वेबसाइट बनाने के सरल निर्देशों का पालन करते हुए, आप कुछ घंटों में पहला पूरा पेज बना सकते हैं।
पेशेवर वेब डेवलपर्स, अनुभवीवेबसाइट निर्माता शायद ही कभी अपने काम में नोटपैड का उपयोग करते हैं, लेकिन उपयोगकर्ताओं की दो श्रेणियां हैं जिनके लिए यह कार्यक्रम एक उत्कृष्ट विकल्प है:
कई पेशेवर लेआउट से परिचित हुए औरHTML, पता लगाता है कि नोटपैड का उपयोग करके वेबसाइट कैसे बनाई जाए। यह उन्हें मज़बूती से और जल्दी से प्राप्त सभी ज्ञान को समेकित करने की अनुमति देता है। नोटपैड कोड और मार्कअप के साथ काम करने के लिए अभिप्रेत नहीं है, इसमें कोई अंतर्निहित संकेत, ऑटो-पूरा करने और आधुनिक कार्यक्रमों में उपलब्ध अन्य चिप्स नहीं हैं, जिसका मतलब है कि डेवलपर केवल खुद और उसकी स्मृति पर भरोसा कर सकता है।
नोटपैड टेक्स्ट एडिटर में सबसे मामूली हैन्यूनतर इंटरफ़ेस, जिसका अर्थ है कि आपको लंबे समय तक कार्यक्रम की जटिल कार्यक्षमता को समझने की आवश्यकता नहीं है। यह उन उपयोगकर्ताओं के लिए बहुत आकर्षक है जो एक उपकरण सीखने में समय बिताने की योजना नहीं बनाते हैं जो वे अक्सर उपयोग नहीं करेंगे।
नोटपैड में HTML वेबसाइट बनाने के चरण-दर-चरण निर्देश प्रोग्राम को खोलने से शुरू होते हैं। नोटपैड को खोजने का सबसे आसान तरीका सहायक उपकरण अनुभाग में विंडोज स्टार्ट मेनू के माध्यम से है।
नई खोली गई फ़ाइल के साथ सहेजा जाना चाहिएएक्सटेंशन html। यह महत्वपूर्ण है क्योंकि यह एक्सटेंशन ब्राउज़र को बताएगा कि यह एक वेब पेज है। "फ़ाइल" मेनू पर "इस रूप में सहेजें" कमांड एक नई विंडो खोलेगी। यहां आपको डॉक्यूमेंट इंडेक्स। Html का नाम देना है, utf-8 एन्कोडिंग और सेव करने के लिए फोल्डर चुनें।
अब आप इस फाइल को किसी भी समय डबल क्लिक करके या संदर्भ मेनू पर राइट-क्लिक करके और "नोटपैड के साथ खोलें" का चयन करके खोल सकते हैं।
पृष्ठ पहले ही बनाया जा चुका है और आप देख सकते हैं कि यह ब्राउज़र में कैसा दिखता है। इंटरनेट ब्राउज़र में दस्तावेज़ खोलने के कई तरीके हैं:
फ़ाइल: /// C: /User/UserName/Desktop/my-site/index.htmlअब पृष्ठ अनुमानित रूप से कुंवारी है, यह जानकारी से भरने का समय है।
वर्ल्ड वाइड वेब की विशालता में सभी वेब पेजएक विशेष भाषा HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) में लिखी जाती हैं। नोटपैड या किसी अन्य संपादक में वेबसाइट बनाने का तरीका जानने के लिए इसकी मूल बातें समझना बहुत महत्वपूर्ण है। डेवलपर ब्राउज़र को समझाने के लिए HTML का उपयोग करता है कि पृष्ठ को कैसे देखना चाहिए। यही कारण है कि फ़ाइल के लिए सही एक्सटेंशन सेट करना महत्वपूर्ण है।
भाषा टैग पर आधारित है - कोण कोष्ठक में संलग्न वर्णों का संयोजन।
टैग के उदाहरण:
<h1> प्रथम स्तर का शीर्षक </ h1> <i> इटैलिकीकृत पाठ </ i>उद्घाटन और समापन टैग के बीच के पाठ को ब्राउज़र द्वारा एक विशेष तरीके से संभाला जाएगा।
पृष्ठ पर सीधे दिखाए गए डेटा के अलावा, पेज बनाते समय, आपको ब्राउज़र के लिए विशेष सेवा जानकारी निर्दिष्ट करनी चाहिए।
आपको HTML दस्तावेज़ के सही स्वरूपण के साथ काम करना शुरू करना चाहिए। पृष्ठ की मूल संरचना इस प्रकार है:
<! DOCTYPE html> <html> <सिर> <मेटा चारसेट = "utf-8"> <शीर्षक> विश्व में सर्वश्रेष्ठ साइट </ शीर्षक> </ सिर> <शरीर> </ शरीर> </ html>प्रत्येक तत्व का अर्थ:
DOCTYPE - ब्राउज़र के लिए तकनीकी जानकारी, यह दर्शाता है कि इसे कोड की व्याख्या कैसे करनी चाहिए;एचटीएमएल - पेज रूट टैग;सिर - सेवा जानकारी का अनुभाग, साइट आगंतुकों के लिए दृश्यमान नहीं;मेटा - एक सेवा टैग, charset विशेषता पाठ एन्कोडिंग को परिभाषित करता है;शीर्षक - ब्राउज़र टैब में प्रदर्शित पृष्ठ का नाम;तन - दस्तावेज़ का शरीर, सीधे पृष्ठ पर प्रदर्शित होता है।कोड को सहेजने और ब्राउज़र में फ़ाइल को फिर से खोलने (या पुनः लोड करने) के बाद, आप पहला परिवर्तन देख सकते हैं - साइट का नाम टैब पर दिखाई दिया।
नोटपैड का उपयोग करके HTML में अपनी साइट बनाने का तरीका जानने से पहले, आपको यह स्पष्ट रूप से कल्पना करने की आवश्यकता है कि यह साइट कैसी दिखनी चाहिए। उदाहरण के लिए, चलो एक निश्चित जॉन डो के व्यक्तिगत ब्लॉग को लेते हैं।
इस पृष्ठ की संरचना के मुख्य तत्व:
इस पृष्ठ का HTML कोड इस तरह दिखेगा:
<!DOCTYPE html> <html> <सिर> <मेटा चारसेट = "utf-8"> <शीर्षक> विश्व में सर्वश्रेष्ठ साइट </ शीर्षक> </ सिर> <शरीर> <div class = "आवरण"> <हैडर> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" चौड़ाई = "100"> </a> <h1> जॉन डो </ h1> </ हैडर> <नौसेना> <ul> <li> <a href="bio.html"> आत्मकथा </a> </ li> <li> <a href="life.html"> मेरा जीवन, मेरी उपलब्धियां </a> </ li> <li> <a href="gallery.html"> फोटो एल्बम </a> </ li> <li> <a href="contacts.html"> मुझसे संपर्क करें </a> </ li> <li> <a href="thanks.html"> धन्यवाद </a> </ li> </ ul> </ नौसेना> <मुख्य> <लेख> <h2> सुपर कॉन्सर्ट </ h2> <div> टिकटों के लिए एक किलोमीटर लंबी कतार के लायक था इस शो का आनंद लेने के लिए !! </ div> <a href="posts/concert.html"> और देखें </a> </ लेख> <लेख> <h2> मुझे आइसक्रीम क्यों पसंद है </ h2> <div> मैं गहरे कारणों को साझा करना चाहता हूं आइसक्रीम के लिए मेरा प्यार ... </ div> <a href="posts/ice-cream.html"> और देखें </a> </ लेख> <लेख> <h2> होना या न होना? </ h2> <div> जीवन और मृत्यु के मामले। </ div> <a href="posts/to-be-or-not-to-be.html"> विस्तृत जानकारी देखें </a> </ लेख> </ मुख्य> <पाद> जॉन डो (c) 2018 </ पाद> </ div> </ शरीर> </ html>HTML5 मानक के शब्दार्थ टैग वेब पेज का वर्णन करने के लिए उपयोग किए जाते हैं: हैडर, मुख्य, एनएवी, फ़ुटबाल, लेख.
कोड के लिए स्पष्टीकरण:
इमेजिस फ़ाइल के साथ फ्लश करें index.html... विशेषता का उपयोग करके इसके लिए कोड में चौड़ाई चौड़ाई सख्ती से 100 पिक्सेल पर सेट की गई है।एच 1, जो इसके महत्व को रेखांकित करता है।एच 2.आवरण... क्लास की विशेषताओं को आमतौर पर शैली तत्वों के लिए उपयोग किया जाता है।अब पृष्ठ इस तरह दिखता है:
यह दृश्य नियोजित के समान नहीं है। स्थिति को ठीक करने के लिए, आपको एक सजावट जोड़ने की आवश्यकता है।
ऐसा करने के लिए, आपको बगल में एक और फ़ाइल बनाने की आवश्यकता है index.html और इसे नाम दें style.css... इसमें सभी आवश्यक शैलियाँ होंगी।
फिलहाल, परियोजना की संरचना इस प्रकार है:
नोटपैड में वेबसाइट बनाने का तरीका जानने के लिए, हम एक नए स्तर पर जाते हैं - एक स्टाइल शीट कनेक्ट करते हुए।
ब्राउज़र को यह समझने के लिए कि डिज़ाइन कहाँ से प्राप्त करना है, आपको css फ़ाइल का पता बताना होगा। यह सेवा की जानकारी है, इसे अनुभाग में रखा जाना चाहिए सिर.
<सिर> <मेटा चारसेट = "utf-8"> <शीर्षक> विश्व में सर्वश्रेष्ठ साइट </ शीर्षक> <लिंक rel = "स्टाइलशीट" href = "style.css"> </ सिर>अब वह सब कुछ जो फ़ाइल में वर्णित किया जाएगा style.cssब्राउज़र पृष्ठ पर लागू होगा। उदाहरण के लिए, आइए पृष्ठभूमि का रंग बदलें:
तन { पृष्ठभूमि: # 89745d; }स्टाइलशीट की संपूर्ण सामग्री इस तरह दिखाई देगी:
तन { गद्दी: 0; फ़ॉन्ट परिवार:सान्स सेरिफ़; फ़ॉन्ट-आकार: 16 पीएक्स; पृष्ठभूमि: # 89745d; } .वाहक { गद्दी: 20 पीएक्स; मार्जिन-वाम: ऑटो; मार्जिन-राइट: ऑटो; चौड़ाई: 960 पीएक्स; } हेडर { पाठ-सजावट: कोई नहीं; } हेडर img { ऊर्ध्वाधर-संरेखित करें: मध्य; मार्जिन-राइट: 20 पीएक्स; } हेडर एच 1 { प्रदर्शन: इनलाइन-ब्लॉक; ऊर्ध्वाधर-संरेखित करें: मध्य; रंग: # f8d9b7; } नौसेना { पैडिंग-टॉप: 20 पीएक्स; पैडिंग-बॉटम: 20 पीएक्स; } नौसेना उल { मार्जिन: 0; पाठ-संरेखित करें: केंद्र; } नव उल ली { प्रदर्शन: इनलाइन-ब्लॉक; सूची-शैली: कोई नहीं; गद्दी: 0px 15px; } नव उल ली { रंग: # f8d9b7; पाठ-सजावट: कोई नहीं; } नेवी उल ली: होवर { पाठ-सजावट: रेखांकित करना; } लेख { गद्दी: 20 पीएक्स; मार्जिन: 20 पीएक्स 0; पृष्ठभूमि: # f8d9b7; बॉक्स-छाया: 0 0 15px # f8d9b7; } लेख h2 { मार्जिन-टॉप: 0px; मार्जिन-नीचे: 15px; रंग: # d57106; } लेख { फ़ॉन्ट-आकार: 14 पीएक्स; फ़ॉन्ट-शैली: इटैलिक; रंग: # d57106; } पाद { गद्दी: 20 पीएक्स; पाठ-संरेखण: सही; रंग: # f8d9b7; फ़ॉन्ट-आकार: 14 पीएक्स; फोंट की मोटाई: बोल्ड; }शैलियों के लिए स्पष्टीकरण:
यदि आप ब्राउज़र में दस्तावेज़ को ताज़ा करते हैं, तो आप अंतिम प्रतिनिधित्व देख सकते हैं। पहला वेब पेज सफलतापूर्वक बनाया गया है!
हालाँकि, एक ब्लॉग में केवल मुख्य नहीं हो सकता हैलेखों की सूची वाले पृष्ठ। किसी तरह पूर्ण पाठ के साथ एक अलग पोस्ट प्रदर्शित करना आवश्यक है, इसके अलावा, नेविगेशन मेनू में संकेतित पृष्ठ पहले से ही योजनाबद्ध हैं।
इंटरनेट की सबसे महत्वपूर्ण अवधारणा लिंक के माध्यम से व्यक्तिगत दस्तावेजों को जोड़ना है। नोटपैड में हाइपरलिंक वेबसाइट कैसे बनायें?
वास्तव में, आवश्यक सब कुछ पहले से ही किया गया है। मेनू आइटम और पॉइंटर्स "वॉच" को एक विशेष टैग में अधिक विस्तार से लपेटा गया है और, जो हाइपरलिंक के गठन के लिए जिम्मेदार है। आवश्यक पता विशेषता में इंगित किया गया है href... यह केवल पेज बनाने और फ़ाइल के बगल में रखने के लिए ही रहता है index.html.
फोटो एल्बम पृष्ठ के लिए नमूना कोड (gallery.html):
<!DOCTYPE html> <html> <सिर> <मेटा चारसेट = "utf-8"> <शीर्षक> विश्व में सर्वश्रेष्ठ साइट </ शीर्षक> <लिंक rel = "स्टाइलशीट" href = "style.css"> </ सिर> <शरीर> <div class = "आवरण"> <हैडर> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" चौड़ाई = "100"> </a> <h1> जॉन डो </ h1> </ हैडर> <नौसेना> <ul> <li> <a href="bio.html"> आत्मकथा </a> </ li> <li> <a href="life.html"> मेरा जीवन, मेरी उपलब्धियां </a> </ li> <li> <a href="gallery.html"> फोटो एल्बम </a> </ li> <li> <a href="contacts.html"> मुझसे संपर्क करें </a> </ li> <li> <a href="thanks.html"> धन्यवाद </a> </ li> </ ul> </ नौसेना> <मुख्य> <div class = "गैलरी"> <आंकड़ा> <img src = "/ images / images / in-forest.jpg" alt = ""> <अंजीर> जंगल में </ figcaption> </ आकृति> <आंकड़ा> <img src = "/ images / images / winter.jpg" alt = ""> <अंजीर> सर्दियों में </ अंजीर> </ आकृति> <आंकड़ा> <img src = "/ images / images / on-beach.jpg" alt = ""> <अंजीर> समुद्र तट पर </ figcaption> </ आकृति> <आंकड़ा> <img src = "/ images / images / work.jpg" alt = ""> <अंजीर> काम पर </ अंजीर> </ आकृति> <आंकड़ा> <img src = "/ images / images / new-year.jpg" alt = ""> <अंजीर> नया साल </ अंजीर> </ आकृति> <आंकड़ा> <img src = "/ images / images / picture.jpg" alt = ""> <अंजीर> स्व-चित्र </ अंजीर> </ आकृति> </ div> </ मुख्य> <पाद> जॉन डो (c) 2018 </ पाद> </ div> </ शरीर> </ html>मुख्य संरचना, हेडर, नेविगेशन और फ़ूटर मुख्य पृष्ठ को पूरी तरह से डुप्लिकेट करते हैं, केवल अनुभाग बदलता है मुख्यजिसमें अब एक गैलरी है जिसमें कई ब्लॉक हैं आकृति... प्रत्येक ब्लॉक में एक चित्र और एक कैप्शन होता है।
पेज को डिजाइन करने के लिए उसी फाइल का उपयोग किया जाता है style.cssअनुभाग के अंदर जुड़ा हुआ है सिर... आपको गैलरी के लिए इसमें कई नियम जोड़ने होंगे:
।गेलरी { फ़ॉन्ट-आकार: 0; } आंकड़ा { प्रदर्शन:इनलाइन-ब्लॉक; ऊर्ध्वाधर-संरेखित करें: नीचे; चौड़ाई: 33.3333%; box-sizing: बॉर्डर-बॉक्स; गद्दी: 10px 15px; मार्जिन: 0px; फ़ॉन्ट-आकार: 14 पीएक्स; रंग: # f8d9b7; पाठ-संरेखित करें: केंद्र; } चित्र img { चौड़ाई: 100%; मार्जिन-नीचे: 10px; }यहां, एक सीएसएस तकनीक का उपयोग किया जाता है जो आपको एक पंक्ति में तीन में ब्लॉक लगाने की अनुमति देता है और मूल कंटेनर की चौड़ाई के ठीक एक तिहाई तक उनकी चौड़ाई निर्धारित करता है।
गैलरी का अंतिम दृश्य नीचे दिखाया गया है।
हाइपरलिंक साइट के पृष्ठों के बीच आंदोलन प्रदान करता है: मेनू से आप "फोटो एल्बम" पर जा सकते हैं, और लोगो पर क्लिक करके, आप मुख्य पृष्ठ पर वापस जा सकते हैं।
इसलिए, हमने नोटपैड में वेबसाइट बनाने के लिए चरण-दर-चरण निर्देशों का उपयोग करके पता लगाया। लेकिन अब उसे कोई नहीं देखता! लेकिन आपके जीवन को पूरी दुनिया के साथ साझा करने के लिए व्यक्तिगत ब्लॉग बनाए जाते हैं।
स्थिति को मापने के लिए, आपको जगह देने की आवश्यकता हैहोस्टिंग पर सभी बनाई गई फाइलें और एक विशेष सेवा का उपयोग करके साइट के लिए एक डोमेन का चयन करें। बड़ी संख्या में होस्टिंग प्रदाता हैं जो हर स्वाद और वॉलेट के लिए सेवाएं प्रदान करते हैं।
होस्टर के साथ एक समझौते के समापन के बाद, आपके पास नियंत्रण कक्ष तक पहुंच होगी, जहां आप सभी बनाई गई फ़ाइलों को स्थानांतरित कर सकते हैं। फिलहाल, परियोजना की संरचना इस प्रकार है:
इसमें बाकी साइट पृष्ठों के लिए HTML फाइलें भी शामिल होनी चाहिए।
अब आप जानते है की html site कैसे बनाते हैनोटपैड, लेकिन अधिक सुविधाजनक तरीके हैं। पेशेवर कोड के साथ काम करने के लिए डिज़ाइन किए गए विशेष संपादकों का उपयोग करते हैं। वे साइटों को बनाने और संपादित करने में आसान बनाने के लिए कई आसान विकल्प प्रदान करते हैं।
सर्वाधिक लोकप्रिय उपकरण - विजुअल स्टूडियोकोड, उदात्त पाठ, नोटपैड ++। एक को उनकी जटिलता से डरना नहीं चाहिए। नोटपैड का उपयोग करके वेबसाइट बनाने का तरीका जानने के बाद, आप आसानी से पता लगा सकते हैं कि क्या है। इन संपादकों की सभी अतिरिक्त कार्यक्षमता को वेबमास्टर के काम को सुविधाजनक बनाने के लिए डिज़ाइन किया गया है और इस प्रक्रिया में उसके साथ हस्तक्षेप नहीं करना चाहिए।
नोटपैड के माध्यम से एक वेबसाइट का निर्माण एक वेब डेवलपर के रूप में एक लंबी और दिलचस्प यात्रा की शुरुआत है।
