बहुत से टेक्स्ट एडिटिंग प्रोग्राम 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" में कोई भी अंतर नही है। दोनो ही सही हैं। अपने रिक्त (blank) दस्तावेज़ को सहेज लें, फिर उस दस्तावेज़ के आइकान (icon) को अपने कंप्यूटर पर पाएँ और इसे खोलने के लिए इस पर दो बार क्लिक (double click) करें। यह आप के ब्राउज़र पर एक रिक्त वेब पेज (web page) के रूप में खुल जाएगा। यदि ऐसा नहीं होता है तो, उस दस्तावेज़ के आइकान को अपने URL के बार (address) पर खींच कर ले जाएँ। आप इस ट्यूटोरियल के साथ, अपने HTML दस्तावेज़ में बदलाव करने के बाद, अपने वेब पेज में हुए परिवर्तनों को पेज पर वापस जा के जाँच सकते हैं।  इस बात का ध्यान रखें कि इस से वास्तव में किसी ऑनलाइन वेबसाइट का निर्माण नहीं होगा। इसे अन्य व्यक्ति नहीं पा सकेंगे और इसे जाँचने के लिए आप को इंटरनेट सुविधा की भी ज़रूरत नहीं होगी। यद्यपि यह एक वेबसाइट ही है लेकिन यह सिर्फ़ आप के HTML दस्तावेज़ को पढ़ने के लिए ब्राउज़र का इस्तेमाल करेगा। वेब पेज पर मार्क अप टैग सामान्य रूप से नज़र नहीं आते हैं। बल्कि ये आप के ब्राउज़र को निर्देश देते है कि पेज को कैसे और क्या दिखाना है। "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)" शब्द का प्रयोग किया हो। हर एक html दस्तावेज़ एक <html> टैग के साथ शुरू होता है और  </html> टैग के साथ ख़त्म होता है। इन टैग से ब्राउज़र को यह जानने में आसानी होती है कि इन टैग के बीच में लिखा सब कुछ HTML है। अपने दस्तावेज़ में इन टैग का इस्तेमाल करें:  अपने दस्तावेज़ में सबसे ऊपर <html> लिखें। लिखने के लिए कुछ जगह प्राप्त करने के लिए बटन enter या return का उपयोग करें, और फिर </html> लिखें। इन दो टैग के बीच में कुछ लिखने के लिए इस ट्यूटोरियल की मदद लें। <html> और </html> टैग के बीच में, <head> स्टार्ट टैग लिखें और एक </head> एंड टैग लिखें। टैग के बीच में लिखने के लिए कुछ जगह पाएँ। इन head टैग के बीच में लिखा हुआ सबकुछ वास्तव में पेज पर अपने आप दिखाई नहीं देगा। यह जानने के लिए कि यह कहाँ पर दिखता है निम्नलिखित का उपयोग करें:  <head> और  </head> टैग के बीच में,  <title> और  </title> लिखें। <title> और  </title> टैग के बीच में, How to Learn HTML - wikiHow लिखें। दस्तावेज़ को सहेजें और इसे एक ब्राउज़र पर खोलें (या फिर यदि यह पहले से ही ब्राउज़र पर खुला हुआ है तो दस्तावेज़ सहेजने के बाद ब्राउज़र पेज को  refresh करें)। आपने जो लिखा है क्या आप उसे अपने ब्राउज़र के ऊपर, एड्रेस बार के ऊपर देख पाते है? इस शुरुआती दस्तावेज़ में लिखा हुआ सबकुछ body भाग में जाएगा और, वास्तव में यह वेब पेज पर भी दिखेगा।  </head> एंड टैग के बाद, लेकिन </html> टैग के पहले, <body> और </body> लिखें। अब इस ट्यूटोरियल से आप जो भी लिखेंगे सब इस body टैग के बीच में ही लिखेंगे। अब आप के पास एक ऐसा दस्तावेज़ होगा (बुलेट पॉइंट पर ध्यान ना दें):  <html> <head> <title>How to Learn HTML - wikiHow</title> </head> <body> </body> </html> अब ऐसा कुछ लिखने का समय आ गया है जिसे आप वास्तव में वेब पेज पर देख सकेंगे! 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> कैसा दिखता है? यदि आप अपने HTML दस्तावेज़ में बहुत सी पंक्तियाँ लिखना चाहते हैं, तो आप यह अनुभव करेंगे कि यह पंक्ति विभाजन आप के ब्राउज़र पर नहीं दिखेगा। आप को अपने आप ही इन्हें कोड करना होगा:  <p>यह एक अनुच्छेद (paragraph) है।</p>  इस वाक्य के बाद एक पंक्ति विराम (line break) है। <br>वाक्य की शुरुआत में उपयोग करें।यह एक ऐसा पहला टैग आपने देखा होगा जिस को end tag की ज़रूरत नहीं है! ये सब "रिक्त टैग (empty tags)" कहलाए जाते हैं। अनुभाग का नाम दर्शाने के लिए शीर्षक बनाएँ:<h1>शीर्षक</h1>:सबसे बड़ा शीर्षक<h2>शीर्षक </h2>(दूसरे स्तर का शीर्षक)<h3>शीर्षक</h3> (तीसरे स्तर का शीर्षक)<h4>शीर्षक</h4> (चौथे स्तर का शीर्षक)<h5>शीर्षक</h5> (सबसे छोटा शीर्षक) वेब पेज (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> अब टेक्स्ट के अलावा अपने दस्तावेज़ में कुछ और जोड़ने का समय है। निम्नलिखित टेग्स का प्रयोग करें, या और भी जानकारी के लिए लिंक पर क्लिक करें। आप को एक ऑनलाइन इमेज होस्टिंग सर्विस की आवश्यकता होगी, जिस से आप के पास इमेज टैग के लिए एक URL होगी:  HTML में एक पंक्ति जोड़ें: <br> or <hr>  चित्र (image) जोड़ें: <img src="आप के_ चित्र का_url"> आप इस कोड का उपयोग वेब साइट पर दूसरे पेज को जोड़ने के लिए भी कर सकते हैं, लेकिन अभी जबकि आप के पास कोई भी वेब साइट नहीं है, तो हम अपना सारा ध्यान "एंकर (anchors)" या किसी और विशेष पेज जिसे आप जोड़ सकते हैं, पर केंद्रित करेंगे:  पहले इस टैग <a> से पेज के उस बिंदु पर जिसे आप जोड़ना चाहते हैं, एक anchor बनाएँ। इसे कोई स्पष्ट और याद रखने योग्य नाम दें।:<a name="Tips">यह टेक्स्ट एक anchor के लिए है।</a>  इस कोड  <href> का उपयोग उन एंकर या किसी अन्य पेज से लिंक करने के लिए करें:<a href ="वेब पेज का url या फिर, इस पेज पर एंकर का नाम"> वह टेक्स्ट या चित्र जो एक लिंक के रूप में दिखेगा, उसे यहाँ पर जोड़ें</a>  एक एंकर को किसी दूसरे पेज पर लिंक करने के लिए, इस # प्रतीक को एंकर के नाम के साथ URL के बाद जोड़ें। उदाहरण के लिए, http://www.wikihow.com/Learn-HTML#Tips यह आप को इस पेज के Tips विभाग से जोड़ देगा।
قم بفتح ملف HTML. شاهد الملف بواسطة متصفح الانترنت. افهم أوسمة البيانات والتوصيف Markup Tags. اكتب وسم HTML الأول لك. تعبئة قسم <head> الخاص بالملف. صنع قسم <body>. إضافة النصوص بأنماط مختلفة. قم بتقسيم النص الخاص بك إلى فقرات. كيفية صنع قائمة في HTML. تجميل الصفحة عن طريق إضافة " فواصل أسطر " و " خطوط أفقية " و " بعض الصور ". الربط بين محتويات الصفحة.