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

यह विकिहाउ गाइड आपको HTML का इस्तेमाल करके एक वेबपेज बनाना सिखाएगी। आपके वेबपेज के कुछ एलीमेंट्स (elements) में टेक्स्ट (text), लिंक (link) और इमेज (images) शामिल हो सकती हैं।

विधि 1
विधि 1 का 7:

लिखने की तैयारी करना (Preparing to Write)

आर्टिकल डाउनलोड करें
  1. विंडोज कंप्यूटर पर, नोटपैड (Notepad) एक डिफॉल्ट टेक्स्ट एडिटर होता है, जबकि मैक यूजर्स के पास में टेक्स्टएडिट (TextEdit) नाम का एक प्रोग्राम होता है:
  2. HTML में लिखते समय, पेज के एलीमेंट्स को खुले टैग्स (<>) और बंद टैग्स (</>) के जरिए दर्शाया जाता है, जिसमें एलीमेंट के लिए टेक्स्ट को टैग्स के बीच में लिखा जाता है।
    • जैसे, एक पैराग्राफ को, ओपन पैराग्राफ टैग ( <p> ) टाइप करके, आप जिस टेक्स्ट को यूज करना चाहते हैं, उसे एंटर करके और फिर एक बंद पैराग्राफ टैग </p> को एंटर करके बनाया जाता है।
    • कोड की हर एक लाइन को अपनी खुद की अलग लाइन में जाना चाहिए, इसलिए आमतौर पर आप कोड की लाइन लिखने के बाद Enter दबाएँगे।
  3. आप जिस HTML डॉक्यूमेंट को तैयार कर रहे हैं, उसके लिए, आप डॉक्यूमेंट को एक "डॉक्यूमेंट टाइप (document type)" टैग ( <!DOCTYPE html> ), एक HTML टैग ( <html> ), और एक बॉडी (BODY) टैग ( <body> ) के साथ में शुरू करेंगे। साथ में आप डॉक्यूमेंट को एक बंद बॉडी टैग से और फिर एक बंद HTML टैग से भी खत्म करेंगे। जैसे:
    • <!DOCTYPE html>
    • <html>
    • <body>
    • </body>
    • </html>
  4. CSS एक लेंग्वेज है, जो HTML के एक कॉम्प्लिमेंट की तरह काम करती है; ये पेज फ़ारमैटिंग (जैसे कि, कलर्स, सेंटर टेक्स्ट बगैरह) को और वेबपेज के दूसरे विजुअल आस्पेक्ट (दिखाई देने वाले पहलुओं) को कवर करती है।
विधि 2
विधि 2 का 7:

एक टेक्स्ट पेज तैयार करना (Creating a Text Page)

आर्टिकल डाउनलोड करें
  1. अपने डॉक्यूमेंट के शुरुआती HTML टेक्स्ट को एड करें:
    • <!DOCTYPE html>
    • <html>
    • <body>
  2. इसे "head" की तरह भी जाना जाता है और ये उस टेक्स्ट को डिफ़ाइन करता है। जो ब्राउज़र के टैब पर दिखाई देने वाला है। इसके लिए अपने डॉक्यूमेंट में इस टेक्स्ट को एड करें, ध्यान रखें कि आप यहाँ पर "Your Title" की जगह पर अपनी पसंद का नाम लिखें:
    • <head>
    • <title>Your Title</title>
    • </head>
  3. <h1>Text</h1> टाइप करें और Enter दबाएँ। आप जिस भी टेक्स्ट को इस्तेमाल करना चाहते हैं, उसे <h1> और </h1> टैग्स के बीच में लिख सकते हैं।
    • हैडर को पेज में इस्तेमाल किया जा सकता है। पहले के बाद इस्तेमाल होने वाले एक हैडर के लिए केवल नंबर को बढ़ा दें (जैसे, दूसरे हैडर के लिए <h2> </h2> यूज करें)।
  4. <p>Text</p> टाइप करें और Enter दबाएँ, ध्यान रखें कि यहाँ पर आप "Text" की जगह पर अपने पैराग्राफ के टेक्स्ट को लिख रहे हैं।
    • आप टेक्स्ट की हर एक नई लाइन के लिए <p> </p> टैग को दोहराकर, टेक्स्ट की लाइन को एक नई लाइन में एड कर सकते हैं।
  5. आप आपके वेबपेज में जितने चाहें, उतने हैडर और पैराग्राफ एड कर सकते हैं।
  6. <br>Text</br> टाइप करें और Enter दबाएँ। अगर आप अलग अलग भाग को अलग रखना चाहते हैं, तो ऐसा करने से से आपके पैराग्राफ के बीच में गैप एड हो जाएंगे।
  7. फ़ारमैटिंग को इंडिकेट करने के लिए आप <p> </p> टैग्स के अंदर अलग अलग टैग्स का इस्तेमाल कर सकते हैं (जैसे <p> <em></em> </p> ):
    • <em>text</em> - इससे इटैलिक टेक्स्ट तैयार होता है।
    • <strong>text</strong> - से बोल्ड टेक्स्ट तैयार होता है।
    • <ins>text</ins> - से अंडरलाइन टेक्स्ट तैयार होता है।
    • <del>text</del> - से टेक्स्ट के साथ में लाइन वाला टेक्स्ट तैयार होता है।
    • <small>text</small> - से छोटा टेक्स्ट तैयार होता है।
    • <!---text---> - से अदृश्य टेक्स्ट तैयार होता है। इसे आपके वेबपेज पर नोट्स एड करने के लिए इस्तेमाल किया जाता है।
  8. आप जब टेक्स्ट एड कर लेते हैं, डॉक्यूमेंट को बंद करने के लिए </body> टाइप करें और Enter दबाएँ, फिर </html> टाइप करें। अब जैसे कि आपका टेक्स्ट पेज टेक्निकली कंप्लीट हो चुका है, आप उसमें लिंक्स, बुलेट पॉइंट और इमेज जैसी दूसरी चीजें शामिल कर सकते हैं।
विधि 3
विधि 3 का 7:

लिंक्स एड करना (Adding Links)

आर्टिकल डाउनलोड करें
  1. जैसे, अगर आप वेबपेज में पैराग्राफ के बीच में लिंक एड करना चाहते हैं, तो आप उस पैराग्राफ पर जाएंगे और उस शब्द या फ्रेज को पाएंगे, जिसे आप एक लिंक की तरह यूज करना चाहते हैं।
  2. उस वैबसाइट पर जाएँ, जिसे आप लिंक करना चाहते हैं, फिर विंडो में सबसे ऊपर बार (bar) में उसके एड्रेस को सिलेक्ट करें और Ctrl + C (Windows) या Command + C (Mac) दबाएँ।
  3. आप जिस शब्द या फ्रेज को एक लिंक की तरह इस्तेमाल करना चाहते हैं, उसके ठीक पहले की स्पेस में <a href=> टाइप करें।
  4. href= और > के बीच में क्लिक करें और Ctrl + V (Windows) या Command + V (Mac) दबाएँ। आपको href= टेक्स्ट के सामने एक लिंक दिखाई देने लग जाएगी।
    • जैसे, अगर आप यूट्यूब को लिंक कर रहे हैं, तो आपको यहाँ <a href=https://www.youtube.com/> दिखाई देगा।
  5. आप जिस टेक्स्ट को एक लिंक की तरह यूज करना चाहते हैं, उसके दूसरे साइड पर, </a> टाइप करें। जैसे, "Follow me on Twitter" लिखी लाइन में, जहां आप ट्विटर से लिंक कर रहे हैं और "on Twitter" को लिंक की तरह यूज कर रहे हैं, आपका कोड इस तरह से तैयार होगा:
    • <a href=https://www.twitter.com/>on Twitter</a>
  6. ID टैग आपको एक ही पेज पर अलग अलग पैराग्राफ में टेक्स्ट के एक पीस को किसी और सेक्शन में लिंक करने देते हैं। इसके लिए:
    • <p> टैग को <p id=text> से रिप्लेस करें।
    • आप जिस टेक्स्ट को लिंक की तरह इस्तेमाल करना चाहते हैं, उसे पाएँ।
    • टेक्स्ट से पहले <a href=#text> टाइप करें। सुनिश्चित करें कि "#" के बाद का टेक्स्ट यहाँ पर "id=" के बाद के टेक्स्ट से मैच कर रहा है।
    • टेक्स्ट के बाद में </a> टाइप करें।
विधि 4
विधि 4 का 7:

बुलेट पॉइंट एड करना (Adding Bullet Points)

आर्टिकल डाउनलोड करें
  1. आप जहां बुलेट पॉइंट एड करना चाहते हैं, उस जगह को पाएँ: बुलेट पॉइंट इन्फॉर्मेशन को लिस्ट करने के लिए या ओर्गेनाइज़ स्टेप्स बनाने के लिए अच्छे होते हैं। जब आपको वो पैराग्राफ मिल जाए, जिसके नीचे आप बुलेट पॉइंट्स एड करना चाहते हैं, वहाँ पर इसे एड करें।
  2. आप जिस जगह पर बुलेट लिस्ट रखना चाहते हैं, उसके ऊपर, <br> टाइप करें और Enter दबाएँ।
  3. <li>text</li> टाइप करें और Enter दबाएँ, ध्यान रखें कि यहाँ पर आप "text" को बुलेट पॉइंट टेक्स्ट से रिप्लेस कर देते हैं।
  4. बशर्ते आप टेक्स्ट की लाइन पर <li></li> यूज कर रहे हैं, टैग के बीच के टेक्स्ट से एक बुलेट पॉइंट तैयार होगा।
  5. <ul>text</ul> टाइप करें और Enter दबाएँ। आपका टेक्स्ट पिछले बुलेट पॉइंट के नीचे इंडेंटेड नजर आएगा।
    • <ul></ul> टैग्स वाले टेक्स्ट में सामने बुलेट पॉइंट नहीं होगा।
  6. अगर आपने पहले एक पेज ब्रेक को यूज करने का चुना था, तो </br> टाइप करें और Enter दबाएँ। आपकी बुलेट लिस्ट पेज पर सबसे अलग रहेगी।
विधि 5
विधि 5 का 7:

इमेज एड करना (Adding Images)

आर्टिकल डाउनलोड करें
  1. आप जहां पर भी इमेज के लिए कोड इन्सर्ट करते हैं, उस जगह पर इमेज वेबपेज पर दिखाई देगी।
  2. ऐसा करने के लिए <img टाइप करें, लेकिन Enter न दबाएँ। क्योंकि "image" टैग अपने आप में एक पूरा कंप्लीट टैग है, इसलिए इसे क्लोजिंग या बंद टैग की जरूरत नहीं होती।
  3. <img टैग के बाद src= टाइप करें, ध्यान रखें कि "img" और "src" के बीच में एक स्पेस भी दे रहे हैं।
  4. आप जिस इमेज को एड करना चाहते हैं, उसके यूआरएल को कॉपी करें, फिर उसे सोर्स टैग के सामने पेस्ट कर दें।
  5. style= टाइप करें, फिर width:px;height:px टाइप करें।
  6. इमेज की चौड़ाई को "width:" के बाद पिक्सेल में टाइप करें, फिर "height:" के बाद पिक्सेल में इमेज की हाइट टाइप करें।
  7. ये टेक्स्ट है, जो तब डिस्प्ले होता है, जब इमेज लोड नहीं हो पाती। इसके लिए, alt= टाइप करें और फिर डिसक्रिप्शन टाइप करें।
  8. इसके लिए, ऑल्टर्नेट डिसक्रिप्शन में आखिरी केरेक्टर के बाद एक > ब्रैकेट लगाएँ।
  9. इसे इस तरह से होना चाहिए:
    • <img src=https://www.w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=Fjord>
विधि 6
विधि 6 का 7:

विंडोज पर डॉक्यूमेंट को सेव करना (Saving the Document on Windows)

आर्टिकल डाउनलोड करें
  1. क्लिक करें: ये नोटपैड विंडो के टॉप-लेफ्ट साइड में होता है। एक ड्रॉप-डाउन मेनू सामने आएगा।
  2. क्लिक करें: इसे आप File ड्रॉप डाउन मेनू के टॉप पर पाएंगे।
  3. विंडो के लेफ्ट साइड पर एक फोल्डर पर (जैसे, Desktop ) क्लिक करें।
  4. अपनी फ़ाइल के लिए आप जिस भी नाम को इस्तेमाल करना चाहते हैं, उसे "File name" टेक्स्ट फील्ड में, बाद में .html के साथ टाइप करें।
    • जैसे, "meow" नाम की फ़ाइल के लिए आप यहाँ meow.html एंटर करेंगे।
  5. एक ड्रॉप-डाउन सामने आएगा।
  6. क्लिक करें: ये ड्रॉप-डाउन मेनू में होता है।
  7. क्लिक करें: आप इसे विंडो के बॉटम राइट कॉर्नर में देखेंगे। ऐसा करने से आपकी टेक्स्ट फाइल एक HTML पेज की तरह सेव हो जाती है।
    • आप ज़्यादातर सभी ब्राउज़र पर HTML पेज फाइल को क्लिक करके और ओपन ब्राउज़र विंडो में ड्रैग करके खोल सकते हैं।
विधि 7
विधि 7 का 7:

मैक पर डॉक्यूमेंट को सेव करना (Saving the Document on Mac)

आर्टिकल डाउनलोड करें
  1. क्लिक करें: ये स्क्रीन के अपर-लेफ्ट साइड में होता है। एक ड्रॉप-डाउन मेनू सामने आएगा।
  2. क्लिक करें: इसे आप ड्रॉप-डाउन मेनू में सबसे ऊपर पाएंगे। Preferences विंडो खुल जाएगी।
  3. टैब क्लिक करें: ये पेज के सबसे ऊपर होती है।
  4. ये "When Saving a File" हैडिंग के नीचे होता है।
  5. इसके लिए विंडो के टॉप-लेफ्ट कॉर्नर में मौजूद लाल रंग के सर्कल को क्लिक करें।
  6. क्लिक करें: ये स्क्रीन में सबसे ऊपर मौजूद एक मेनू आइटम होता है।
  7. क्लिक करें: ये ऑप्शन ड्रॉप-डाउन मेनू में होता है।
  8. क्लिक करें: ये स्क्रीन के अपर लेफ्ट साइड में होता है।
  9. क्लिक करें: ये ड्रॉप-डाउन मेनू में सबसे ऊपर होता है।
  10. "Save As" टेक्स्ट फील्ड में नेम को अपनी पसंद के नाम से बदल दें, आखिर में .html लगा दें।
    • जैसे, "my_website" नाम के डॉक्यूमेंट के लिए, आप यहाँ my_website.html एंटर करेंगे।
  11. क्लिक करें: HTML डॉक्यूमेंट आपकी डिफॉल्ट लोकेशन में (जैसे, Desktop ) सेव हो जाएगा।
    • आप ज़्यादातर सभी ब्राउज़र पर HTML पेज फाइल को क्लिक करके और ओपन ब्राउज़र विंडो में ड्रैग करके खोल सकते हैं।

सलाह

  • Notepad++ के जैसे डेडिकेटेड कोड एडिटर का इस्तेमाल करना, नोटपैड या टेक्स्टएडिट जैसे एडिटर का इस्तेमाल करने के मुक़ाबले HTML को टाइप करना काफी आसान और इंट्रेस्टिंग बना देगा।

चेतावनी

  • अपने कोड को एक लाइव साइट पर अपलोड करने से पहले हमेशा उसे डबल चेक करें।

संबंधित लेखों

एंड्रॉयड पर पॉर्न ब्लॉक करें (Block Porn on Android)
पॉर्न देखना छोड़ें
मूवी डाउनलोड करें
अपने इंस्टाग्राम अकाउंट को रिएक्टिवेट करें (Reactivate Instagram Account)
यूजरनेम बनाएँ
इंस्टाग्राम पर किसी लड़की को इम्प्रेस करें (Instagram Par Kaise Kisi Ko Impress Karen)
व्हाट्सएप के फोटो को अपने फोन के फोटो गैलरी में सेव करें (Save Photos from WhatsApp to Your Android Gallery)
किसी का इमेल पता खोजें
पता करें कि क्या कोई स्नैपचैट पर ऑनलाइन है
इन्स्टाग्राम पर किसी को फॉलो करें (Follow Someone on Instagram)
यूट्यूब पर अपने सब्सक्राइबर्स चेक करें (Check Your Subscribers on YouTube)
गूगल क्रोम में किसी वेबसाइट को ब्लॉक करें (Block a Website in Google Chrome)
यूट्यूब से ऑडियो डाउनलोड करें (Download Audio from YouTube)
फेसबुक पेज को डिलीट करें (Facebook Page ko Delete Kaise Kare)

विकीहाउ के बारे में

सभी लेखकों को यह पृष्ठ बनाने के लिए धन्यवाद दें जो ११,३६७ बार पढ़ा गया है।

यह लेख ने कैसे आपकी मदद की?