कैसे HTML फाइल्स को एडिट करें (Edit HTML Files)

अगर आप वैबसाइट को अपने हाथ से कोड करना पसंद करते हैं, तो आप HTML फाइल्स को नोटपैड (Windows) या टेक्स्टएडिट (macOS) के जैसे बेसिक एडिटर में एडिट कर सकते हैं। अगर आप एलीमेंट्स (elements) को स्क्रीन के चारों ओर मूव कर पा रहे हैं और लाइव प्रिव्यू देख पा रहे हैं, तो आप Dreamweaver या Kompozer के जैसे एक WYSIWYG (What You See Is What You Get) का इस्तेमाल कर सकते हैं। इस विकिहाउ गाइड में HTML फाइल्स को एक स्टैंडर्ड या विजुअल एडिटिंग एप में ओपन करना और एडिट करना सिखाया जाएगा।

विधि 1

विधि 1 का 4:

विंडोज पर नोटपैड का इस्तेमाल करना (Using a Notepad on Windows)

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

ये टास्क बार में मौजूद एक बटन है, जिस पर विंडोज लोगो मौजूद होता है। बाई डिफॉल्ट ये निचले बाएँ कोने में होती है। ये स्टार्ट मेनू को डिस्प्ले करती है।
Notepad टाइप करें: ये स्टार्ट मेनू में नोटपैड को डिस्प्ले करता है।
क्लिक करें: इसका एक आइकॉन होता है, जो एक नीले कवर के साथ नोटपैड के जैसा दिखता है।
क्लिक करें: ये नोटपैड के मेनू बार में सबसे ऊपर होता है। ये एक ड्रॉप डाउन मेनू डिस्प्ले करता है। ये एक फ़ाइल ब्राउज़र डिस्प्ले करता है, जिसे आप फ़ाइल को नोटपैड में खोलने के लिए इस्तेमाल कर सकते हैं।
क्लिक करें: ये File ड्रॉप डाउन मेनू में दूसरा विकल्प होता है।
"Text Documents (.txt)" लिखे वाले ड्रॉप-डाउन को क्लिक करें और ड्रॉप-डाउन मेनू में "All files" सिलेक्ट करें। ये फ़ाइल ब्राउज़र में सारे डॉक्यूमेंट टाइप (जिसमें HTML फाइल्स भी शामिल है) को डिस्प्ले करता है।
7
एक HTML फ़ाइल सिलेक्ट करें और Open क्लिक करें: इससे HTML डॉक्यूमेंट नोटपैड में खुल जाता है। अब आप नोटपैड में HTML कोड को एडिट कर सकते हैं।
- वैकल्पिक रूप से, आप नोटपैड में एक नया HTML डॉक्यूमेंट बना सकते हैं।
8
HTML कोड को एडिट करें: नोटपैड में HTML को एडिट करने के लिए, आपको HTML सीखने की जरूरत पड़ेगी, ताकि आप उसे आसानी से एडिट कर सकें। आपके द्वारा एडिट किए जाने योग्य कॉमन एलीमेंट्स में, ये शामिल हैं।
- <!DOCTYPE html>: ये HTML डॉक्यूमेंट में सबसे ऊपर जाता हौ। ये वेब ब्राउज़र को बताता है कि ये एक HTML डॉक्यूमेंट है।
- <html></html>: ये टैग्स HTML डॉक्यूमेंट के सबसे ऊपर और सबसे नीचे जाते हैं। ये HTML कोड के शुरू और खत्म होने की जगह को दर्शाते हैं।
- <head></head>: ये टैग्स HTML डॉक्यूमेंट में सबसे ऊपर जाते हैं। ये दर्शाते हैं कि HTML डॉक्यूमेंट का हैड कहाँ से शुरू होता और कहाँ पर खत्म होता है। HTML डॉक्यूमेंट के हैड में ऐसी इन्फॉर्मेशन मौजूद होती हैं, जो वेब पेज पर नहीं दिखाई देती हैं। इसमें पेज टाइटल, मेटाडेटा और CSS शामिल हैं।
- <title>Page Title</title>: ये टैग्स पेज के टाइटल को दर्शाते हैं। टाइटल HTML डॉक्यूमेंट के हैड में जाता है। पेज के टाइटल को इन दो टैग्स के बीच में टाइप करें।
- <body></body>: ये टैग्स HTML डॉक्यूमेंट की बॉडी के शुरू होने और खत्म होने की जगह को दर्शाते हैं। बॉडी वो जगह है, जहां सारे वेब पेज कंटेन्ट को लिखा जाता है। बॉडी को HTML डॉक्यूमेंट में हैड के बाद में लिखा जाता है।
- <h1>Headline Text</h1>: ये टैग्स हैडलाइन टैग्स तैयार करते हैं। "<h1>" और "</h1>" टैग्स के बीच का टेक्स्ट एक बड़े बोल्ड टेक्स्ट की तरह दिखता है। टेक्स्ट HTML डॉक्यूमेंट की बॉडी में जाता है।
- <p>Paragraph Text</p>: इन टैग्स का इस्तेमाल HTML डॉक्यूमेंट में पैराग्राफ टेक्स्ट बनाने के लिए किया जाता है। "<p>" और "</p>" के बीच में जाने वाला टेक्स्ट नॉर्मल साइज के टेक्स्ट की तरह दिखता है। टेक्स्ट HTML डॉक्यूमेंट की बॉडी में जाता है।
- <b>Bold Text</b>: इन टैग्स का इस्तेमाल बोल्ड टेक्स्ट बनाने में किया जाता है। "<b>" और "</b>" के बीच में जाने वाला टेक्स्ट बोल्ड टेक्स्ट की तरह दिखता है।
- <i>Italic Text</i>: इन टैग्स का इस्तेमाल इटैलिक टेक्स्ट बनाने के लिए किया जाता है। "<i>" और "</i>" के बीच में जाने वाला टेक्स्ट इटैलिक टेक्स्ट की तरह दिखता है।
- <a href="URL">Link text</a>: इस टैग का इस्तेमाल किसी दूसरी वैबसाइट को लिंक करने के लिए किया जाता है। आप जिस वेब एड्रेस को लिंक करना चाहते हैं, उसे कॉपी करें और जहां "URL" (कोटेशन मार्क्स के बीच में) लिखा हो, पर पेस्ट कर दें। "Link text" (कोटेशन मार्क्स की जरूरत नहीं है) की जगह पर लिंक के लिए टेक्स्ट होगा।
- <img src="image URL">: इस टैग का इस्तेमाल HTML का इस्तेमाल करके एक इमेज को पोस्ट करने के लिए किया जाता है। "image URL" की जगह पर इमेज के वेब एड्रेस को लिख दें।
क्लिक करें: ये स्क्रीन पर सबसे ऊपर मौजूद मेनू बार में होता है।
10
क्लिक करें: इससे एक डायलॉग बॉक्स खुल जाता है, जिसे आप आपकी फ़ाइल को सेव करने के लिए इस्तेमाल कर सकते हैं।
- फ़ाइल को मौजूदा नेम और फ़ाइल टाइप के साथ में सेव करने के लिए, बस "File" के नीचे के ड्रॉप-डाउन मेनू में Save पर क्लिक करें।
"All Files" को सिलेक्ट करने के लिए "Save as Type" के सामने के ड्रॉप-डाउन मेनू का इस्तेमाल करें।
फ़ाइल के लिए नाम टाइप करने के लिए "File Name" के सामने के बॉक्स का इस्तेमाल करें।
आप जब "File Name" बॉक्स में फ़ाइल के लिए एक नेम टाइप कर लेते हैं, फिर फ़ाइल नेम के आखिर में ".html" एक्सटैन्शन एड कर दें। इस एक्सटैन्शन के बिना, ये फ़ाइल को एक HTML फ़ाइल की बजाय एक .txt फ़ाइल के रूप में सेव कर देता है।
क्लिक करें: ये फ़ाइल को सेव कर देता है।

विधि 2

विधि 2 का 4:

मैक पर टेक्स्टएडिट इस्तेमाल करना (Using TextEdit on Mac)

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

ये मैक डेस्कटॉप के ऊपरी दाएँ कोने में होता है। ये एक सर्च बार को डिस्प्ले करता है।
ये आपके सर्च के परिणाम के साथ में मेल खाने वाले एप्स की एक लिस्ट को डिस्प्ले कर देता है।
क्लिक करें: ये सर्च रिजल्ट्स में सबसे ऊपर होता है। ये एक आइकॉन के सामने होता है, जो पेपर की एक शीट और एक पेन की तरह दिखता है।
क्लिक करें: टेक्स्टएडिट के खुलने पर ये स्क्रीन में सबसे ऊपर मेनू बार में मौजूद होता है।
क्लिक करें: ऐसा करने से एक फ़ाइल ब्राउज़र खुल जाता है, जिसे आप आपके मैक को नेविगेट करने और फाइल्स को खोलने के लिए इस्तेमाल कर सकते हैं।
HTML फाइल्स में एक एक्सटैन्शन होता है, जिसमें फ़ाइल नेम के बाद में ".html" एक्सटैन्शन होता है। एक HTML फ़ाइल पर जाने के लिए फ़ाइल ब्राउज़र का इस्तेमाल करें और उसे सिलेक्ट करने के लिए उस पर क्लिक करें। फिर HTML फ़ाइल को टेक्स्टएडिट में खोलने के लिए Open क्लिक करें।
7
HTML कोड को एडिट करें: आप HTML कोड को बनाते समय उसे एडिट करने के लिए टेक्स्टएडिट का इस्तेमाल कर सकते हैं। आपको HTML सीखने की जरूरत पड़ेगी, ताकि आप उसे अपने हाथ से एडिट कर सकें। कॉमन एलीमेंट्स, जिन्हें आप शामिल कर सकते हैं, में ये शामिल हैं।
- <!DOCTYPE html>: ये HTML डॉक्यूमेंट में सबसे ऊपर लिखा जाता है। ये वेब ब्राउज़र को बताता है कि ये एक HTML डॉक्यूमेंट है।
- <html></html>: ये टैग्स HTML डॉक्यूमेंट में सबसे ऊपर और नीचे लिखे जाते हैं। ये HTML कोड की शुरूआत और अंत की जगह को दर्शाते हैं।
- <head></head>: ये टैग्स HTML डॉक्यूमेंट में सबसे ऊपर जाते हैं। ये HTML डॉक्यूमेंट के हैड के शुरू होने और खत्म होने की जगह को दर्शाते हैं। HTML डॉक्यूमेंट के हैड में वो इन्फॉर्मेशन शामिल होती है, जो वेब पेज पर नहीं दिखाई देती हैं। इसमें पेज टाइटल, मेटाडेटा और CSS शामिल हैं।
- <title>Page Title</title>: ये टैग्स पेज के टाइटल को दर्शाते हैं। टाइटल HTML डॉक्यूमेंट के हैड में जाता है। पेज के टाइटल को इन दो टैग्स के बीच में टाइप करें।
- <body></body>: ये टैग्स HTML डॉक्यूमेंट की बॉडी के शुरू होने और खत्म होने की जगह को दर्शाते हैं। बॉडी वो जगह है, जहां सारे वेब पेज कंटेन्ट को लिखा जाता है। बॉडी को HTML डॉक्यूमेंट में हैड के बाद में लिखा जाता है।
- <h1>Headline Text</h1>: ये टैग्स हैडलाइन टैग्स तैयार करते हैं। "<h1>" और "</h1>" टैग्स के बीच का टेक्स्ट एक बड़े बोल्ड टेक्स्ट की तरह दिखता है। टेक्स्ट HTML डॉक्यूमेंट की बॉडी में जाता है।
- <p>Paragraph Text</p>: इन टैग्स का इस्तेमाल HTML डॉक्यूमेंट में पैराग्राफ टेक्स्ट बनाने के लिए किया जाता है। "<p>" और "</p>" के बीच में जाने वाला टेक्स्ट नॉर्मल साइज के टेक्स्ट की तरह दिखता है। टेक्स्ट HTML डॉक्यूमेंट की बॉडी में जाता है।
- <b>Bold Text</b>: इन टैग्स का इस्तेमाल बोल्ड टेक्स्ट बनाने में किया जाता है। "<b>" और "</b>" के बीच में जाने वाला टेक्स्ट बोल्ड टेक्स्ट की तरह दिखता है।
- <i>Italic Text</i>: इन टैग्स का इस्तेमाल इटैलिक टेक्स्ट बनाने के लिए किया जाता है। "<i>" और "</i>" के बीच में जाने वाला टेक्स्ट इटैलिक टेक्स्ट की तरह दिखता है।
- <a href="URL">Link text</a>: इस टैग का इस्तेमाल किसी दूसरी वैबसाइट को लिंक करने के लिए किया जाता है। आप जिस वेब एड्रेस को लिंक करना चाहते हैं, उसे कॉपी करें और जहां "URL" (कोटेशन मार्क्स के बीच में) लिखा हो, पर पेस्ट कर दें। "Link text" (कोटेशन मार्क्स की जरूरत नहीं है) की जगह पर लिंक के लिए टेक्स्ट होगा।
- <img src="image URL">: इस टैग का इस्तेमाल HTML का इस्तेमाल करके एक इमेज को पोस्ट करने के लिए किया जाता है। "image URL" की जगह पर इमेज के वेब एड्रेस को लिख दें।
क्लिक करें: ये स्क्रीन में सबसे ऊपर मौजूद मेनू बार में होता है।
9
क्लिक करें: ये "File" के नीचे मौजूद एक ड्रॉप-डाउन मेनू होता है ये एक HTML फ़ाइल को सेव कर देता है।
- फ़ाइल के नेम को बदलने के लिए, "File" ड्रॉप-डाउन मेनू में Rename पर क्लिक करें। स्क्रीन के सबसे ऊपर फ़ाइल के लिए एक नया नाम लिखें। पेज में सबसे ऊपर ".html" एक्सटैन्शन एड करना न भूलें।

विधि 3

विधि 3 का 4:

Dreamweaver का इस्तेमाल करना

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

1
Dreamweaver खोलें: Dreamweaver इसका आइकॉन, एक हरे स्क्वेर के जैसा दिखता है, जिस पर बीच में "Dw" लिखा होता है। Dreamweaver को खोलने के लिए विंडोज Start मेनू में या मैक के Application फोल्डर में आइकॉन को क्लिक करें।
- Adobe Dreamweaver के लिए एक सब्स्क्रिप्शन की जरूरत होती है। आप एक महीने में Rs.1,500 से शुरू होने वाली एक सब्स्क्रिप्शन को खरीद सकते हैं।
क्लिक करें: ये स्क्रीन में सबसे ऊपर मौजूद एक मेनू बार में होता है।
क्लिक करें: ये "File" के नीचे मौजूद एक ड्रॉप-डाउन मेनू होता है।
अपने कंप्यूटर पर एक HTML डॉक्यूमेंट को सिलेक्ट करने के लिए फ़ाइल ब्राउज़र का इस्तेमाल करें और उसे सिलेक्ट करने के लिए क्लिक करें। फिर निचले दाएँ कोने में Open क्लिक करें।
क्लिक करें: ये पेज में ऊपर मौजूद एक मिडिल टैब होता है। ये एक स्प्लिट स्क्रीन डिस्प्ले करता है, जिसमें नीचे एक HTML एडिटर और सबसे ऊपर एक प्रिव्यू स्क्रीन रहती है।^{[१]Xरिसर्च सोर्स}
6
HTML डॉक्यूमेंट को एडिट करें: HTML को एडिट करने के लिए HTML एडिटर का इस्तेमाल करें। आप Dreamweaver में HTML को जिस तरीके से एडिट करते हैं, वो नोटपैड या टेक्स्टएडिट में एडिट करने से अलग नहीं होता है। आप जब HTML टैग को टाइप करते हैं, तब मेल खाते HTML टैग्स के साथ में एक सर्च मेनू सामने आ जाएगा। आप HTML टैग को क्लिक करके उसके खुलने और बंद होने वाले टैग्स को इन्सर्ट कर सकते हैं। Dreamweaver चेक करके ये सुनिश्चित करेगा कि आपके सारे HTML एलीमेंट्स के लिए खुलने और बंद होने वाले टैग्स मौजूद हैं।
- वैकल्पिक रूप से, आप अपने HTML एडिटर में जहां पर HTML एलीमेंट इन्सर्ट करना चाहते हैं, वहाँ क्लिक कर सकते हैं और स्क्रीन में सबसे ऊपर मेनू बार में Insert क्लिक करे सकते हैं। आप जिस आइटम को इन्सर्ट करना चाहते हैं, उसे HTML कोड में ऑटोमेटिकली एड करने के लिए ड्रॉप-डाउन मेनू में सिलेक्ट करें।
क्लिक करें: जब आप HTML डॉक्यूमेंट की एडिटिंग कर सकें, स्क्रीन में सबसे ऊपर मौजूद मेनू बार में File क्लिक करें।
क्लिक करें: ये ड्रॉप-डाउन मेनू में File के नीचे होता है। ये आपके HTML डॉक्यूमेंट को सेव करता है।

विधि 4

विधि 4 का 4:

Kompozer इस्तेमाल करना

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

वेब ब्राउज़र में https://sourceforge.net/projects/kompozer/ पर जाएँ: आप पीसी या मैक पर किसी भी वेब ब्राउज़र का इस्तेमाल कर सकते हैं। ये Kompozer के लिए डाउनलोड पेज है। ये एक फ्री HTML (WYSIWYG) एडिटर है, जो विंडोज और मैक, दोनों पर काम करता है।
क्लिक करें: ये पेज में सबसे ऊपर मौजूद एक हरी बटन होती है। ये आपको एक अलग डाउनलोड पेज पर ले जाता है। 5 सेकंड की देर के बाद, आपका डाउनलोड शुरू हो जाएगा।
3
इंस्टॉल हुई फ़ाइल पर डबल क्लिक करें: बाई डिफॉल्ट आपकी डाउनलोड हुई फाइल्स को पीसी या मैक पर आपके "Downloads" फोल्डर पर पाया जा सकता है। आप चाहें तो Kompozer इंस्टॉलर को लॉंच करने के लिए अपने वेब ब्राउज़र में भी इन पर क्लिक कर सकते हैं। Kompozer को इंस्टॉल करने के लिए इन दिए हुए निर्देशों का पालन करें:
- विंडोज (Windows):
  - अगर आप से आपके इंस्टॉलर के द्वारा आपके सिस्टम पर बदलाव किए जाने की अनुमति देने का पूछा जाए, Yes क्लिक करें।
  - इंट्रो विंडोज में Next क्लिक करें।
  - "I accept the agreement" के सामने रेडियल बटन पर क्लिक करें और Next क्लिक करें।
  - डिफॉल्ट इंस्टॉल लोकेशन का इस्तेमाल करने के लिए Next क्लिक करें या एक अलग इंस्टॉल लोकेशन को सिलेक्ट करने के लिए Browse क्लिक करें।
  - Next क्लिक करें और फिर एक बार फिर से Next क्लिक करें।
  - Install क्लिक करें।
  - Finish क्लिक करें।
- मैक (Mac):
  - Kompozer इंस्टॉल फ़ाइल को डबल क्लिक करें।
  - KompoZer.app क्लिक करें।
  - ऊपरी बाएँ कोने में मौजूद एप्पल आइकॉन पर क्लिक करें।
  - System Preferences क्लिक करें।
  - Security and Privacy क्लिक करें।
  - General टैब क्लिक करें।
  - विंडो में सबसे नीचे Open Anyway क्लिक करें।
  - सामने आने वाली विंडो में Open क्लिक करें।
  - Kompozer आइकॉन को ड्रैग करके अपने डेस्कटॉप पर ले आएँ।
  - फाइंडर (Finder) ओपन करें।
  - Applications फोल्डर क्लिक करें।
  - Kompozer आइकॉन को ड्रैग करके डेस्कटॉप से Applications फोल्डर पर ले आएँ।
4
Kompozer ओपन करें: पीसी या मैक पर Kompozer को ओपन करने के लिए इन स्टेप्स को फॉलो करें
- विंडोज (Windows):
  - Windows Start मेनू क्लिक करें।
  - "Kompozer" टाइप करें
  - Kompozer आइकॉन पर डबल क्लिक करें।
- मैक (Mac):
  - ऊपरी दाएँ कोने पर मौजूद मैग्निफ़ाइंग ग्लास आइकॉन को क्लिक करें।
  - सर्च बार में "Kompozer" लिखें।
  - Kompozer.app पर डबल क्लिक करें।
क्लिक करें: ये एप में सबसे ऊपर मौजूद मेनू बार में होता है।
क्लिक करें: ये ड्रॉप-डाउन मेनू में "File" के नीचे मौजूद दूसरा विकल्प होता है। ऐसा करने से एक फ़ाइल ब्राउज़र ओपन हो जाता है, जिसे आप एक HTML फ़ाइल को ओपन करना सिलेक्ट करने के लिए इस्तेमाल कर सकते हैं।
इससे HTML फ़ाइल Kompozer में ओपन हो जाती है।
8
क्लिक करें: ये पेज में सबसे ऊपर मौजूद एक मिडिल टैब होता है। ये एक स्प्लिट स्क्रीन डिस्प्ले करता है, जिसमें नीचे एक HTML एडिटर और सबसे ऊपर एक प्रिव्यू स्क्रीन रहती है।
- आपको एप को एनलार्ज करने या बड़ा करने की जरूरत पड़ेगी, ताकि आपके पास में काम करने के लिए ज्यादा जगह रहे।
9
HTML डॉक्यूमेंट को एडिट करें: HTML सोर्स कोड स्क्रीन सबसे नीचे होती है, आप HTML को ठीक नोटपैड या टेक्स्टएडिट की तरह एडिट करने के लिए इस स्क्रीन का इस्तेमाल कर सकते हैं। आप चाहें तो इन स्टेप्स को फॉलो करके अपने HTML को एडिट करने के लिए प्रिव्यू स्क्रीन का इस्तेमाल कर सकते हैं:
- टेक्स्ट टाइप (जैसे कि हैडिंग, पैराग्राफ बगैरह) को सिलेक्ट करने के लिए ऊपरी दाएँ कोने में मौजूद ड्रॉप-डाउन मेनू का इस्तेमाल करें
- टेक्स्ट एड करने के लिए क्लिक करें और टाइप करें।
- बोल्ड, इटैलिक, टेक्स्ट अलाइनमेंट, इंडेंट या अपने टेक्स्ट की लिस्ट को एड करने के लिए स्क्रीन में सबसे ऊपर मौजूद पैनल में बटन का इस्तेमाल करें।
- टेक्स्ट कलर को चेंज करने के लिए स्क्रीन में सबसे ऊपर पैनल में कलर स्क्वेर को क्लिक करें।
- अपने HTML डॉक्यूमेंट में इमेज एड करने के लिए स्क्रीन में सबसे ऊपर मौजूद Image आइकॉन को क्लिक करें।
- अपने HTML डॉक्यूमेंट में एक लिंक एड करने के लिए एक चैनलिंक के जैसे दिखने वाले आइकॉन को क्लिक करें।
आइकॉन क्लिक करें: जब आप आपके डॉक्यूमेंट में बदलाव कर लें, फिर स्क्रीन में सबसे ऊपर मौजूद Save आइकॉन को क्लिक करें। ये उस आइकॉन के नीचे होता है, जो एक फ्लॉपी डिस्क की तरह दिखता है। ये आपके द्वारा किए काम को सेव कर देता है।