विषय

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

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

कदम

भाग 1 का 4: एक दस्तावेज का निर्माण

1. 

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

2. 

   
   
   फ़ाइल को वेब पेज के रूप में सहेजें। शीर्ष पर मेनू में फ़ाइल → इस रूप में सहेजें चुनें। फ़ाइल प्रारूप को "वेब पेज", ".html" या ".htm" में बदलें। उस फ़ाइल को सहेजें जहां आप इसे आसानी से पा सकते हैं।
   • इन तीन विकल्पों में कोई अंतर नहीं है।

3. 

   ब्राउज़र में फ़ाइल खोलें। फ़ाइल पर डबल क्लिक करें, और यह स्वचालित रूप से आपके ब्राउज़र में एक रिक्त वेब पेज के रूप में खुल जाएगा। वैकल्पिक रूप से, आप फ़ायरफ़ॉक्स या इंटरनेट एक्सप्लोरर की तरह एक ब्राउज़र खोल सकते हैं, और फिर दस्तावेज़ का चयन करने के लिए फ़ाइल → ओपन फ़ाइल का उपयोग कर सकते हैं।
   • यह वेबसाइट ऑनलाइन नहीं है। यह केवल आपके कंप्यूटर पर देखा जा सकता है।

4. 

   
   
   वेब पेज को ताज़ा करें और किए गए परिवर्तनों को देखें। अपने रिक्त दस्तावेज़ में निम्नलिखित लिखें: नमस्ते। दस्तावेज़ सहेजें। अपने ब्राउज़र में रिक्त वेब पेज को ताज़ा करें, और आपको पृष्ठ के शीर्ष पर बोल्ड दिखाई देने वाला शब्द "हैलो" देखना चाहिए। जब भी आप इस ट्यूटोरियल के दौरान अपने नए HTML का परीक्षण करना चाहते हैं, .htm दस्तावेज़ को सहेजें, और फिर HTML को कैसे संकलित किया जाए, यह देखने के लिए अपनी ब्राउज़र विंडो को रीफ़्रेश करें।
   • यदि आप शब्द देखते हैं ""तथा"'' आपके ब्राउज़र में दिखाई देता है, फ़ाइल को HTML में सही ढंग से संकलित नहीं किया गया है। एक अलग पाठ संपादक या एक अलग ब्राउज़र का प्रयास करें।

5. 

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

6. 

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

7. 

   सिर (हेड) और बॉडी टैग जोड़ें। HTML दस्तावेजों को दो भागों में विभाजित किया गया है। "शीर्ष" अनुभाग विशेष जानकारी के लिए है, जैसे पृष्ठ का शीर्षक। "शरीर" अनुभाग में पृष्ठ की मुख्य सामग्री है। अपने दस्तावेज़ में इन दोनों अनुभागों को जोड़ें, और अंतिम टैग शामिल करना याद रखें। नया जोड़ा गया पाठ बोल्ड है:

8. 

   अपने पृष्ठ को एक शीर्षक दें। हेड सेक्शन में अधिकांश कार्ड शुरुआती के साथ सीखने के लिए महत्वहीन हैं। हालांकि, शीर्षक टैग का उपयोग करना आसान है, और यह निर्धारित करेगा कि ब्राउज़र विंडो के नाम या ब्राउज़र टैब पर क्या दिखाई देता है। अपने शीर्षक के आरंभ और अंतिम टैग को हेड टैग के अंदर रखें, और उन हेडर में से जो भी हेडर आपको पसंद हैं, उन्हें लिखें:
   विज्ञापन

भाग 2 का 4: पाठ स्वरूपण

1. 

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

2. 

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

   • मैंने HTML पृष्ठ लिखने के लिए wikiHow निर्देशों का पालन किया।

   • मेरा लक्ष्य आज:

   • पूर्ण किए गए लक्ष्य:

   • शीर्षकों का उपयोग करना सीखें।

   • अपूर्ण लक्ष्य:

   • अधिक टेक्स्ट फ़ॉर्मेटिंग टैग सीखें।

3. 

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

4. 

   अपने पृष्ठ पर पाठ व्यवस्थित करें। आप देख सकते हैं कि "एन्टर" की को दबाने पर टेक्स्ट दूसरी लाइन पर दिखाने के लिए पर्याप्त नहीं है। ये टैग पैराग्राफ और लाइन ब्रेक बनाने में मदद कर सकते हैं, या अपने पाठ को अन्य तरीकों से व्यवस्थित कर सकते हैं:

   • "पैराग्राफ," (पैराग्राफ) टैग के लिए लघु इन टैग्स के बीच के सभी पाठ को एक पैराग्राफ में रखेगा, और इसे ऊपर और नीचे के पाठ से अलग करेगा।

   • 
     यह टैग लाइन ब्रेक उत्पन्न करेगा। इसमें एक अंतिम टैग न जोड़ें, क्योंकि यह किसी अन्य सामग्री के साथ हस्तक्षेप नहीं करता है। इस टैग का उपयोग कविताओं या पते की पंक्तियों में करें, पैराग्राफ में नहीं।

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

   • यह टैग एक स्रोत से उद्धृत पाठ के प्रकार को परिभाषित करता है।

     आप स्रोत का वर्णन बाद में कर सकते हैं कार्ड का हवाला देते हैं.

5. 

   अदृश्य कैप्शन टेक्स्ट जोड़ें। टिप्पणी टैग वेब पेज पर प्रदर्शित नहीं होते हैं। वे आपको सामग्री को प्रभावित किए बिना अपने आप को HTML दस्तावेज़ में एनोटेट करने की अनुमति देते हैं। एक अंतिम टैग न जोड़ें।
   • टैग समाप्त किए बिना अकेले जाने वाले कार्ड को "खाली टैग" कहा जाता है।

6. 

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

   • आशा है आपको यह पृष्ठ पसंद आएगा!

     मैंने इसे सिर्फ तुम्हारे लिए बनाया है।

   • भाग 1: मैंने HTML की खोज कैसे की

   • मैंने पहले ही HTML सीख लिया है एक दोघंटे, तो अब मैं एक विशेषज्ञ हूँ।
   विज्ञापन

भाग 3 का 4: लिंक और चित्र जोड़ना

1. 

   विशेषताओं के बारे में जानें। टैग में उनके अंदर लिखी अतिरिक्त जानकारी हो सकती है, जिन्हें विशेषता कहा जाता है। इन विशेषताओं को अतिरिक्त शब्दों द्वारा स्वयं टैग के रूप में दर्शाया जाता है संपत्ति का नाम = "विशिष्ट मूल्य"। उदाहरण के लिए, किसी भी HTML टैग में शीर्षक विशेषता हो सकती है:

   • परिचय अनुच्छेद यहाँ है।

     पैराग्राफ "परिचय" शीर्षक दें, जो वेब पेज पर पैराग्राफ के ऊपर मंडराने पर दिखाई देगा।

2. 

   अन्य वेब साइटों के लिंक। कार्ड का उपयोग किसी अन्य वेब पेज पर हाइपरलिंक बनाने के लिए। Href विशेषता का उपयोग करने के लिए लिंक करने के लिए वेब पेज का URL डालें। यहाँ एक उदाहरण है जो आपके द्वारा पढ़े जा रहे वेब पेज से जुड़ता है:
   • आपकी वेबसाइट पर आपके आगंतुक लिंक का अनुसरण करने के लिए इस पाठ पर क्लिक कर सकते हैं।

3. 

   टैग में एक आईडी विशेषता जोड़ें। एक अन्य विशेषता जो किसी भी HTML टैग का उपयोग कर सकती है वह है "आईडी" तत्व। किसी भी कार्ड में, लिखें आईडी = "विदु" या किसी भी नाम का उपयोग करें जिसमें कोई स्थान नहीं है। यह किसी भी दृश्य प्रभाव का उत्पादन नहीं करता है, लेकिन हम इसे अगले चरण में उपयोग करेंगे।
   • उदाहरण के लिए, अपने दस्तावेज़ में निम्नलिखित जोड़ें:

     इस अनुच्छेद का उपयोग एक उदाहरण के रूप में किया जाता है कि आईडी विशेषता कैसे काम करती है।

4. 

   एक निश्चित आईडी के साथ एक तत्व का लिंक। अब हम हाइपरलिंक टैग का उपयोग कर सकते हैं, , उसी पृष्ठ पर किसी अन्य स्थान से लिंक करने के लिए। URL के बजाय, हम # प्रतीक का उपयोग करेंगे, उसके बाद जिस आईडी मूल्य को हम लिंक करना चाहते हैं। उदाहरण के लिए, यह पाठ आईडी के साथ पाठ से लिंक करेगा "vidu।"
   • सभी HTML मान केस संवेदी होते हैं। "#VIDU" और "#vidu" दोनों एक ही स्थान से लिंक होंगे।
   • यदि आपका पृष्ठ एक बार में पूरे पृष्ठ को प्रदर्शित करने के लिए पर्याप्त छोटा है, तो संभवतः आप अपने ब्राउज़र में लिंक पर क्लिक करने पर कुछ भी होने की सूचना नहीं देंगे। स्क्रॉल बार दिखाई देने तक विंडो को आकार दें, और फिर पुन: प्रयास करें।

5. 

   तस्वीरें जोडो। कार्ड एक खाली टैग है, जिसका अर्थ है कि कोई अंतिम टैग आवश्यक नहीं है। छवि को प्रदर्शित करने के लिए ब्राउज़र की सभी जानकारी को विशेषताओं का उपयोग करके जोड़ा जाता है। विकी हाउ लोगो प्रदर्शित करने के लिए यहां एक उदाहरण दिया गया है, जिसके पीछे प्रत्येक विशेषता के लिए एक विवरण है:
   • 
   • गुण src = "" ब्राउजर को बताता है कि फोटो कहां है। (ध्यान दें कि किसी और की साइट से एक तस्वीर पोस्ट करना अनुचित माना जाता है - और जब पृष्ठ सक्रिय नहीं होगा तो फोटो गायब हो जाएगी।)
   • गुण शैली = "" यह कई चीजें कर सकता है, लेकिन सबसे महत्वपूर्ण बात यह है कि पिक्सल में एक छवि की चौड़ाई और ऊंचाई निर्धारित करने के लिए इसका उपयोग किया जाता है। (आप इसके बजाय अलग-अलग विशेषताओं की चौड़ाई = "" और ऊंचाई = "" का भी उपयोग कर सकते हैं, लेकिन इससे आपको अजीब सी समस्याएँ हो सकती हैं।
   • गुण alt = "" छवि का एक संक्षिप्त विवरण है कि उपयोगकर्ता देखेगा कि क्या छवि लोड करने में विफल रही। यह एक आवश्यकता मानी जाती है, क्योंकि इसका उपयोग वेबसाइट के आगंतुकों के लिए स्क्रीन रीडर के लिए किया जाता है जो अंधे हैं।
   विज्ञापन

भाग 4 का 4: अपनी वेबसाइट को ऑनलाइन जोड़ना और प्राप्त करना सीखें

1. 

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

2. 

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

3. 

   अपनी वेबसाइट ऑनलाइन प्राप्त करें। अपनी वेबसाइट को होस्ट करने के लिए एक सेवा चुनें, और फिर आप अपने व्यक्तिगत वेब डोमेन में जितने चाहें उतने HTML पृष्ठ अपलोड कर सकते हैं। ऐसा करने के लिए, आपको एफ़टीपी अपलोड सॉफ़्टवेयर का उपयोग करना होगा, लेकिन कई वेब रेंटल सेवाएं इस सेवा को भी प्रदान करती हैं।
   • सीधे आपकी साइट पर मौजूद पृष्ठों या चित्रों से लिंक करते समय, आपको पूर्ण साइट पते का उपयोग करना होगा। उदाहरण के लिए, यदि आपका डोमेन नाम www.chuyengiahtmlsieudang.com है, तो पाठ इन टैग में है "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html" से लिंक होगा

4. 

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

5. 

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

सलाह

• इस ट्यूटोरियल में प्रयुक्त सिद्धांत घोषणा (डॉक्यूमेंट टाइप डिक्लेरेशन) का उपयोग "ढीला HTML 4.0.1 संक्रमणकालीन" (HTML 4.0.1 तंग संक्रमण नहीं), एक आसान प्रारूप है। नौसिखियों के लिए उपयोग करने के लिए। उपयोग () ब्राउज़र के लिए एक विकल्प इसे एक कठोर HTML 5 प्रारूप में संकलित करता है, जो अनुशंसित (हालांकि कम आमतौर पर इस्तेमाल किया जाने वाला) मानक शैली है।

चेतावनी

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

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

• एक साधारण टेक्स्ट एडिटर, जैसे कि नोटपैड या टेक्स्टएडिट
• एक वेब ब्राउज़र, जैसे कि इंटरनेट एक्सप्लोरर या मोज़िला फ़ायरफ़ॉक्स
• (वैकल्पिक) एक HTML संपादक जैसे Adobe Dreamweaver, Aptana Studio या Microsoft अभिव्यक्ति वेब