कैसे HTML का इस्तेमाल करके एक वेब पेज तैयार करें (Create a Simple Web Page with HTML)

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

विधि 1

विधि 1 का 6:

अपने HTML पर एक हैड एड करना (Adding a Head to Your HTML)

आर्टिकल डाउनलोड करें

1
एक टेक्स्ट एडिटर ओपन करें: Windows ऑपरेटिंग सिस्टम वाले कंप्यूटर पर, आप Notepad या Notepad++ का उपयोग करेंगे, जबकि macOS यूजर्स TextEdit का उपयोग करेंगे और ChromeOS यूजर्स Text यूज करेंगे:
- Windows - Start
  ओपन करें, notepad या notepad++ लिखें और विंडोज में सबसे ऊपर Notepad या "Notepad++ या sublime" क्लिक करें।
- macOS - Spotlight
  क्लिक करें, textedit टाइप करें और रिजल्ट्स में सबसे ऊपर TextEdit क्लिक करें।
- ChromeOS - लॉन्चर खोलें, फिर Text क्लिक करें। (जिस आइकॉन पर Code Pad लिखा हो।)
<!DOCTYPE html> लिखें और ↵ Enter दबाएँ: ये वेब ब्राउज़र को बताता है कि ये एक HTML डॉक्यूमेंट है।^{[१]Xरिसर्च सोर्स}
<html> टाइप करें और ↵ Enter दबाएँ: ये आपके HTML कोड के लिए ओपनिंग टैग है।
<head> टाइप करें और ↵ Enter दबाएँ: ये एक टैग है, जो आपके HTML हैड को ओपन करता है। HTML हैड में वो इन्फ़ोर्मेशन होती है, जो आमतौर पर आपके वेब पेज पर डिस्प्ले नहीं होती है। इस इन्फोर्मेशन में टाइटल, मेटा डेटा, CSS स्टाइल शीट और दूसरी स्क्रिप्टिंग लेंग्वेज हो सकती है।^{[२]Xरिसर्च सोर्स}
<title> टाइप करें: ये आपके पेज के लिए एक टाइटल एड करने का टैग है।
ये कोई भी टाइटल हो सकता है, जो आप अपने वेब पेज को देना चाहते हैं।
</title> टाइप करें और ↵ Enter दबाएँ: ये आपके टाइटल टैग को बंद करने का टैग होता है।
8
</head> टाइप करें और ↵ Enter दबाएँ: ये आपके हैड को बंद करने वाला टैग होता है। आपके HTML कोड को इस प्रकार दिखना चाहिए।
```
<!DOCTYPE html><html><head><title>मेरा वेब पेज</title></head>
```

विधि 2

विधि 2 का 6:

अपने HTML में एक बॉडी और टेक्स्ट एड करना (Adding a Body and Text to Your HTML)

आर्टिकल डाउनलोड करें

ये टैग आपके HTML डॉक्यूमेंट के बॉडी को खोल देता है। HTML बॉडी में जाने वाला सारा कंटेन्ट वेब पेज पर दिखाई देता है।
<h1> टाइप करें: ये आपके HTML डॉक्यूमेंट पर एक हेडिंग एड करता है। एक हेडिंग बड़ा बोल्ड टेक्स्ट होता है, जो आमतौर पर आपके HTML डॉक्यूमेंट में सबसे ऊपर जाता है।
ये आपके पेज के लिए एक टाइटल या एक ग्रीटिंग हो सकता है।
4
अपने हेडिंग टेक्स्ट के बाद </h1> टाइप करें और ↵ Enter दबाएँ: ये टैग आपकी हेडिंग को बंद कर देता है।
- आगे बढ़ने के साथ अतिरिक्त हेडिंग एड करते जाएँ: छह अलग अलग प्रकार की हेडिंग हैं, जिन्हें आप <h1></h1> से लेकर <h6></h6> तक टैग का इस्तेमाल करके बना सकते हैं। ये अलग अलग साइज की हेडिंग बनाते हैं। उदाहरण के लिए, लगातार बढ़ते क्रम में तीन अलग अलग साइज की हेडिंग बनाने के लिए आप ऐसा लिख सकते हैं:
  <h1>मेरे पेज पर आपका स्वागत है!</h1><h2>मेरे नाम बॉब है।</h2><h3>उम्मीद है आपको ये पसंद आएगा।</h3>
- हेडिंग टेक्स्ट की प्रायोरिटी या अहमियत को दिखाती है: लेकिन अगर आप लोअर हेडिंग इस्तेमाल करना चाहते हैं, तो हाइर हेडिंग का इस्तेमाल करने की जरूरत नहीं है। कोई चाहे तो सीधे H3 का इस्तेमाल कर सकता है, फिर चाहे आपके पोस्ट में कोई भी H1 न भी हो।
<p> टाइप करें: ये एक पैराग्राफ ओपन करने का टैग है। पैराग्राफ टेक्स्ट का इस्तेमाल नॉर्मल साइज टेक्स्ट को डिस्प्ले करने के लिए किया जाता है।
ये आपके वेब पेज के लिए एक डिस्क्रिप्शन हो सकती है या और कोई दूसरी इन्फोर्मेशन हो सकती है, जिसे आप शेयर करना चाहें।
7
अपने टेक्स्ट के बाद में </p> टाइप करें और ↵ Enter दबाएँ: ये आपके पैराग्राफ टेक्स्ट को बंद करने का टैग है। ये HTML में पैराग्राफ टेक्स्ट का एक उदाहरण है:
```
<p>ये मेरा पैराग्राफ है।</p>
```
- आप एक हेडिंग के अंतर्गत पैराग्राफ की एक सीरीज बनाने के लिए एक लाइन में कई पैराग्राफ लाइन एड कर सकते हैं।
- आप किसी भी टेक्स्ट को <font color="color"> और </font> टैग से फ्रेम करके किसी भी टेक्स्ट के कलर को चेंज कर सकते हैं। सुनिश्चित करें कि आप "color" सेक्शन में (आप कोट्स को शामिल करेंगे) अपने मनचाहे कलर को टाइप करते हैं। इन टैग का इस्तेमाल करके आप किसी भी टेक्स्ट को (जैसे हेडर) कई अलग अलग में बदल सकते हैं। उदाहरण के लिए, पैराग्राफ को नीला करने के लिए आप इस कोड को टाइप करेंगे: <p><font color="blue">Whales are majestic creatures.</font></p>
- आप HTML का इस्तेमाल करके बोल्ड, इटैलिक और दूसरे टेक्स्ट फ़ारमैट को भी एड कर सकते हैं। इस प्रकार HTML टैग का इस्तेमाल करके टेक्स्ट को फ़ारमैट करेंगे:^{[३]Xरिसर्च सोर्स}
  <b>बोल्ड टेक्स्ट</b><i>इटैलिक टेक्स्ट</i><u>अंडरलाइन टेक्स्ट</u><sub>सब्स्क्रिप्ट टेक्स्ट</sub><sup>सब्स्क्रिप्ट टेक्स्ट</sup>
- यदि आप केवल स्टाइलिंग के लिए नहीं, बल्कि बढ़ावा देने के लिए बोल्ड और इटैलिक यूज करते हैं, तो <b> और <i> की बजाय <strong> और <em> एलीमेंट यूज करें। ये स्क्रीन रीडर जैसी टेक्नोलोजी का इस्तेमाल किए जाने पर^{[४]Xरिसर्च सोर्स} या कुछ ब्राउज़र में मिलने वाले रीडर मोड पर^{[५]Xरिसर्च सोर्स} आपके वेब पेज को समझना आसान बना देता है।

विधि 3

विधि 3 का 6:

आपके HTML में अतिरिक्त एलीमेंट्स एड करना (Adding Additional Elements to Your HTML)

आर्टिकल डाउनलोड करें

1
अपने पेज में एक पिक्चर एड करें: आप इन स्टेप्स का इस्तेमाल करके आपके HTML में एक इमेज एड कर सकते हैं:
- अपने इमेज टैग को खोलने के लिए <img src= टाइप करें।
- कोटेशन मार्क्स में "=" साइन के बाद इमेज URL को कॉपी और पेस्ट करें।
- अपने इमेज टैग को बंद करने के लिए इमेज यूआरएल के बाद > टाइप करें: उदाहरण के लिए, अगर इमेज का यूआरएल "http://www.mypicture.com/lake" है, तो आप ऐसा लिखेंगे:
  <img src="http://www.mypicture.com/lake.jpg">
2
दूसरे पेज पर लिंक करें: आप इन स्टेप्स का इस्तेमाल करके आपके HTML पर एक लिंक एड कर सकते हैं:
- अपने लिंक टैग को खोलने के लिए <a href= टाइप करें।
- कॉपी करें और "=" साइन के बाद कोटेशन मार्क्स के अंदर पेस्ट करें।
- HTML के लिंक पोर्शन को बंद करने के लिए > लिखें।
- ब्रैकेट बंद करने के बाद लिंक के लिए एक नाम टाइप करें।
- HTML लिंक को बंद करने के लिए लिंक नेम के बाद में </a> टाइप करें।^{[६]Xरिसर्च सोर्स} ये फेसबुक के लिए लिंक का एक उदाहरण है।
  <a href="https://www.facebook.com">Facebook</a>.
आप <br> टाइप करके एक लाइन ब्रेक एड कर सकते हैं। इससे एक हॉरिजॉन्टल लाइन बनती है, जिसे आपके पेज के अलग-अलग सेक्शन को डिवाइड करने के लिए इस्तेमाल किया जा सकता है।

विधि 4

विधि 4 का 6:

कलर्स को कस्टमाइज करना (Customizing Colors)

आर्टिकल डाउनलोड करें

वर्ल्ड वाइड वेब कंसोर्टियम (W3C) कलर्स की एक ऑफिशियल लिस्ट मैनेज करता है, जिसे आप https://www.w3.org/wiki/CSS/Properties/color/keywords पर पा सकते हैं। हर कलर का एक ऑफिशियल नेम, 6-डिजिट हेक्साडेसिमल कोड और एक डेसिमल वैल्यू होती है। आप अपने वेबपेज में एलीमेंट्स में कलर एड करने के लिए इनमें से किसी भी वैल्यू का इस्तेमाल कर सकते हैं। इस उदाहरण के लिए, हम ऑफिशियल कलर नेम का इस्तेमाल करेंगे।
2
<body> टैग में बैकग्राउंड कलर सेट करें: आप ऐसा टैग में style एट्रिब्यूट एड करने के साथ करेंगे। मान लेते हैं कि आप पूरे पेज के बैकग्राउंड कलर को lavender बनाना चाहते हैं:
- <body style="background-color:lavender;">
3
किसी भी टैग के लिए टेक्स्ट कलर सेट करें: आप style एट्रिब्यूट का इस्तेमाल करके भी स्पेसिफ़ाई कर सकते हैं, कि आप किसी विशेष टैग के अंदर के सारे टेक्स्ट को किस कलर में रखना चाहते हैं। उदाहरण के लिए, मान लेते हैं कि आप अपने किसी एक <p> टैग में टेक्स्ट को midnightblue करना चाहते हैं:
- <p style="color:midnightblue;">
- कलर चेंज केवल उस <p> टैग के अंदर के टेक्स्ट को ही प्रभावित करेगा: यदि आपने बाद में एक और दूसरा <p> टैग शुरू किया है, जिसे आप midnightblue रखना चाहते हैं, तो आपको यहाँ पर भी स्टाइल एट्रिब्यूट को सेट करना होगा।
4
हेडर या पैराग्राफ के लिए बैकग्राउंड कलर सेट करें: आपने जिस तरह से बॉडी टैग के लिए बैकग्राउंड कलर सेट किया था, वैसे ही आप दूसरे टैग के लिए बैकग्राउंड कलर सेट कर सकते हैं। मान लेते हैं कि आप <p> lightgrey बैकग्राउंड कलर बनाना चाहते हैं, और H1-स्टाइल हेडर के लिए lightskyblue रखना चाहते हैं, आप इसे यूज करेंगे:
- <p style="background-color:lightgrey;">
- <h1 style="background-color:lightskyblue;">

विधि 5

विधि 5 का 6:

अपने HTML डॉक्यूमेंट को बंद करना (Closing Your HTML Document)

आर्टिकल डाउनलोड करें

अपने HTML डॉक्यूमेंट में अपने सारे टेक्स्ट, इमेज और दूसरे एलीमेंट्स को एड करना बंद करने के बाद, अपने HTML डॉक्यूमेंट के बॉडी को बंद करने के लिए अपने हिट डॉक्यूमेंट में सबसे नीचे इस टैग को एड करें।
2
अपने HTML डॉक्यूमेंट को बंद करने के लिए </html> टाइप करें: ये टैग आपके HTML डॉक्यूमेंट को क्लोज करने के लिए आपकी HTML बॉडी के आखिर में जाता है। ये वेब ब्राउज़र को बताता है कि इस टैग के बाद में और कोई HTML कोड नहीं है। आपका पूरा HTML डॉक्यूमेंट इस तरह से नजर आएगा:
```
<!DOCTYPE html><html><head><title>विकिहाउ फैन पेज</title></head><body><h1>मेरे पेज पर स्वागत है!</h1><p>ये विकिहाउ का फैन पेज है। यहाँ आप कम्फ़र्टेबल हो जाएँ!</p><h2>इंपोर्टेण्ट डेट</h2><p><i>January 15, 2019</i> - विकिहाउ का बर्थडे</p><h2>Links</h2><p>यहाँ विकिहाउ के लिए लिंक दी है: <a href="http://www.wikihow.com">How.com.vn</a></p></body></html>
```

विधि 6

विधि 6 का 6:

अपने वेबपेज को सेव और ओपन करना (Saving and Opening Your Web Page)

आर्टिकल डाउनलोड करें

1
अपने डॉक्यूमेंट को प्लेन टेक्स्ट में कन्वर्ट करें (केवल मैक यूजर): स्क्रीन में सबसे ऊपर Format मेनू आइटम को क्लिक करें, फिर सामने आने वाले ड्रॉप-डाउन मेनू में Make Plain Text क्लिक करें।
- ये स्टेप विंडोज पर न तो जरूरी है और न संभव।
क्लिक करें: ये स्क्रीन में सबसे ऊपर मौजूद मेनू बार है।
3
क्लिक करें: ये "File" के नीचे के ड्रॉप-डाउन होता है।
- वैकल्पिक रूप से, ऐसा करने के लिए आप Ctrl+S (Windows) या ⌘ Command+S (Mac) दबा सकते हैं।
आप अपने डॉक्यूमेंट को जो भी नाम देना चाहते हैं, उस नाम को "File name" (Windows) या "Name" (Mac) टेक्स्ट बॉक्स में टाइप करें।
5
डॉक्यूमेंट के फ़ाइल टाइप को चेंज करें: आपको डॉक्यूमेंट को एक टेक्स्ट फ़ाइल से एक HTML फ़ाइल में चेंज करना होगा। फ़ाइल टाइप को चेंज करने के लिए इन स्टेप्स को यूज करें:
- Windows - "Save as type" ड्रॉप-डाउन बॉक्स क्लिक करें, All Files क्लिक करें और फिर फ़ाइल के नेम के आखिर में .html टाइप करें।
- MacOS - फ़ाइल के नेम के आखिर में .txt को .html से बदल दें।
- ChromeOS - "Save as" बटन क्लिक करें। फ़ाइल को आखिर में .html के साथ नाम दें। शुरुआत में आप कुछ भी लिख सकते हैं।
6
क्लिक करें: ये विंडो में सबसे नीचे होता है। ऐसा करने से एक HTML फ़ाइल तैयार हो जाएगी।
- HTML फाइल्स आमतौर पर आपके डिफ़ाल्ट वेब ब्राउज़र के साथ में खुलती हैं।
इस पॉइंट पर, आप अपनी HTML फ़ाइल को अपने ब्राउज़र में खोलने को तैयार हैं, ताकि आप आपके वेबपेज को देख पाएँ।
8
HTML डॉक्यूमेंट को अपने ब्राउज़र के साथ खोलें: ज़्यादातर मामलों में, आप ऐसा करने के लिए अपने HTML डॉक्यूमेंट को डबल-क्लिक कर सकते हैं। अगर डॉक्यूमेंट को डबल-क्लिक करने से रिजल्ट में एक एरर मिलती है, तो ऐसा करें:
- Windows - डॉक्यूमेंट को राइट-क्लिक करें, Open with सिलेक्ट करें और अपने मनचाहे ब्राउज़र पर क्लिक करें।
- Mac - डॉक्यूमेंट को एक बार क्लिक करें, File क्लिक करें, Open With क्लिक करें और अपने मनचाहे ब्राउज़र पर क्लिक करें।
9
यदि जरूरी हो, तो अपने HTML डॉक्यूमेंट को एडिट करें: आपको अपने HTML पेज में एरर मिल सकती है। इसे बदलने के लिए, आप अपने HTML डॉक्यूमेंट के टेक्स्ट को एडिट कर सकते हैं:
- विंडोज पर, आप डॉक्यूमेंट को राइट क्लिक कर सकते हैं और सामने आने वाले ड्रॉप-डाउन मेनू में (अगर आपने Notepad++ इन्स्टाल किया है, तो ये आपको Edit with Notepad++ लिखा दिखेगा) Edit क्लिक कर सकते हैं।
- मैक पर, डॉक्यूमेंट को सिलेक्ट करने के लिए आपको उसे क्लिक करना होगा, File क्लिक करें, Open With सिलेक्ट करें और TextEdit क्लिक करें। आप डॉक्यूमेंट को TextEdit में ड्रैग करके ला सकते हैं।
- क्रोमबुक पर, Text एप को बंद करें, Files ओपन करें, अपनी फ़ाइल की तलाश करें और फिर उस पर क्लिक करें।

सलाह

टैग को हमेशा जैसे उन्हें खोला जाता है, उसी के विपरीत क्लोज करना चाहिए। उदाहरण के लिए, <tag1><tag2> को </tag2></tag1> की तरह बंद किया जाना चाहिए।
आप चाहें तो <marquee></marquee> टैग का इस्तेमाल करके अपनी वैबसाइट पर साइड स्क्रॉलिंग टेक्स्ट भी एड कर सकते हैं, लेकिन एक बात का ख्याल रखें कि इस टैग को कुछ ब्राउज़र के द्वारा नहीं पहचाना जाएगा।
कई लोग अपने कोड को लिखने और कम्पाइल करने के लिए Notepad++ यूज करते हैं।
यदि आप अपने पेज में एक इमेज को सेंटर करना चाहते हैं, तो आप img टैग में इमेज के नाम के बाद में <class="center"> टाइप कर सकते हैं (जैसे, <img src="URL" class="center">)।

चेतावनी

यदि आप अपने वेब पेज पर इमेज अपलोड करने का प्लान करते हैं, तो अच्छा होगा कि आप Imgur पर या इसी तरह की साइट पर अपनी खुद की इमेज को होस्ट करें। किसी और की पिक्चर को पोस्ट करने से कॉपीराइट का उल्लंघन हो सकता है।