बेयर बोन्स वेब पेज: १० कदम

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

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

इस निर्देश के अंत तक, आपके पास खरोंच से एक वेब पेज बनाने के लिए बुनियादी कौशल होंगे, और पता चलेगा कि कोडिंग उतना कठिन नहीं है जितना लगता है!

चरण 1: नोटपैड का उपयोग करना

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

नोटपैड खोलने के लिए, अपनी स्क्रीन के निचले बाएँ कोने में अपने खोज बार पर जाएँ और "नोटपैड" टाइप करें। फिर खोज परिणामों में आने वाले "नोटपैड" एप्लिकेशन का चयन करें। एक नई विंडो खुलनी चाहिए।

चरण 2: मूल HTML दस्तावेज़ ट्री जोड़ना

आपके वेब ब्राउजर (क्रोम, फायरफॉक्स, एज, इंटरनेट एक्सप्लोरर, सफारी…) के लिए आपके वेब पेज को प्रोसेस और प्रदर्शित करने के लिए सभी वेब पेजों को एक मानक कंकाल संरचना का पालन करना चाहिए।

इसे html डॉक्यूमेंट ट्री कहा जाता है। नोटपैड में, स्क्रीन शॉट में प्रदर्शित एचटीएमएल "एलिमेंट्स" या "टैग्स" टाइप करें। बेझिझक कॉपी और पेस्ट भी करें:

चरण 3:.html पेज के रूप में सहेजना

अब जब हमारे पास नोटपैड में हमारी मूल html संरचना है, तो इसे सहेजते हैं ताकि हम कोई काम न खोएं, और ताकि हम अपने परिवर्तनों को निर्देश के साथ प्रगति के रूप में देख सकें।

1. 'फ़ाइल' > 'इस रूप में सहेजें…' चुनें (स्क्रीनशॉट 1)
2. फ़ाइल प्रकार को 'सभी फ़ाइलें' में बदलें (स्क्रीनशॉट 2)
3. अपनी फाइल को अपनी पसंद का नाम दें। यह नोट करना सुनिश्चित करें कि आप अपने कंप्यूटर पर दस्तावेज़ को कहाँ सहेज रहे हैं ताकि आप इसे बाद में खोल सकें। नोट: इस फ़ाइल को सहेजने का सबसे महत्वपूर्ण हिस्सा फ़ाइल नाम के अंत में ".html" जोड़ना है। यह आपके कंप्यूटर को इसे एक वेबपेज के रूप में पहचानने की अनुमति देगा। इसलिए यदि आप अपनी फ़ाइल का नाम "my_webpage" रखना चाहते हैं, तो उसके अंत में.html जोड़ना सुनिश्चित करें, उदा. "my_webpage.html"

चरण 4: अपने वेब पेज पर एक शीर्षक जोड़ना

इसलिए हमारे पास वेब ब्राउज़र के लिए हमारे वेब पेज की व्याख्या और प्रदर्शित करने के लिए आवश्यक मूल HTML संरचना है, लेकिन हमारे पास कोई सामग्री नहीं है। चलो इसे बदलो!

सबसे पहले हमें अपने वेब पेज को एक टाइटल देना चाहिए। अधिकांश सभी वेब पेजों का एक शीर्षक होता है। यह वही है जो आपके वेब ब्राउज़र में टैब पर प्रदर्शित होता है (स्क्रीन शॉट देखें)। मैं अपने वेब पेज को "टेलर की वेबसाइट" शीर्षक देने जा रहा हूँ। ऐसा करने के लिए, हमें एक 'शीर्षक' तत्व जोड़ने की आवश्यकता है।

टेलर की वेबसाइट

इस बिंदु पर आप देखेंगे कि प्रत्येक टैग में एक "ओपनिंग" टैग और एक "क्लोजिंग" टैग होता है। जैसे कि

तथा ।

यह पता लगाना है कि शीर्षक कहाँ से शुरू होता है, और कहाँ समाप्त होता है। लगभग सभी html टैग इसका अनुसरण करते हैं, हालांकि कुछ अपवाद भी हैं।

चरण 5: अपने वेब पेज पर सामग्री जोड़ना

ठीक है, हमारे पास हमारे वेब पेज के लिए एक शीर्षक है, लेकिन हमारे पास अभी भी इसके लिए कोई वास्तविक सामग्री नहीं है। चलो कुछ स्वभाव जोड़ें!

हमने 'शीर्षक' तत्व का उपयोग करके अपने वेब पेज पर एक शीर्षक जोड़ा है। आइए एक 'h1' तत्व का उपयोग करके अपने वेबपेज को एक बड़ा, ध्यान खींचने वाला हेडर दें, जो एक हेडिंग एलिमेंट है।

टेलर की वेबसाइट

मेरे वेब पेज पर स्वागत है

चरण 6: हमारे परिवर्तनों को इस प्रकार देखना दूर

हमारे पास एक शीर्षक है, हमारे पास कुछ सामग्री है, आइए अपने वेब पेज को देखें कि यह अब तक कैसे आ रहा है।

1. नोटपैड में अपनी फाइल सेव करें
2. उस स्थान पर जाएँ जहाँ आपने अपनी फ़ाइल सहेजी है और उस पर डबल क्लिक करें। यह आपके डिफ़ॉल्ट वेब ब्राउज़र में अपने आप खुल जाना चाहिए। जंच रहे हो!

चरण 7: एक पैराग्राफ टैग जोड़ना

हमारे पास एक शीर्षक है, एक शीर्षक है, अब कुछ और पाठ के साथ एक अनुच्छेद जोड़ते हैं। अनुच्छेद के लिए तत्व का नाम 'पी' है। आप इसका उपयोग नीचे देख सकते हैं:

टेलर की वेबसाइट

मेरे वेब पेज पर स्वागत है

आज हम सीखेंगे कि यह बहुत ही सरल वेब पेज कैसे बनाया जाता है!

नोट: नोटपैड को सहेजकर और फ़ाइल को खोलकर आप जब चाहें अपने परिवर्तन देख सकते हैं।

चरण 8: इसे कुछ रंग दें

हमारे पास अपना वेबपेज ठीक साथ चल रहा है, लेकिन यह बहुत सादा है। आइए हमारे पैराग्राफ टैग को कुछ रंग दें!

हम नीचे दिए गए विवरण के अनुसार 'p' टैग में 'शैली' विशेषता जोड़कर विभिन्न तत्वों को रंग सकते हैं:

टेलर की वेबसाइट

मेरे वेब पेज पर स्वागत है

आज हम सीखेंगे कि यह बहुत ही सरल वेब पेज कैसे बनाया जाता है!

चरण 9: एक चित्र जोड़ना

बिना फोटो वाली वेबसाइट क्या है? आइए हमारी वेबसाइट पर एक तस्वीर जोड़ें!

पहला कदम एक ऐसी छवि ढूंढना है जिसे आप पसंद करते हैं। मैंने गोल्डन रिट्रीवर की खोज के लिए Google छवियों का उपयोग किया। छवि को ऊपर खींचें और सुनिश्चित करें कि url.jpg,.png,.gif,.jpg, आदि में समाप्त होता है।

एक बार जब आप अपनी छवि चुन लेते हैं, तो हमें इसे 'img' टैग का उपयोग करके html पृष्ठ में जोड़ना होगा। मेरी छवि है:

'src' विशेषता वाले 'img' टैग का उपयोग करके इसे अपने पृष्ठ में जोड़ें:

टेलर की वेबसाइट

मेरे वेब पेज पर स्वागत है

आज हम सीखेंगे कि यह बहुत ही सरल वेब पेज कैसे बनाया जाता है!

चरण 10: अंतिम उत्पाद देखना

नोटपैड फ़ाइल सहेजें, और अंतिम उत्पाद खोलें। आपको अपना वेब पेज देखना चाहिए!