1
एक HTML दस्तावेज़ खोलें अधिकांश टेक्स्ट एडिटर प्रोग्राम, नोटपैड या माइक्रोसॉफ्ट वर्ड फॉर विंडोज और मैक के लिए टेक्स्टएडिट, एचटीएमएल दस्तावेज़ लिखने के लिए इस्तेमाल किया जा सकता है। एक नया दस्तावेज़ खोलें और फ़ाइल → इसे "वेब पेज" के रूप में सहेजने के लिए, या ".html" या ".htm" के बजाय ".doc", " .rtf "या किसी भी अन्य विस्तार
- आपको एक चेतावनी दिखाई दे सकती है कि आपका दस्तावेज़ "समृद्ध पाठ" के बजाय "सादा पाठ" में बदल जाएगा, या चित्र और विशेष स्वरूपण को सही ढंग से नहीं बचाया जाएगा। कोई समस्या नहीं - HTML दस्तावेज़ इन विकल्पों का उपयोग नहीं करते हैं
- फाइलों में कोई अंतर नहीं है html ई। htm। कोई भी काम करेगा
2
एक वेब ब्राउज़र के साथ अपना दस्तावेज़ देखें दस्तावेज़ को रिक्त सहेजें, फिर अपने कंप्यूटर पर उसका आइकन ढूंढें और इसे खोलने के लिए उसे दो बार क्लिक करें इसे आपके ब्राउज़र में रिक्त वेब पेज के रूप में खोलना चाहिए। यदि नहीं, तो अपने ब्राउज़र की यूआरएल बार (एड्रेस) में फ़ाइल आइकन खींचें जैसा कि आप इस ट्यूटोरियल में अपने HTML दस्तावेज़ को संपादित करते हैं, आप जांच कर सकते हैं और देख सकते हैं कि आपका वेब पृष्ठ कैसे बदलता है
- ध्यान दें कि यह वास्तव में एक ऑनलाइन साइट नहीं बना है यह अन्य लोगों द्वारा सुलभ नहीं होगा, और आपको इसका परीक्षण करने के लिए इंटरनेट कनेक्शन की आवश्यकता नहीं होगी। यह केवल एक ब्राउज़र का उपयोग करता है ताकि वह अपने HTML दस्तावेज़ को "पढ़ा जाए" जैसे कि वह एक वेबसाइट थी
3
मार्कअप टैग को समझें वे सामान्य पाठ के रूप में एक वेबपृष्ठ पर प्रदर्शित नहीं होते हैं इसके बजाय, वे अपने वेब ब्राउज़र को बताते हैं कि पेज और इसकी सामग्री कैसे प्रदर्शित करें। "प्रारंभ टैग" में निर्देश हैं उदाहरण के लिए, यह ब्राउज़र को पाठ के रूप में प्रदर्शित करने के लिए कह सकता है
साहसिक. इस उदाहरण में, स्टार्ट टैग और समाप्ति टैग के बीच सभी पाठ को बोल्ड होगा: आप भी जहां निर्देश लागू करने के लिए ब्राउज़र को बताने के लिए एक टैग "अंत" की जरूरत है। एन्ज कोष्ठ में भी अंत टैग लिखें, लेकिन पहले ब्रैकेट के बाद स्लैश के साथ उन्हें शुरू करें।
- कोण ब्रैकेट्स में प्रारंभ टैग लिखें:
<
शुरू टैग यहाँ है>
- कोण कोष्ठ में अंतिम टैग लिखें, लेकिन पहले ब्रैकेट के बाद स्लैश डाल दें:
अंत टैग यहाँ जाता है>
) - कार्यात्मक मार्कअप टैग लिखने के तरीके सीखने के लिए पढ़ें इस कदम के लिए, आपको केवल याद रखना आवश्यक है बुनियादी प्रारूप वे इसमें लिखे गए हैं: <> और >
- यदि आप अन्य एचटीएमएल ट्यूटोरियल्स का भी उपयोग कर रहे हैं, तो आप देख सकते हैं कि वे "तत्वों" के रूप में टैग्स को संदर्भित करते हैं, और "तत्व सामग्री" के रूप में शुरू और समाप्ति टैग के बीच के पाठ को देखें।
4
अपना पहला टैग लिखें . हर एचटीएमएल दस्तावेज़ एक टैग के साथ शुरू होता है
और एक के साथ समाप्त होता है
. यह ब्राउज़र को बताता है कि इन टैग्स के बीच हर चीज HTML में है अपने दस्तावेज़ में ये टैग जोड़ें:
- लिखना आपके दस्तावेज़ के शीर्ष पर
- कमरे बनाने के लिए कई बार प्रवेश करें, फिर लिखें .
- लिखना याद रखें सब इन दो ब्रांडों के बीच के बाकी ट्यूटोरियल
5
भाग को भरें आपके दस्तावेज़ का टैग्स के बीच और , एक प्रारंभिक टैग लिखें
और एक अंतिम
. उनके बीच में लिखने के लिए जगह दें। इन टैग्स के बीच सब कुछ वास्तव में पृष्ठ पर दिखाई नहीं देगा। निम्नलिखित को आज़माएं और देखें कि इसके बजाय यह कहां है:
- टैग्स के बीच और , लिखना और
- टैग्स के बीच और , लिखना कैसे जानें HTML - विकी कैसे.
- दस्तावेज़ को सहेजें और उसे एक ब्राउज़र में खोलें (या दस्तावेज़ को सहेजें और ब्राउज़र पृष्ठ ताज़ा करें यदि वह अभी भी खुला है)। क्या आप पता बार के ऊपर, अपने ब्राउज़र के शीर्ष पर क्या लिखा है?
6
एक अनुभाग बनाएं . इस शुरुआती दस्तावेज़ का शेष भाग शरीर अनुभाग में जाता है, जो वेब पेज पर प्रदर्शित होता है।
तो अंत चिह्न का , लेकिन
से पहले का , लिखना
और . इस ट्यूटोरियल के बाकी हिस्सों के लिए, जो कुछ भी आप लिखते हैं, इन टैग्स के बीच आते हैं। आपके पास अब एक ऐसा दस्तावेज होना चाहिए जो इस तरह दिखता है (अंक की सूची को अनदेखा कर):- कैसे जानें HTML - विकी कैसे
7
कई शैलियों में पाठ जोड़ें अब यह कुछ लिखने का समय है जिसे आप अपने ब्राउज़र में देख सकते हैं! आपके द्वारा "शरीर" टैग के अंदर जो कुछ भी टाइप किया गया है, वह HTML ब्राउज़र को सहेजने और पृष्ठ को रीफ़्रेश करने के बाद आपके ब्राउज़र में दिखाई देगा।
न करें प्रतीकों के साथ कुछ भी नहीं लिखें
< या
>, हालांकि, क्योंकि आपका ब्राउज़र सामान्य टेक्स्ट के बजाय इसे HTML कथन के रूप में व्याख्या करने का प्रयास करेगा लिखने का प्रयास करें
हैलो दुनिया! (या जो भी आप चाहते हैं), फिर इन नए टैग को चारों ओर जोड़ें और देखें कि हर बार क्या होता है:
हैलो दुनिया!
पाठ "इटैलिक" के रूप में: हैलो दुनिया!हैलो दुनिया!
पाठ "बोल्ड" के रूप में दिखाएगा: हैलो दुनिया!हैलो दुनिया!
स्ट्राइकथ्रू टेक्स्ट दिखाएगा: हैलो दुनिया!हैलो दुनिया!
अधिलेखित पाठ दिखाएगा: हैलो दुनिया!हैलो दुनिया!
सदस्यता वाले पाठ दिखाएगा: हैलो दुनिया!- इनमें से संयोजनों की कोशिश करें: कैसे
हैलो दुनिया!
यह क्या है?
8
पैराग्राफ में अपने पाठ को विभाजित करें यदि आप अपने HTML दस्तावेज़ में पाठ की एक से अधिक पंक्तियाँ लिखने का प्रयास करते हैं, तो आप देख सकते हैं कि लाइन ब्रेक आपके ब्राउज़र में दिखाई नहीं देते हैं। आपको इन्हें कोड करने की ज़रूरत है:
यह एक अलग पैराग्राफ है
यह वाक्य एक लाइन ब्रेक द्वारा पीछा किया जाता है
इससे पहले शुरू होता है
यह पहला टैग है जिसे आप देखते हैं कि अंतिम टैग की आवश्यकता नहीं है। इन्हें "खाली टैग" कहा जाता है- अनुभाग नाम प्रदर्शित करने के लिए हेडिंग बनाएं:
टेक्स्ट
: सबसे बड़ा हेडर
टेक्स्ट
(दूसरा स्तर हैडर)
टेक्स्ट
(3 स्तर के शीर्षलेख)
टेक्स्ट
(चौथा स्तर हैडर)
टेक्स्ट
(सबसे छोटा हेडर)
9
सूचियां बनाने के बारे में जानें आपके वेब पेज पर सूचियां लिखने के कई तरीके हैं। निम्न कोड प्रकारों को आज़माएं और देखें कि आपको कौन पसंद है। ध्यान दें कि टैग की एक जोड़ी पूरी सूची को शामिल करती है (उदाहरण के लिए, टैग
"अनारक्षित सूची" के लिए), जबकि सूची में अलग-अलग आइटम टैग के दूसरे जोड़ी से घिरे हुए हैं, जैसे कि
और .
- बुलेटेड सूची बनाने के लिए इस कोड का उपयोग करें:
- एक आइटम
- एक और आइटम
- एक और आइटम
- या क्रमांकित सूचियों के लिए:
- आइटम 1
- आइटम 2
- मद 3
- या परिभाषाओं की सूची के लिए यह कोड:
- कॉफ़ी
- - गर्म पेय
- दूध
- - शीत पेय
10
लाइन ब्रेक्स, क्षैतिज रेखाएं और चित्रों के साथ अपने पेज को टिडिअर बनाएं। अब यह समय है कि आप अपने पृष्ठ पर टेक्स्ट से परे चीजों को जोड़ने की कोशिश करें। निम्नलिखित टैग आज़माएं छवि टैग से लिंक करने के लिए आपको एक ऑनलाइन छवि होस्टिंग सेवा का उपयोग करने की आवश्यकता होगी:
- HTML में एक पंक्ति सम्मिलित करें:
- HTML में एक पंक्ति बनाएं:
- तस्वीरें जोड़ें:
11
पृष्ठ पर अन्य स्थानों के लिए लिंक डालें आप इस कोड को अन्य पृष्ठों और साइटों के लिंक्स सम्मिलित करने के लिए भी उपयोग कर सकते हैं, लेकिन अब के लिए, क्योंकि आपके पास अभी तक साइट नहीं है, हम विशिष्ट "एंकर" या उस पृष्ठ पर ध्यान केंद्रित करेंगे जो आप कर सकते हैं: