कैसे HTML सीखें

HTML Hyper Text Markup Language का संक्षिप्त नाम है, और यह एक कोड या एक भाषा है जिसका उपयोग वेबसाइट बनाने में किया जाता है। यदि आप ने पहले कभी भी कोडिंग नहीं की है, तब आप को यह चुनौतीपूर्ण लग सकता है, फिर भी आप को इस की कोशिश करने के लिए एक साधारण टेक्स्ट एडिटिंग एप्लीकेशन (text editing application) और इंटरनेट ब्राउज़र की आवश्यकता होगी। कुछ HTML ऑनलाइन बाज़ार (online forum) में बदलाव, ऑनलाइन प्रोफाइल में बदलाव या विकीहाउ (How.com.vn) लेखों में उपयोग किए जाते हैं, जिन्हें आप आसानी से पहचान सकते हैं। इंटरनेट का उपयोग करने वालों के लिए HTML एक उपयोगी टूल (tool) है, और इस की मूल बातें सीखने में जितना आप सोच रहे हैं, आप को उस से बहुत ही कम समय लगेगा।

विधि 1

विधि 1 का 2:

बेसिक HTML

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

1
HTML डॉक्यूमेंट (document) खोलें: बहुत से टेक्स्ट एडिटिंग प्रोग्राम HTML दस्तावेज़ लिखने के काम आते हैं जिनमें, विंडोज़ (Windows) के लिए नोटपेड (notepad) या माइक्रोसॉफ्ट वर्ड (microsoft Word), और Mac के लिए TextEdit शामिल हैं। एक नया दस्तावेज़ खोलें और इसे एक "Web Page" के रूप में सहेजने के लिए मेनू में सबसे ऊपर स्थित बटन File → Save As का उपयोग करें या फिर दस्तावेज़ के प्रकार (file extension) को ".doc" या ".rtf" या अन्य किसी भी प्रकार से बदल कर ".html" या ".htm" में बदल दें।
- आप को एक संकेत मिल सकता है कि आप का दस्तावेज़ "rich text" के बदले "plain text" में बदल जाएगा या फिर विशेष फ़ॉर्मेट और चित्रों (images) को सही ढंग से नहीं सहेजा जाएगा। ऐसा होना ठीक है; क्योंकि HTML दस्तावेज़ इन विकल्पो का उपयोग नहीं करते हैं।
- ".html" और ".htm" में कोई भी अंतर नही है। दोनो ही सही हैं। ^{[१]Xरिसर्च सोर्स}
2
इंटरनेट ब्राउज़र की मदद से अपने दस्तावेज़ को देखें: अपने रिक्त (blank) दस्तावेज़ को सहेज लें, फिर उस दस्तावेज़ के आइकान (icon) को अपने कंप्यूटर पर पाएँ और इसे खोलने के लिए इस पर दो बार क्लिक (double click) करें। यह आप के ब्राउज़र पर एक रिक्त वेब पेज (web page) के रूप में खुल जाएगा। यदि ऐसा नहीं होता है तो, उस दस्तावेज़ के आइकान को अपने URL के बार (address) पर खींच कर ले जाएँ। आप इस ट्यूटोरियल के साथ, अपने HTML दस्तावेज़ में बदलाव करने के बाद, अपने वेब पेज में हुए परिवर्तनों को पेज पर वापस जा के जाँच सकते हैं।
- इस बात का ध्यान रखें कि इस से वास्तव में किसी ऑनलाइन वेबसाइट का निर्माण नहीं होगा। इसे अन्य व्यक्ति नहीं पा सकेंगे और इसे जाँचने के लिए आप को इंटरनेट सुविधा की भी ज़रूरत नहीं होगी। यद्यपि यह एक वेबसाइट ही है लेकिन यह सिर्फ़ आप के HTML दस्तावेज़ को पढ़ने के लिए ब्राउज़र का इस्तेमाल करेगा।
3
मार्कअप (markup tag) टैग को समझें: वेब पेज पर मार्क अप टैग सामान्य रूप से नज़र नहीं आते हैं। बल्कि ये आप के ब्राउज़र को निर्देश देते है कि पेज को कैसे और क्या दिखाना है। "start tag" में निर्देश होते हैं। उदाहरण के लिए, यह आप के ब्राउज़र को पेज पर उपस्थित टेक्स्ट को बोल्ड (bold) में दिखाएगा। ब्राउज़र को समझाने के लिए कि कहाँ पर निर्देशों का पालन करना है आप को एक "end tag" की ज़रूरत होगी: इस उदाहरण में, start tag और के बीच का सारा टेक्स्ट बोल्ड (bold) हो जाएगा। end tag को एंगल ब्रेकेट (angle bracket) में लिखें, लेकिन इसकी शुरुआत में पहले ब्रेकेट के बाद slash (/) का प्रयोग करें।
- start tags को एंगल ब्रेकेट (angle bracket) के बीच में लिखें: <start tag यहाँ होगा>
- end tag को एंगल ब्रेकेट (angle bracket) के बीच में लिखें, लेकिन पहले ब्रेकेट के बाद स्लेश (/) का प्रयोग करें: </end tag यहाँ होगा>
- functional मार्कअप टैग सीखने के लिए आगे पढ़ें। इस चरण के लिए आप को सिर्फ़ लिखे जाने वाले मूल प्रारूप, जो कि : < > और </ > हैं, को याद रखने की ज़रूरत है
- यदि आप इस के साथ ही किसी अन्य HTML ट्यूटोरियल का भी उपयोग कर रहे हैं, तो हो सकता है कि उसमें उन्होंने टैग के स्थान पर "एलिमेंट (element)" और स्टार्ट टैग और एंड टैग के बीच के टेक्स्ट के लिए "एलिमेंट कंटेंट (element content)" शब्द का प्रयोग किया हो।
4
पहला <html> टैग लिखें: हर एक html दस्तावेज़ एक <html> टैग के साथ शुरू होता है और </html> टैग के साथ ख़त्म होता है। इन टैग से ब्राउज़र को यह जानने में आसानी होती है कि इन टैग के बीच में लिखा सब कुछ HTML है। अपने दस्तावेज़ में इन टैग का इस्तेमाल करें:
- अपने दस्तावेज़ में सबसे ऊपर <html> लिखें।
- लिखने के लिए कुछ जगह प्राप्त करने के लिए बटन enter या return का उपयोग करें, और फिर </html> लिखें।
- इन दो टैग के बीच में कुछ लिखने के लिए इस ट्यूटोरियल की मदद लें।
5
अपने दस्तावेज़ का <head> भाग लिखें: <html> और </html> टैग के बीच में, <head> स्टार्ट टैग लिखें और एक </head> एंड टैग लिखें। टैग के बीच में लिखने के लिए कुछ जगह पाएँ। इन head टैग के बीच में लिखा हुआ सबकुछ वास्तव में पेज पर अपने आप दिखाई नहीं देगा। यह जानने के लिए कि यह कहाँ पर दिखता है निम्नलिखित का उपयोग करें:
- <head> और </head> टैग के बीच में, <title> और </title> लिखें।
- <title> और </title> टैग के बीच में, How to Learn HTML - How.com.vn लिखें।
- दस्तावेज़ को सहेजें और इसे एक ब्राउज़र पर खोलें (या फिर यदि यह पहले से ही ब्राउज़र पर खुला हुआ है तो दस्तावेज़ सहेजने के बाद ब्राउज़र पेज को refresh करें)। आपने जो लिखा है क्या आप उसे अपने ब्राउज़र के ऊपर, एड्रेस बार के ऊपर देख पाते है?
6
<body> भाग का निर्माण करें: इस शुरुआती दस्तावेज़ में लिखा हुआ सबकुछ body भाग में जाएगा और, वास्तव में यह वेब पेज पर भी दिखेगा। </head> एंड टैग के बाद, लेकिन </html> टैग के पहले, <body> और </body> लिखें। अब इस ट्यूटोरियल से आप जो भी लिखेंगे सब इस body टैग के बीच में ही लिखेंगे। अब आप के पास एक ऐसा दस्तावेज़ होगा (बुलेट पॉइंट पर ध्यान ना दें):
- <html>
- <head>
- <title>How to Learn HTML - How.com.vn</title>
- </head>
- <body>
- </body>
- </html>
7
टेक्स्ट में विभिन्न शैलियाँ (style) जोड़ें: अब ऐसा कुछ लिखने का समय आ गया है जिसे आप वास्तव में वेब पेज पर देख सकेंगे! body टैग में लिखा हुआ सब कुछ आप के HTML दस्तावेज़ को सहेजने के बाद और ब्राउज़र को refresh करने के बाद आप के ब्राउज़र पर दिखेगा। < या > प्रतीकों का प्रयोग कर के कुछ भी ना लिखें, क्योंकि आप का ब्राउज़र, बाद में इसे सामान्य टेक्स्ट की जगह पर HTML निर्देश समझने की कोशिश करेगा। Hello world! (या जो आप को पसंद हो) लिखने की कोशिश करें, और फिर इन नये टेग्स (tags) का उपयोग करें और देखें क्या होता है:
- <em>Hello world!</em> यह आप को "emphasized text:" Hello world! के रूप में दिखाएगा।
- <strong>Hello world!</strong> यह आप को "strong text:" Hello world! के रूप में दिखाएगा।
- <s>Hello world!</s>यह आप को strikethrough: ~~Hello world!~~ के रूप में दिखाएगा।
- <sup>Hello world!</sup> यह आप को superscript: ^{Hello world!} के रूप में दिखाएगा।
- <sub>Hello world!</sub> यह आप को subscript: _{Hello world!} के रूप में दिखाएगा।
- इन संयोजनों का प्रयास करें: यह <em><strong>Hello world!</strong></em> कैसा दिखता है?
8
अपने टेक्स्ट को अनुच्छेद (paragraph) में विभाजित करें: यदि आप अपने HTML दस्तावेज़ में बहुत सी पंक्तियाँ लिखना चाहते हैं, तो आप यह अनुभव करेंगे कि यह पंक्ति विभाजन आप के ब्राउज़र पर नहीं दिखेगा। आप को अपने आप ही इन्हें कोड करना होगा:
- <p>यह एक अनुच्छेद (paragraph) है।</p>
- इस वाक्य के बाद एक पंक्ति विराम (line break) है। <br>वाक्य की शुरुआत में उपयोग करें।
  यह एक ऐसा पहला टैग आपने देखा होगा जिस को end tag की ज़रूरत नहीं है! ये सब "रिक्त टैग (empty tags)" कहलाए जाते हैं।
- अनुभाग का नाम दर्शाने के लिए शीर्षक बनाएँ:
  <h1>शीर्षक</h1>:सबसे बड़ा शीर्षक
  <h2>शीर्षक </h2>(दूसरे स्तर का शीर्षक)
  <h3>शीर्षक</h3> (तीसरे स्तर का शीर्षक)
  <h4>शीर्षक</h4> (चौथे स्तर का शीर्षक)
  <h5>शीर्षक</h5> (सबसे छोटा शीर्षक)
9
सूची (list) बनाना सीखें: वेब पेज (webpage) पर सूचियाँ बनाने के बहुत से अलग-अलग तरीके हैं। निम्नलिखित कोड का प्रयोग करें और देखें आप को कौन सा पसंद आता है। ध्यान रखें कि टैग की एक जोड़ी ही पूरी सूची पर काम करती हैं ( जैसे कि <ul> और </ul> टैग का उपयोग "अव्यवस्थित सूची (unordered list)" के लिए होता है), जबकि अलग अलग वस्तुओं के लिए एक दूसरे टैग की जोड़ी का प्रयोग करते हैं, जैसे कि <li>और </li>।
- bulleted list बनाने के लिए इस कोड का उपयोग करें:
  <ul><li>एक वस्तु</li><li>अन्य वस्तु</li><li>कोई और अन्य वस्तु</li></ul>
- या इस कोड का प्रयोग क्रमांकित सूचियाँ (numbered lists) बनाने के लिए करें:
  <ol><li>पहली वस्तु </li><li> दूसरी वस्तु </li><li> तीसरी वस्तु </li></ol>
- या इस कोड का प्रयोग शर्तों की सूचियाँ (defining terms) बनाने के लिए करें:
  <dl><dt>कॉफी</dt><dd>- गर्म पेय</dd><dt>-गर्म पेय</dt><dd>-ठंडे पेय</dd></dl>
10
अपने पेज को पंक्ति विराम, क्षैतिज रेखाओं और चित्रों का उपयोग करें: अब टेक्स्ट के अलावा अपने दस्तावेज़ में कुछ और जोड़ने का समय है। निम्नलिखित टेग्स का प्रयोग करें, या और भी जानकारी के लिए लिंक पर क्लिक करें। आप को एक ऑनलाइन इमेज होस्टिंग सर्विस की आवश्यकता होगी, जिस से आप के पास इमेज टैग के लिए एक URL होगी:
- HTML में एक पंक्ति जोड़ें: <br> or <hr>
- चित्र (image) जोड़ें: <img src="आप के_ चित्र का_url">
11
पेज पर अन्य स्थानों को जोड़ें: आप इस कोड का उपयोग वेब साइट पर दूसरे पेज को जोड़ने के लिए भी कर सकते हैं, लेकिन अभी जबकि आप के पास कोई भी वेब साइट नहीं है, तो हम अपना सारा ध्यान "एंकर (anchors)" या किसी और विशेष पेज जिसे आप जोड़ सकते हैं, पर केंद्रित करेंगे:
- पहले इस टैग <a> से पेज के उस बिंदु पर जिसे आप जोड़ना चाहते हैं, एक anchor बनाएँ। इसे कोई स्पष्ट और याद रखने योग्य नाम दें।:
  
  <a name="Tips">यह टेक्स्ट एक anchor के लिए है।</a>
- इस कोड <href> का उपयोग उन एंकर या किसी अन्य पेज से लिंक करने के लिए करें:
  
  <a href ="वेब पेज का url या फिर, इस पेज पर एंकर का नाम"> वह टेक्स्ट या चित्र जो एक लिंक के रूप में दिखेगा, उसे यहाँ पर जोड़ें</a>
- एक एंकर को किसी दूसरे पेज पर लिंक करने के लिए, इस # प्रतीक को एंकर के नाम के साथ URL के बाद जोड़ें। उदाहरण के लिए, http://www.wikihow.com/Learn-HTML#Tips यह आप को इस पेज के Tips विभाग से जोड़ देगा।

विधि 2

विधि 2 का 2:

और ज़्यादा उन्नत (Advanced) HTML सीख कर

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

1
एट्रिब्यूट (attributes) के बारे में सीखें: start tag और end tag के बीच में कुछ फेरबदल कर के एट्रिब्यूट को टैग के अंदर ही रखा जाता है। ये कभी भी अकेले उपयोग नहीं किए जाते। इन्हें name="value" के फ़ॉर्मेट में लिखा जाता है, जहाँ पर name एट्रिब्यूट का नाम है (उदाहरण के लिए "color"), और value किसी विशेष उदाहरण का वर्णन करता है (उदाहरण के लिए "red")।
- आप असल में पहले भी attributes देख चुके हैं, यदि आप ने basic HTML विभाग के ट्यूटोरियल को समझा है। <img> टैग src एट्रिब्यूट का उपयोग करते हैं, एंकर name एट्रिब्यूट का उपयोग करते हैं, और लिंक (links) href उपयोग करते हैं। आपने देखा ये सब कैसे ___="___" फ़ॉर्मेट का प्रयोग करते हैं?
2
HTML टेबल के साथ प्रयोग: टेबल या चार्ट बनाने के लिए बहुत से अलग अलग टैग की आवश्यकता होती है। इन टैग के साथ खेलते हैं या HTML टेबल के बारे में विस्तार से जानते हैं।
- पूरी टेबल के लिए टेबल टैग (table tag) से शुरुआत करते हैं:<table></table>
- हर एक पंक्ति के लिए row tag : <tr>
- पहली पंक्ति के लिए कॉलम शीर्षक (column header): <th>
- आगामी पंक्तियों में सेल्स (cells): <td>
- ये सारे एक साथ किस प्रकार से उपयुक्त हैं, यह दिखाने के लिए यहाँ पर एक उदाहरण है:
  
  <table><tr><th>कॉलम 1: माह</th><th>कॉलम 2: सहेजे हुए पैसे</th></tr><tr><td>जनवरी</td><td>rs.100</td></tr></table>
3
विविध हेड (miscellaneous head tag) टैग सीखें: आपने <head> टैग सीखा, जो हर एक दस्तावेज़ की शुरुआत में दिखता है। इस <title> टैग के अलावा, इस में निम्नलिखित टैग शामिल किए जा सकते हैं:
- मेटा टैग (Meta tags), जिन का उपयोग किसी वेब पेज के बारे में मेटा डेटा metadata प्रदान करने में किया जाता है। यह डेटा सर्च इंजन के द्वारा इंटरनेट से किसी वेब साइट का पता लगाने और उस की एक सूची दर्शाते समय उपयोग किया जाता है। अपनी वेब साइट को सर्च इंजन पर अधिक दर्शाने के लिए, एक या अधिक <meta> start tags (end tag की ज़रूरत नहीं है), प्रत्येक ठीक एक नेम एट्रिब्यूट (name attribute) के साथ और एक कंटेंट एट्रिब्यूट (content attribute) के साथ का उपयोग होगा, जैसे कि: <meta name="description" content= " यहाँ पर एक विवरण लिखें ">; या <meta name="keywords" content = "keywords की सूची लिखें, प्रत्येक को एक कॉमा के द्वारा पृथक किया गया हो">
- <link>टैग का प्रयोग पेज पर अन्य दस्तावेज़ को जोड़ने के लिए किया जाता है। इन का विशेष रूप से उपयोग CSS stylesheets को जोड़ने में किया जाता है, इन्हें आप के HTML पेज में बदलाव कर के, एक अलग प्रकार की कोडिंग से बनाया जाता है, जैसे कि रंग जोड़ना, आप के टेक्स्ट को पन्क्तिबद्ध करना और भी बहुत कुछ।
- <script> टैग का उपयोग javaScript दस्तावेज़ों को पेज से जोड़ने में किया जाता है, जिस के कारण जैसे ही यूज़र पेज पर जाता है, पेज में बदलाव होता है।
4
वेब साइट पर पाए गये HTML के साथ प्रयोग करना: वेब पेज पर HTML के स्त्रोत को देखना, अपने ज्ञान को बढ़ाने का सबसे अच्छा तरीका है। आप अपने पेज पर राइट (right) क्लिक कर के "View Source", "View Page Source" या इसी के जैसे कोई अन्य विकल्प या फिर ब्राउज़र के ऊपरी मेनू में स्थित View पर जा कर आप ऐसा कर सकते हैं। यह जानने की कोशिश करें कि एक अनजाने HTML टैग से पेज पर क्या प्रभाव पड़ रहा है, या फिर ऑनलाइन इस का जबाब पाएँ।
- हालाँकि आप किसी और की वेब साइट पर संपादन नहीं कर सकते। आप अपने दस्तावेज़ में पाए हुए HTML को कॉपी कर सकते हैं, और फिर देखें कि यह विभिन्न विकल्पों के साथ क्या करता है। ध्यान दें, कि आप बिना CSS stylesheet के जिस से वेब साइट जुड़ी हुई है, कोई भी रंग या फ़ॉर्मेट देखने में असमर्थ रहेंगे।
और भी बहुत से HTML टैग के बारे में सीखने के लिए इंटरनेट पर बहुत सारे स्त्रोत हैं, जैसे कि W3Schools या Codecademy। आप HTML पर आधारित किताब भी ले सकते हैं, लेकिन जैसे कि इसमें हर साल कुछ बदलाव और नवीनीकरण (update) किए जाते हैं, तो किताब खरीदते वक्त इस बात पर ध्यान दें कि ये ज़्यादा से ज़्यादा 1 या 2 साल पहले संपादित की हुई हो। अपने वेब पेज के नक्शे और दिखावट को बेहतर बनाने के लिए CSS सीखें। एक बार आप CSS सीख लें फिर इस के आगे वेब डिज़ाइनर बनने के लिए अगला कदम Javascipt होगा।

सलाह

आप को इंटरनेट पर कुछ साधारण वेब पेज खोजने चाहिए, और फिर कोड के साथ फेरबदल करें। टेक्स्ट को इधर से उधर ले जा कर, या आकार बदल कर, चित्रों को बदल कर, या कुछ भी जो आप सोच सकें, करें!
Notepad++ एक बहुत ही अच्छा और मुफ़्त प्रोग्राम है, जो एक सामान्य notepad के जैसे ही काम करता है, लेकिन आप अपने कोड को ब्राउज़र में उसी समय सहेज और जाँच भी सकते हैं। ((वैसे तो यह लगभग सभी प्रकार की कोडिंग भाषाओं के उपयोग के लिए सही है। जैसे कि HTML, CSS, python, Javascript, इत्यादि))।
आप अपने कोड को लिखने के लिए एक नोटबुक का उपयोग भी कर सकते हैं, ताकि जब कभी भी आप को याद करने की ज़रूरत हो तब आप अपनी नोटबुक खोल कर देख सकें। सहायता की दृष्टि से आप इन पेज का प्रिंट आउट भी निकलवा सकते हैं।
आज कल XMLऔर RSS, वेब साइट पर पर बहुत ही ज़्यादा प्रचलित हो रहे हैं। इन के कोड देखने वालों को पढ़ने में और समझने में थोड़ा कठिन लग सकते हैं, विशेष रूप से जब यह HTML कोड स्त्रोत दस्तावेज़ में देखे जा रहे हों, लेकिन उन पर इनका अपना ही एक प्रभाव है।
जब भी कोडिंग करें, तो सुनिश्चित करें कि आप सफाई से लिख रहे हैं, ताकि आप के और किसी और के लिए इसे समझने में आसानी हो। Use  HTML टिप्पणियों के लिए जो कि वेब पेज पर नहीं दिखते लेकिन कोड में दिखते हैं।
HTML में मार्क अप टैग (markup tags) अक्षर संवेदनशील (case sensitive) नहीं होते, लेकिन XHTML के साथ के उद्देश्य और संगतता के चलते मानक के रूप में सब को छोटे अक्षरों में (जैसा की इस पेज पर किया गया है) लिखने की सलाह दी जाती है। ^{[२]Xरिसर्च सोर्स}

चेतावनी

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

चीजें जिनकी आपको आवश्यकता होगी

एक टेक्स्ट एडिटिंग प्रोग्राम, जैसे कि Notepad (Windows), या TextEdit (Mac)
एक पेपर / लिखने के लिए नोट बुक (वैकल्पिक)
एक HTML एडिटिंग प्रोग्राम जैसे कि Notepad++ (Windows) या TextWrangler (Mac) (वैकल्पिक)