HTML भाषा कैसे सीखें

एचटीएमएल के लिए खड़ा है हाइपरटेक्स्ट मार्कअप लैंग्वेज

कदम

भाग 1

2

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

3

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

4

अपना पहला टैग लिखें . सभी HTML दस्तावेज़ टैग से शुरू होते हैं और संबंधित समापन टैग के साथ अंत . यह वेब ब्राउज़र को इंगित करता है कि HTML टैग का उपयोग करके दो टैग्स में निहित प्रत्येक चीज का वर्णन किया गया है। अपने दस्तावेज़ में इन दो टैग जोड़ें:

5

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

6

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

7

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

8

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

9

जानें कि सूची कैसे बनाएं एक वेब पेज पर एक सूची या एक सूची बनाने के लिए कई अलग-अलग विधियां हैं निम्न नमूना कोडों को आज़माएं और आपको सबसे अच्छा सूट करने वाला एक का चयन करें। ध्यान दें कि एक सूची में एक टैग जोड़ी होती है जिसमें सूची की संपूर्ण संरचना शामिल होती है (जैसे कि टैग

और

अनारक्षित सूची के मामले में) और सूची के अलग-अलग तत्वों को टैग की दूसरी जोड़ी में संलग्न होना चाहिए, जैसे कि टैग

• बुलेटेड सूची बनाने के लिए निम्न कोड का उपयोग करें:
  
• पहला तत्व
• दूसरा तत्व
• तीसरा तत्व
• संख्याबद्ध सूची बनाने के लिए इस कोड का उपयोग करें:
  
• आइटम नंबर 1
• आइटम नंबर 2
• मद संख्या 3
• परिभाषाओं की एक सूची बनाने के लिए निम्न कोड का उपयोग करें:
  

  कैफ़े

  - गर्म पेय

  दूध

  - शीत पेय

• 
  
  
  
  
  
  10
  स्पाइस अपने वेब पेज का उपयोग करते हुए लाइन ब्रेक, क्षैतिज रेखाएँ और कल्पना. अब अपने वेब पेज के पाठ के अतिरिक्त नए तत्व जोड़ने का समय है। निम्न टैग का उपयोग करने का प्रयास करें या अधिक जानकारी के लिए संबंधित लिंक का चयन करें। एक छवि डालने के लिए, आपको एक होस्टिंग सेवा का उपयोग करना होगा जिसमें छवि से संबंधित फाइल को संग्रहीत करना होगा और फिर टैग का उपयोग करके एक लिंक बनाने के लिए URL का उपयोग करना होगा :
• एचटीएमएल में एक लाइन ब्रेक सम्मिलित करने के लिए निम्नलिखित कोड का प्रयोग करें:

• HTML में एक विभाजक रेखा डालने के लिए निम्न कोड का उपयोग करें:
• निम्न कोड का प्रयोग करें एक छवि डालें:
• 
  11
  अपने वेब पेज पर एक बाहरी लिंक बनाएं आप किसी अन्य वेब पेज या किसी अन्य साइट से लिंक करने के लिए निम्न कोड का उपयोग कर सकते हैं, लेकिन अभी के लिए, क्योंकि हमारे पास अभी तक वेबसाइट नहीं है, हम वेब पेज के आंतरिक लिंक बनाने पर ध्यान देंगे "एंकर":
• पहला कदम उस टैग पर एक एंकर बनाने के लिए है, जिसे आप टैग का उपयोग करने के लिए संदर्भित करना चाहते हैं . अपने एंकर को एक वर्णनात्मक नाम दें ताकि आप इसे आसानी से याद कर सकें:
  
  यह वह टेक्स्ट है जो आपके एंकर का प्रतिनिधित्व करता है
• टैग का उपयोग करें एक लंगर या करने के लिए एक लिंक बनाने के लिए एक और वेब पेज:
  
  यहां टेक्स्ट या छवि डालें जो एक लिंक के रूप में प्रदर्शित की जाएगी।
• किसी अन्य वेबपृष्ठ पर एक एंकर के लिए एक लिंक बनाने के लिए, पृष्ठ का URL # एंकर नाम के बाद के बाद # चिह्न का उपयोग करें। उदाहरण के लिए निम्न लिंक https://gnumani.com/Learn-HTML#Tips आपको इस पृष्ठ के सलाह अनुभाग पर वापस लाता है।

भाग 2

उन्नत HTML जानें

1
विशेषताओं का उपयोग करना सीखें विशेषताएँ टैग में डाली जाती हैं और इन्हें खोलने और समापन टैग के बीच के तत्वों में परिवर्तन और स्वरूपण जोड़ने के लिए उपयोग किया जाता है। गुणों को कभी अकेले नहीं इस्तेमाल किया जा सकता है विशेषताओं को लिखने के लिए प्रारूप निम्न प्रकार है नाम ="मूल्य", जहाँ नाम यह विशेषता का प्रकार है (उदाहरण के लिए "रंग") ई मूल्य चयनित विशेषता से संबंधित मान का वर्णन करता है (उदाहरण के लिए "लाल")।

• अब आपको एहसास होगा कि आपने पहले ही देखा है कि एचटीएमएल के लर्निंग द बेसिक्स खंड में अभी तक विचार के तहत कोड में विशेषताओं का उपयोग कैसे किया जाए। टैग विशेषता का उपयोग करें src, जबकि एंकर विशेषता का उपयोग करते हैं नाम और लिंक विशेषता का उपयोग करते हैं href. आपने देखा है कि इन सभी विशेषताओं को प्रारूप का पालन कैसे किया जाता है ___ ="___" पहले देखा?

2

एचटीएमएल में तालिकाओं का प्रयोग करें तालिका या चार्ट बनाने के लिए कई अलग-अलग टैगों के उपयोग की आवश्यकता होती है इन टैगों के साथ खेलने का प्रयास करें या निम्न का उपयोग करें गाइड एचटीएमएल में टेबल बनाने के बारे में विस्तार से जानने के लिए

3

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

4

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

5

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