विषय

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

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

कदम बढ़ाने के लिए

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

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

भाग 2 का 2: उन्नत HTML सीखना

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

टिप्स

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

चेतावनी

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

नेसेसिटीज़

• एक वर्ड प्रोसेसिंग प्रोग्राम, जैसे नोटपैड (विंडोज) या टेक्स्ट एडिटर (मैक)।
• कागज या नोटबुक की एक शीट (ऐच्छिक)
• एक प्रोग्राम विशेष रूप से HTML लिखने के लिए डिज़ाइन किया गया है, जैसे कि विंडोज के लिए नोटपैड ++ या मैक के लिए टेक्स्टवंगलर (ऐच्छिक)