विषय

• कदम
• भाग 1 का 2: HTML मूल बातें सीखना
• 2 का भाग 2: उन्नत HTML
• टिप्स
• चेतावनी
• आपको किस चीज़ की जरूरत है

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

कदम

भाग 1 का 2: HTML मूल बातें सीखना

1. 1 एक HTML दस्तावेज़ खोलें। अधिकांश टेक्स्ट एडिटर (विंडोज के लिए नोटपैड या नोटपैड ++, मैक के लिए टेक्स्टएडिट, जीएनयू / लिनक्स के लिए जीएडिट) का उपयोग एचटीएमएल फाइल बनाने के लिए किया जा सकता है। एक नया दस्तावेज़ बनाएं और फ़ाइल → वेब पेज प्रारूप में इस रूप में सहेजें का उपयोग करके इसे सहेजें, या फ़ाइल एक्सटेंशन को .doc, .rtf या किसी अन्य एक्सटेंशन के बजाय .html या .htm में बदलें।
   • आपको एक चेतावनी प्राप्त हो सकती है कि फ़ाइल आरटीएफ प्रारूप के बजाय "सादे पाठ" के रूप में सहेजी जाएगी, या स्वरूपण और छवियों को सहेजा नहीं जाएगा। यह ठीक है; HTML के लिए इन विकल्पों की आवश्यकता नहीं है।
2. 2 ब्राउज़र में जेनरेट की गई फाइल को खोलें। रिक्त फ़ाइल सहेजें, इसे अपने कंप्यूटर पर ढूंढें और इसे खोलने के लिए डबल-क्लिक करें। ब्राउज़र में एक खाली पेज खुल जाना चाहिए। अगर ऐसा नहीं होता है, तो फ़ाइल को अपने ब्राउज़र के पता बार में खींचें. जैसे ही आप HTML फ़ाइल को संपादित करते हैं, आप परिवर्तनों को देखने के लिए इस पृष्ठ को रीफ्रेश कर सकते हैं।
   • कृपया ध्यान दें कि इस तरह आप इंटरनेट पर वेबसाइट नहीं बना रहे हैं। अन्य लोगों के पास इस पृष्ठ तक पहुंच नहीं होगी, और आपको अपने स्थानीय पृष्ठ का परीक्षण करने के लिए इंटरनेट कनेक्शन की आवश्यकता नहीं है। ब्राउज़र केवल HTML कोड की व्याख्या करता है, इसे "पढ़ना" जैसे कि यह एक वेबसाइट थी।
3. 3 समझें कि मार्कअप टैग क्या हैं। नियमित पाठ के विपरीत, टैग पृष्ठ पर प्रकट नहीं होते हैं। इसके बजाय, वे ब्राउज़र को पृष्ठ और उसकी सामग्री को प्रदर्शित करने का तरीका बताते हैं। "ओपनिंग" टैग में निर्देश होते हैं। उदाहरण के लिए, यह ब्राउज़र को बता सकता है कि टेक्स्ट को इस प्रकार प्रदर्शित किया जाना चाहिए बोल्ड... उस ब्राउज़र को दिखाने के लिए जहां निर्देश समाप्त होता है, उसे "अंत" टैग की भी आवश्यकता होती है। इस उदाहरण में, प्रारंभ और समाप्ति टैग के बीच का पाठ बोल्ड में प्रदर्शित किया जाएगा। टैग असमान संकेतों के अंदर लिखे जाते हैं, लेकिन अंत टैग फॉरवर्ड स्लैश से शुरू होता है।
   • उद्घाटन टैग असमानता के संकेतों के बीच लिखा गया है: उद्घाटन टैग>
   • क्लोजिंग टैग में, टैग डिस्क्रिप्टर (नाम) से पहले एक फॉरवर्ड स्लैश रखा जाता है: /अंत टैग>
   • यह जानने के लिए पढ़ें कि विभिन्न टैग कैसे उपयोग किए जाते हैं। इस चरण के लिए, आपको केवल रिकॉर्डिंग प्रारूप को याद रखना होगा। टैग असमानता के संकेतों के बीच लिखे जाते हैं:> और />
   • कुछ ट्यूटोरियल में, HTML टैग्स को एलिमेंट कहा जाता है, और ओपनिंग और क्लोजिंग टैग्स के बीच के टेक्स्ट को एलिमेंट कंटेंट कहा जाता है।
4. 4 संपादक में html> टैग टाइप करें। प्रत्येक HTML फ़ाइल एक टैग से शुरू होनी चाहिए एचटीएमएल> और एक टैग के साथ समाप्त करें / एचटीएमएल>... ये टैग ब्राउज़र को बताते हैं कि टैग के बीच की सभी सामग्री HTML में है। इन टैग्स को अपने दस्तावेज़ में जोड़ें:
   • अक्सर HTML फ़ाइलें लाइन से शुरू होती हैं डॉक्टरेट html>जिसका अर्थ है कि ब्राउज़र को संपूर्ण फ़ाइल को HTML के रूप में पहचानना होगा। यह पंक्ति आवश्यक नहीं है, लेकिन यह संगतता समस्याओं का निवारण करने में आपकी सहायता कर सकती है।
   • डायल एचटीएमएल> दस्तावेज़ के शीर्ष पर।
   • एकाधिक रिक्त रेखाएँ बनाने के लिए कई बार Enter या Return दबाएँ, फिर टाइप करें / एचटीएमएल>
   • उसे याद रखो पूरा इस लेख में आप जो कोड बनाएंगे, उसे इन दो टैगों के बीच लिखना होगा।
5. 5 फ़ाइल में एक शीर्ष> अनुभाग बनाएँ। html> और / html> टैग के बीच एक ओपनिंग टैग बनाएं सिर> और समापन टैग / सिर>... उनके बीच कुछ रिक्त रेखाएँ जोड़ें। हेड> और / हेड> टैग के बीच लिखी गई सामग्री पेज पर ही प्रदर्शित नहीं होती है। इन चरणों का पालन करें और आप देखेंगे कि यह टैग किस लिए है:
   • सिर के बीच> और / सिर> टैग, लिखें शीर्षक> तथा / शीर्षक>
   • शीर्षक> और / शीर्षक> टैग के बीच, लिखें एचटीएमएल कैसे सीखें - विकिहोउ.
   • अपने परिवर्तन सहेजें और फ़ाइल को ब्राउज़र में खोलें (या यदि फ़ाइल पहले से खुली है तो पृष्ठ को ताज़ा करें)। पता बार के ऊपर पृष्ठ शीर्षक में दिखाई देने वाला पाठ देखें?
6. 6 एक बॉडी बनाएं> सेक्शन। इस उदाहरण के अन्य सभी टैग और टेक्स्ट मुख्य भाग में लिखे गए हैं, जिनकी सामग्री पृष्ठ पर प्रदर्शित होती है। बाद में क्लोजिंग टैग / हेड>, लेकिन इससे पहले टैग / html> टैग जोड़ें शरीर> तथा / शरीर>... इस लेख के बाकी हिस्सों के लिए, बॉडी सेक्शन के साथ काम करें। आपकी फ़ाइल कुछ इस तरह दिखनी चाहिए:
   एचटीएमएल>
   सिर>
   शीर्षक> HTML कैसे सीखें - विकिहाउ / शीर्षक>
   / सिर>
   शरीर>
   / शरीर>
   / एचटीएमएल>
7. 7 विभिन्न शैलियों का उपयोग करके टेक्स्ट जोड़ें। पृष्ठ पर वास्तविक सामग्री जोड़ने का समय आ गया है! बॉडी टैग के बीच आप जो कुछ भी लिखते हैं वह ब्राउज़र में रीफ्रेश होने के बाद पेज पर प्रदर्शित होगा। प्रयोग नहीं करें प्रतीक या >क्योंकि ब्राउज़र सामग्री को टेक्स्ट के बजाय टैग के रूप में व्याख्या करने का प्रयास करेगा। लिखना नमस्कार! (या जो भी आपको पसंद हो), फिर इन टैग्स को टेक्स्ट में जोड़ने का प्रयास करें और देखें कि क्या होता है:
   • उन्हें> सभी को नमस्कार! / उन्हें> टेक्स्ट को "इटैलिकाइज़्ड" बनाता है: नमस्कार!
   • मजबूत> सभी को नमस्कार! / मजबूत> पाठ को "बोल्ड" बनाता है: नमस्कार!
   • s> सभी को नमस्कार! / s> स्ट्राइकथ्रू टेक्स्ट: नमस्कार!
   • समर्थन> सभी को नमस्कार! / समर्थन> फ़ॉन्ट को सुपरस्क्रिप्ट के रूप में प्रदर्शित करता है:
   • उप> सभी को नमस्कार! / उप> फ़ॉन्ट को सबस्क्रिप्ट के रूप में प्रदर्शित करता है: _{नमस्कार!}
   • अलग-अलग टैग एक साथ आज़माएं. यह कैसा दिखेगा उन्हें> मजबूत> सभी को नमस्कार! / मजबूत> / उन्हें>?
8. 8 पाठ को पैराग्राफ में विभाजित करें। यदि आप HTML फ़ाइल में टेक्स्ट की एक से अधिक पंक्तियाँ लिखने का प्रयास करते हैं, तो आप देखेंगे कि ब्राउज़र में लाइन ब्रेक प्रदर्शित नहीं होते हैं। टेक्स्ट को पैराग्राफ में विभाजित करने के लिए, आपको टैग जोड़ने होंगे:
   • p> यह एक अलग पैराग्राफ है। / p>
   • इस वाक्य के बाद इस लाइन के शुरू होने से पहले एक लाइन ब्रेक br> आता है।
     यह पहला टैग है जिसे अंत टैग की आवश्यकता नहीं है। इन टैगों को "खाली" टैग कहा जाता है।
   • अनुभाग शीर्षक दिखाने के लिए शीर्षक बनाएँ:
     h1> शीर्षक पाठ / h1>: सबसे बड़ा शीर्षक
     h2> शीर्षक पाठ / h2> (द्वितीय स्तर का शीर्षक)
     h3> शीर्षक पाठ / h3> (तीसरे स्तर का शीर्षक)
     h4> शीर्षक पाठ / h4> (चौथे स्तर का शीर्षक)
     h5> शीर्षक पाठ / h5> (सबसे छोटा शीर्षक)
9. 9 सूचियां बनाना सीखें। वेब पेज पर सूचियां बनाने के कई तरीके हैं। नीचे दिए गए विकल्पों को आज़माएं और तय करें कि आपको कौन सा सबसे अच्छा लगता है। ध्यान दें कि पूरी सूची के लिए टैग की एक जोड़ी की आवश्यकता होती है (उदाहरण के लिए, बुलेटेड सूची के लिए उल> और / उल>), और प्रत्येक सूची आइटम को टैग की एक अलग जोड़ी के साथ हाइलाइट किया जाता है, उदाहरण के लिए, li> और / ली>.
   • बुलेटेड सूची:
     उल> ली> पहली पंक्ति / ली> ली> दूसरी पंक्ति / ली> ली> और इसी तरह / ली> / उल>
   • क्रमांकित सूची:
     ol> ली> एक / ली> ली> दो / ली> ली> तीन / ली> / ol>
   • परिभाषा सूची:
     dl> dt> कॉफ़ी / dt> dd> - गर्म पेय / dd> dt> नींबू पानी / dt> dd> - कोल्ड ड्रिंक / dd> / dl>
10. 10 का उपयोग कर पृष्ठ को लेआउट करें कतार टूट जाती है, क्षैतिज रेखाएं, और चित्रों. पेज पर टेक्स्ट के अलावा कुछ और जोड़ने का समय आ गया है। निम्नलिखित टैग आज़माएं या अधिक जानकारी के लिए लिंक का अनुसरण करें। आप जिस छवि को पोस्ट करना चाहते हैं उसका लिंक बनाने के लिए ऑनलाइन होस्टिंग सेवा का उपयोग करें:
    • क्षैतिज रेखा: घंटा>
    • चित्र सम्मिलित करें: img src = "छवि लिंक">
11. 11 लिंक जोड़ें। आप अन्य पृष्ठों और साइटों के लिए हाइपरलिंक बनाने के लिए इन टैग का उपयोग कर सकते हैं, लेकिन चूंकि आपके पास अभी तक कोई वेबसाइट नहीं है, इसलिए अब आप सीखेंगे कि एंकर लिंक कैसे बनाएं, यानी किसी पृष्ठ पर विशिष्ट स्थानों के लिंक:
    • a> टैग के साथ एक एंकर बनाएं जहां आप पेज पर लिंक करना चाहते हैं। एक स्पष्ट और यादगार नाम के साथ आओ:
      
      एक नाम = "टिप्स"> जिस टेक्स्ट से आप लिंक कर रहे हैं। / ए>
    • किसी बाहरी संसाधन से संबंधित लिंक या लिंक बनाने के लिए href> टैग का उपयोग करें:
      
      a href = "पेज का लिंक या पेज के भीतर एंकर का नाम"> टेक्स्ट या इमेज जो लिंक के रूप में काम करेगा। / a>
    • किसी अन्य पेज पर किसी रिश्तेदार लिंक से लिंक करने के लिए, मुख्य लिंक और एंकर के नाम के बाद # चिन्ह जोड़ें। उदाहरण के लिए, https://en.wikihow.com/learn-HTML#Tips इस पेज के टिप्स सेक्शन से लिंक करता है।

2 का भाग 2: उन्नत HTML

1. 1 गुणों को जानें। टैग के अंदर विशेषताएँ लिखी जाती हैं, जो अतिरिक्त जानकारी का संकेत देती हैं। विशेषताओं का प्रारूप इस प्रकार है: नाम = "मूल्य", कहाँ पे शीर्षक एक विशेषता को परिभाषित करता है (उदाहरण के लिए, रंग एक रंग विशेषता के लिए), और मान इसके मूल्य को इंगित करता है (उदाहरण के लिए, लाल लाल के लिए)।
   • विशेषताएँ वास्तव में HTML मूलभूत बातों पर पिछले अनुभाग में उपयोग की गई हैं। Img> टैग विशेषता का उपयोग करता है एसआरसी, रिश्तेदार लिंक एंकर विशेषता का उपयोग करते हैं नामऔर लिंक विशेषता का उपयोग करते हैं href... जैसा कि आप पहले ही देख चुके हैं, सभी विशेषताएँ प्रारूप में लिखी जाती हैं ___='___’.
2. 2 HTML तालिकाओं के साथ प्रयोग करें। तालिका के निर्माण में विभिन्न टैगों का उपयोग शामिल है। आप प्रयोग कर सकते हैं, या अधिक विस्तृत निर्देश पढ़ सकते हैं।
   • तालिका टैग बनाएं:टेबल> / टेबल>
   • तालिका में प्रत्येक पंक्ति की सामग्री को टैग में संलग्न करें: टीआर>
   • कॉलम शीर्षक टैग द्वारा परिभाषित किया गया है: वें>
   • बाद की पंक्तियों में सेल: टीडी>
   • इन टैग का उपयोग करने का एक उदाहरण:
     
     तालिका> tr> th> कॉलम 1: महीना / th> th> कॉलम 2: बचत / th> / tr> tr> td> जनवरी / td> td> 5000 रूबल / td> / tr> / तालिका>
3. 3 अतिरिक्त हेड सेक्शन टैग सीखें। आप पहले ही हेड> टैग सीख चुके हैं जो हर एचटीएमएल फाइल की शुरुआत में आता है। शीर्षक> टैग के अलावा, इस अनुभाग के लिए अन्य टैग भी हैं:
   • मेटा टैग जिसमें शामिल हैं मेटाडाटासाइट को इंडेक्स करने के लिए सर्च इंजन द्वारा उपयोग किया जाता है। अपनी साइट को खोज इंजन में खोजना आसान बनाने के लिए, एक या अधिक प्रारंभिक मेटा> टैग का उपयोग करें (समापन टैग की आवश्यकता नहीं है)।प्रति टैग एक विशेषता और एक मान का उपयोग करें: मेटा नाम = "विवरण" सामग्री = "पृष्ठ विवरण">; या मेटा नाम = "कीवर्ड" सामग्री = "अल्पविराम से अलग किए गए कीवर्ड">
   • लिंक> टैग जो तीसरे पक्ष की फाइलों की ओर इशारा करते हैं, जैसे स्टाइल शीट (सीएसएस), जो एक अलग प्रकार के एन्कोडिंग का उपयोग करके बनाई गई हैं और आपको रंग, टेक्स्ट संरेखण और कई अन्य सुविधाओं का उपयोग करके HTML पृष्ठ को बदलने की अनुमति देती हैं।
   • स्क्रिप्ट> टैग का उपयोग जावास्क्रिप्ट फाइलों को पेज पर अटैच करने के लिए किया जाता है। इन फ़ाइलों को पृष्ठ को अंतःक्रियात्मक रूप से संशोधित करने के लिए आवश्यक है (उपयोगकर्ता कार्यों के जवाब में)।
4. 4 अन्य साइटों के HTML कोड के साथ प्रयोग करें। अन्य वेब पेजों के स्रोत कोड को देखना HTML सीखने का एक शानदार तरीका है। आप पृष्ठ पर राइट क्लिक कर सकते हैं और अपने ब्राउज़र के शीर्ष मेनू से स्रोत देखें या कुछ इसी तरह का चयन कर सकते हैं। यह पता लगाने की कोशिश करें कि एक अपरिचित टैग क्या करता है, या इसके बारे में जानकारी के लिए इंटरनेट पर खोज करें।
   • हालांकि आप अन्य लोगों की साइटों को संपादित नहीं कर सकते हैं, आप बाद में टैग के साथ प्रयोग करने के लिए स्रोत कोड को अपनी फ़ाइल में कॉपी कर सकते हैं। कृपया ध्यान दें कि सीएसएस मार्कअप उपलब्ध नहीं हो सकता है और रंग और स्वरूपण भिन्न दिख सकते हैं।
5. 5 अधिक विस्तृत मार्गदर्शिकाएँ खोजना प्रारंभ करें। इंटरनेट पर HTML टैग्स को समर्पित कई साइटें हैं, जैसे W3Schools या HTMLbook। बिक्री पर कागज़ की किताबें भी हैं, लेकिन मानकों में बदलाव और विकसित होने पर नवीनतम संस्करण खोजने का प्रयास करें। बेहतर अभी तक, आपकी साइट के लेआउट और रूप-रंग पर अधिक नियंत्रण रखने के लिए मास्टर CSS। CSS सीखने के बाद, वेब डिज़ाइनर आमतौर पर JavaScript सीखते हैं।

टिप्स

• नोटपैड ++ नियमित नोटपैड के समान एक बेहतरीन मुफ्त प्रोग्राम है, लेकिन आप अपने कोड को अपने ब्राउज़र में ऑनलाइन सहेज और परीक्षण कर सकते हैं। (यह लगभग किसी भी भाषा का समर्थन करता है - एचटीएमएल, सीएसएस, पायथन, जावास्क्रिप्ट, और इसी तरह।)
• नेट पर कुछ सरल पृष्ठ खोजें, कोड को अपने कंप्यूटर में सहेजें और उसके साथ प्रयोग करें। पाठ को स्थानांतरित करने, फ़ॉन्ट बदलने, छवियों को बदलने का प्रयास करें - जो भी हो!
• आप एक नोटबुक रख सकते हैं जहां आप टैग लिखते हैं ताकि आप उन्हें हमेशा हाथ में रखें। आप इस पेज को प्रिंट भी कर सकते हैं और इसका संदर्भ ले सकते हैं।
• जब आप कोड लिखते हैं, तो इसे ध्यान से करें ताकि आप और अन्य लोग इसे समझ सकें। उपयोग करें! - यहां टिप्पणी डालें -> HTML टिप्पणियों के लिए: वे पृष्ठ पर दिखाई नहीं देंगे, लेकिन कोड दस्तावेज़ में दिखाई देंगे।
• XML और RSS लोकप्रियता प्राप्त कर रहे हैं। एक अनुभवहीन उपयोगकर्ता के लिए XML और RSS तकनीकों वाले पृष्ठों के लिए कोड को पढ़ना और समझना अधिक कठिन होता है, लेकिन ये उपकरण काफी उपयोगी होते हैं।
• HTML में मार्कअप टैग केस-असंवेदनशील होते हैं, लेकिन हम मानकीकरण और XHTML संगतता दोनों के लिए केवल लोअरकेस अक्षरों (जैसा कि इस आलेख में उदाहरणों में है) का उपयोग करने की सलाह देते हैं।

चेतावनी

• कुछ टैग पिछले कुछ वर्षों में उपयोग से बाहर हो गए हैं और उन्हें नए लोगों द्वारा प्रतिस्थापित किया गया है जो समान या कुछ अतिरिक्त प्रभाव देते हैं।
• यदि आप अपने पृष्ठ का परीक्षण करना चाहते हैं, तो W3 साइट पर जाएं और आधुनिक HTML आवश्यकताओं की जांच करें। HTML मानक समय के साथ बदलते हैं, और कुछ टैग को नए टैग से बदल दिया जाता है जो आधुनिक ब्राउज़र में बेहतर काम करते हैं।

आपको किस चीज़ की जरूरत है

• एक टेक्स्ट एडिटर जैसे नोटपैड (विंडोज) या टेक्स्टएडिट (मैक)
• कागज / नोटपैड (आवश्यक नहीं)
• HTML संपादक जैसे Notepad++ (Windows) या TextWrangler (Mac) (आवश्यक नहीं)