विषय

• कदम
• विधि 1 का 1: HTML पृष्ठ लिखना
• टिप्स
• चेतावनी
• आपको किस चीज़ की जरूरत है

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

कदम

विधि 1 का 1: HTML पृष्ठ लिखना

1. 1 इससे पहले कि आप यहां प्रस्तुत चरणों में से किसी एक के साथ खुद को परिचित करना शुरू करें, "आपको क्या चाहिए" अनुभाग देखें।
2. 2 इस मुद्दे को समझने से पहले आपको क्या पता होना चाहिए:
3. 3 मूल बातें। क्या आपने कभी टैग के बारे में सुना है? टैग कोण कोष्ठक से घिरा हुआ है, जिसके अंदर शब्द है। अंतिम टैग उसी रूप में लिखा जाता है, लेकिन पहले कोण ब्रैकेट के बाद एक स्लैश जोड़ने के साथ। एक विशेषता एक टैग में एक वैकल्पिक शब्द है जिसका उपयोग किसी टैग में विवरण जोड़ने के लिए किया जाता है।
4. 4 दस्तावेज़ की शुरुआत। आप जिस भी टेक्स्ट एडिटर का उपयोग कर रहे हैं, उसमें निम्नलिखित पेस्ट करें:
   html> सिर> शीर्षक> विकिहाउ / शीर्षक> / सिर> शरीर> नमस्ते दुनिया / शरीर> / html> बड़ा> / बड़ा>
   टैग को उसी टैग के साथ बंद किया जाना चाहिए, लेकिन पहले कोण ब्रैकेट के बाद स्लैश के साथ। टैग जैसे अपवाद हैं मेटा या डॉक्टरेट.
5. 5 डॉक्टरेट
   • आमतौर पर, अधिकांश वेब पेज सेट होते हैं डॉक्टरेट ”। यह एन्कोडिंग को निर्धारित करने के साथ-साथ वेब ब्राउज़र द्वारा इसे कैसे माना जाएगा, यह निर्धारित करने में मदद करता है। अधिकांश पृष्ठ इसके बिना काम करेंगे, "लेकिन यदि आप मिलान करना चाहते हैं तो यह आवश्यक है (वे इंटरनेट पर एन्कोडिंग के प्रकारों को नियंत्रित करते हैं और उनका उपयोग कैसे किया जाता है)... HTML 4.01 के लिए DOCTYPE नीचे प्रस्तुत किया गया है:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> यह एक है सबसे आम में से DOCTYPE का उपयोग पूरे इंटरनेट के पृष्ठों पर किया जाता है।सबसे पहले, यह 'एचटीएमएल' का वर्णन करने वाले पृष्ठ के प्रकार को इंगित करता है, फिर यह एन्कोडिंग के प्रकार पर प्रकाश डालता है, और अंत में, DOCTYPE का स्थान, जो परिणामस्वरूप, वेब ब्राउज़र के लिए पृष्ठ का वर्णन करता है।
   • एचटीएमएल के विभिन्न प्रकार हैं (वर्षों में विकसित विभिन्न संस्करण), उदाहरण के लिए नए टैग या विशिष्ट टैग का उपयोग करना। कुछ टैग बहिष्कृत हैं (इसके बजाय अन्य अधिक उपयोगी टैग का उपयोग किया जाता है)।
   • बी> और मैं> - यह वही है जो वर्तमान में टैग पर लगाया जाता है, क्योंकि उनका उपयोग टेक्स्ट को बदलने के लिए किया जाता है, लेकिन विनिर्देशों के लिए नहीं, परिणामस्वरूप, अन्य टैग उन्हें बदलने के लिए आते हैं। उपनाम मजबूत> के लिए एक प्रतिस्थापन है बी>, तथा उन्हें>, के लिए एक प्रतिस्थापन मैं>.
   • यह महत्वपूर्ण है कि पिछले टैग को उन टैग से बदल दिया जाए जो स्वरूपण से अधिक हैं। यदि पाठ का अनुवाद किया जाता है, तो न केवल स्वरूपण, बल्कि उसका अर्थ भी वही रहता है। यह शब्दार्थ रूप से सही है।
   • एक्सएचटीएमएल संस्करण 2.0 में, b> और मैं> उपयोग नहीं किया गया, ठीक HTML संस्करण 3+ की तरह।
6. 6 एचटीएमएल "एनकैप्सुलेशन नियम"।
   • आइए वर्तमान में उपयोग में आने वाले अधिक महत्वपूर्ण टैग पर एक नज़र डालें। पृष्ठ के निर्माण के दौरान, एक साधारण संरचना का उपयोग किया जाता है। यदि कोई टैग खोला गया था, तो परिणामस्वरूप, इसे बंद कर देना चाहिए... यह पूरी संरचना पर लागू होता है। एक्सएचटीएमएल लेआउट संरचना का एक मान्य उदाहरण यहां दिया गया है:
   • ! DOCTYPE html सार्वजनिक "- // W3C // DTD XHTML 1.0 सख्त // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • सिर>
   • मेटा http-equiv = "सामग्री-प्रकार" सामग्री = "पाठ / html; वर्णसेट = utf-8" />
   • शीर्षक> हैलो वर्ल्ड! / शीर्षक>
   • / सिर>
   • शरीर>
   • h1> हैलो वर्ल्ड! / h1>
   • / शरीर>
   • / एचटीएमएल>
   • नमूना कोड जो संदेश जारी करता है नमस्ते दुनिया... इसे एक परीक्षण कहा जाता है नमस्ते दुनिया.
7. 7 शीर्षक
   • वेब पेज का शीर्षक टैग के बीच की सामग्री है सिर>... यह सामग्री उपयोगकर्ता द्वारा नहीं देखी जा सकती (केवल शीर्षक जो पृष्ठ के शीर्षक में दिखाया गया है)। टैग के बीच जानकारी सिर>, अन्य टैग संलग्न कर सकते हैं, जैसे:
     
     
     • मेटा टैग का उपयोग उन सूचनाओं के लिए किया जाता है जो सर्च इंजन और अन्य उपयोगिताओं के लिए उपयोगी होती हैं।
     • लिंक टैग जो दस्तावेज़ों के बीच एक लिंक बनाता है, उदाहरण के लिए स्टाइल्स (सीएसएस) के लिए।
     • SCRIPT टैग, इसमें लगभग कोई भी वेब कोडिंग शामिल है, जिसमें दूरस्थ रूप से (किसी अन्य दस्तावेज़ से) एक्सेस करने की क्षमता है।
     • स्टाइल टैग, जो अनिवार्य रूप से एक शैली है जिसे किसी पृष्ठ पर लागू किया जा सकता है।
     • TITLE टैग वह शीर्षक है जो आपके वेब ब्राउज़र में किसी पृष्ठ के शीर्षक के रूप में प्रकट होता है।
   • आइए इस वेबसाइट से लिए गए उदाहरण हेडर में इनमें से कुछ का डेमो देखें (इसे छोटा कर दिया गया है):
     • सिर>
     • शीर्षक> ... / शीर्षक>
     • मेटा नाम = "विवरण" सामग्री = "..." />
     • लिंक रिले = "स्टाइलशीट" टाइप = "टेक्स्ट / सीएसएस" href = "..." />
     • मेटा http-equiv = "सामग्री-प्रकार" सामग्री = "पाठ / html; वर्णसेट = UTF-8" />
     • शैली प्रकार = "पाठ / सीएसएस" मीडिया = "सभी"> ... / शैली>
     • स्क्रिप्ट प्रकार = "पाठ / जावास्क्रिप्ट" src = "..."> / स्क्रिप्ट>
     • / सिर>
       
       यदि आपने ध्यान नहीं दिया है, तो अलग-अलग टैग को हाइलाइट कर दिया गया है, वास्तविक जानकारी को हटा दिया गया है। उदाहरण छोटा है, लगभग हर टैग दिखा रहा है जो इसमें पाया जा सकता है सिर>HTML कमेंट को छोड़कर (हम इसके बारे में सरल टैग में बात करेंगे)।
8. 8 हर जगह सरल टैग
   • आइए आगे बढ़ते हैं और अन्य टैग देखते हैं। अपनी टैगिंग से सावधान रहें और अंगूठे के नियम, "एनकैप्सुलेशन" को याद रखें।
     
     
     • मजबूत> महत्वपूर्ण पाठ पर जोर देता है।
     • छोटा> टेक्स्ट को छोटा बनाता है। फ़ॉन्ट आकार मानक इकाइयों में 1 से 7, 3 तक मापा जाता है, डिफ़ॉल्ट पाठ आकार है। ...
     • प्री> रिच टेक्स्ट के ब्लॉक को परिभाषित करता है। जैसा कि यह सही है, ऐसे टेक्स्ट को समान आकार के फ़ॉन्ट में और शब्दों के बीच सभी रिक्त स्थान के साथ टाइप किया जाता है।
     • em> टेक्स्ट को एक वाक्यांश के रूप में दिखाता है।
     • डेल> टेक्स्ट को स्ट्राइक आउट करता है।
     • ins> उस टेक्स्ट को परिभाषित करता है जिसे दस्तावेज़ में डाला गया है।
     • h1> कई शीर्षक टैगों में से एक। इस तरह के टैग संख्या के अंतर के साथ 'h' से शुरू होते हैं। टैग को उसी नंबर से बंद करना सुनिश्चित करें।
     • p> एक पैराग्राफ को परिभाषित करता है।
     • ! --- ... ---> अन्य टैग के विपरीत, टिप्पणी टैग के अंदर ही होनी चाहिए। यह जानकारी केवल तभी दिखाई देती है जब कोड देखा जाता है।
     • blockquote> एक उद्धरण दिखाता है, इसका उपयोग उद्धरण> टैग के साथ किया जा सकता है।
     • ऊपर दिए गए कुछ उदाहरण मौजूदा टैग की पूरी सूची नहीं हैं। दूसरों के बारे में जानने के लिए विजिट करें।
9. 9 एक स्पष्ट संरचना बनाना
   • पेजों को टैग के सरल सेट में डेटा रखने के लिए डिज़ाइन किया गया है ताकि हम जानकारी को पैराग्राफ में पार्स कर सकें। कंप्यूटर डेटा को पहचानता है; यह संदर्भ या वैचारिक कनेक्शन के बारे में नहीं जानता है। हमें कंप्यूटर के अनुकूल HTML पेज बनाने होंगे। यह div टैग का उपयोग करके हासिल किया जाता है। यह बड़ी संख्या में पेज बनाने में मदद करता है। इसे CSS के साथ स्टाइल किया जा सकता है और लेआउट के लिए बड़ी कोड टेबल बनाने की तुलना में आसान है।
     • div> यह टैग विशेष है क्योंकि इसे स्टाइल किया जा सकता है और सूचना के अलग-अलग ब्लॉक का उपयोग किया जा सकता है जिसे उपयोगकर्ता और कंप्यूटर दोनों समझ सकते हैं।
   • आइए एक साधारण HTML लेआउट पर एक नज़र डालें जो एक div टैग का उपयोग करता है।
     • ! DOCTYPE html सार्वजनिक "- // W3C // DTD XHTML 1.0 सख्त // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • सिर>
     • मेटा http-equiv = "सामग्री-प्रकार" सामग्री = "पाठ / html; वर्णसेट = utf-8" />
     • शीर्षक> हैलो वर्ल्ड! / शीर्षक>
     • / सिर>
     • शरीर>
     • h1> हैलो वर्ल्ड! / h1>
     • डिव आईडी = "कंटेंटऑन">
     • p> यह div # contentOne में कुछ टेक्स्ट है। / p>
     • डिव>
     • p> div # contentOne / p> . के उप-अनुभाग में एक अनुच्छेद
     • / div>
     • / div>
     • / शरीर>
     • / एचटीएमएल>
   • सीएसएस और जावास्क्रिप्ट के साथ काम करते समय डिव> टैग का उपयोग शैलियों को खोजने और संशोधित करने में मदद करता है। HTML बेहतर और अधिक प्रतिक्रियाशील उपयोगकर्ता अनुभव बनाने के लिए CSS शैलियों और Javascript के साथ काम करने के लिए विभिन्न एन्कोडिंग का उपयोग करेगा।

टिप्स

• इस लेख को पढ़ने के बाद, रुकें नहीं और सोचें कि आपने वह सब कुछ सीख लिया है जो आपको जानना चाहिए। सीखने के लिए हमेशा कुछ होता है, खासकर इस तकनीक में।
• कोड सीखें, समझें और लिखें।
• ध्यान दें कि कुछ टैग केवल> का उपयोग करते हैं। पैरा और बीआर कुछ उदाहरण हैं। के साथ खोले गए अन्य टैग> को और बंद करने की आवश्यकता है। उदाहरण के लिए, "div> / div>"।
• लोग नई खोजों की अपेक्षा करते हैं, इसलिए पुन: आविष्कार, डिज़ाइन या कोड।
• एक बार जब आप बहुत कुछ सीख लेते हैं, तो सर्वर प्रोग्रामिंग सीखने का प्रयास करें।
• CSS के साथ-साथ Javascript के साथ भी काम करना सीखें।

चेतावनी

• याद रखें, HTML सामग्री को संपादित करने के बारे में है। इसका मतलब है कि HTML का उपयोग केवल किसी मान्यता प्राप्त प्रारूप में सामग्री को संग्रहीत करने के लिए किया जाता है। सीएसएस जैसी अन्य तकनीकों का उपयोग करके अन्य परिवर्तन किए जाने चाहिए। इसका अर्थ "शब्दार्थ रूप से सही" करना भी हैभले ही दूसरे इसे स्वीकार न करें। अन्य प्रोग्रामिंग भाषाएं वेब पेज (सीएसएस, जावास्क्रिप्ट और एक्सएमएल) बनाने में मदद करती हैं। HTML एक कंटेंट कंस्ट्रक्टर है।

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

• एक पाठ संपादक जो एएनएसआई एन्कोडिंग का समर्थन करता है
• एक वेब ब्राउज़र जैसे इंटरनेट एक्सप्लोरर या मोज़िला फ़ायरफ़ॉक्स
• (वैकल्पिक) wysiwyg या wykiwyg HTML संपादक जैसे Adobe Dreamweaver, Aptana Studio, या Microsoft Expression Web