बुनियादी HTML कोड को समझने के लिए 5 कदम
विज्ञापन
जैसा कि हम जानते हैं कि HTML वेब का एक महत्वपूर्ण हिस्सा है। और जबकि कुछ वेब डिज़ाइनर मैन्युअल रूप से HTML टाइप करके पेज बनाते हैं, फिर भी इसके बारे में थोड़ा जानना आसान है।
हम भाषा के कुछ मूल सिद्धांतों को देखने जा रहे हैं, जिसमें HTML वास्तव में, कुछ मौलिक अवधारणाएं और अन्य भाषाओं के साथ कैसे सहभागिता करता है। इसे "डमी के लिए HTML" क्रैश कोर्स के रूप में सोचें।
HTML मूल बातें: HTML क्या है?
HTML हाइपरटेक्स्ट मार्कअप लैंग्वेज के लिए है । और जबकि यह कभी-कभी प्रोग्रामिंग भाषाओं के साथ जुड़ा होता है, यह सटीक नहीं है।
मार्कअप लैंग्वेज के रूप में, HTML केवल आपको पृष्ठों का डिस्प्ले लेआउट बनाने देता है। जावा या C ++ जैसी एक सच्ची प्रोग्रामिंग भाषा में तर्क और कमांड होते हैं जिन्हें बाहर किया जाता है।
जबकि यह सरल है, HTML वेब पर हर पृष्ठ की रीढ़ है। यह इस बात के लिए ज़िम्मेदार है कि पाठ किस प्रकार बोल्ड दिखाता है, चित्र जोड़ रहा है, और अन्य पृष्ठों को लिंक कर रहा है। हमारे पास एक HTML FAQ है आवश्यक HTML FAQ आपको आवश्यक HTML को बुकमार्क करना चाहिए आपको बुकमार्क करना चाहिए HTML थोड़ी देर के लिए आसपास रहा है, इसलिए यह समय है जब आपने मूल बातें सीख ली हैं। यह है कि यह क्या है, यह कैसे काम करता है, और आप आज HTML में कुछ सामान्य तत्व कैसे लिख सकते हैं! और अधिक पढ़ें जो अधिक व्याख्या करता है।
आप अपने ब्राउज़र के अधिकांश वेबपृष्ठों पर राइट-क्लिक कर सकते हैं और उनके पीछे HTML देखने के लिए पृष्ठ स्रोत या समान दृश्य चुन सकते हैं। इसमें संभवतः बहुत सारे कोड होंगे जो HTML नहीं है, लेकिन आप इसके माध्यम से झार सकते हैं।
यहां तक कि अगर आपको मार्कअप या प्रोग्रामिंग भाषाओं के साथ शून्य अनुभव है, तो HTML के बारे में थोड़ा सीखना आपको अधिक सूचित वेब उपयोगकर्ता बना देगा। एचटीएमएल कैसे काम करता है, यह समझने में मदद करने के लिए पांच बुनियादी चरणों से चलें। हम रास्ते में उदाहरण प्रदान करेंगे।
चरण 1: टैग की अवधारणा को समझना
HTML दस्तावेज़ के विभिन्न तत्वों को वर्गीकृत करने के लिए टैग की एक प्रणाली का उपयोग करता है।
अधिकांश टैग जोड़े के अंदर प्रभावित पाठ को लपेटने के लिए आते हैं। यहाँ एक सरल उदाहरण है (टैग पाठ को बोल्ड बनाता है; हम इस पर एक पल में और चर्चा करेंगे।)
This is some bold text . ध्यान दें कि समापन टैग आगे स्लैश (/) से कैसे शुरू होता है। यह एक समापन टैग को दर्शाता है, जो महत्वपूर्ण है। यदि आप एक टैग को बंद नहीं करते हैं, तो शुरू से ही सब कुछ उस विशेषता का होगा।
हालांकि, सभी टैग में एक जोड़ी नहीं होती है। कुछ HTML तत्व, जिन्हें खाली तत्व कहा जाता है, उनकी कोई सामग्री नहीं है और वे स्वयं मौजूद हैं। एक उदाहरण है
चरण 2: कंकाल HTML लेआउट
एक उचित HTML दस्तावेज़ में कुछ निश्चित टैग होने चाहिए ताकि वह सही तरीके से निर्धारित हो। ये आवश्यक अंग हैं:
- प्रत्येक HTML दस्तावेज़ के साथ शुरू होना चाहिए
खुद को इस तरह से घोषित करने के लिए। इस प्रकार, इसका समापन टैग,, एक HTML फ़ाइल में अंतिम आइटम है। - इसके बाद द
अनुभाग में पृष्ठ शीर्षक, पृष्ठ पर चलने वाली विभिन्न स्क्रिप्ट और इसी तरह की जानकारी शामिल है। जैसा कि नाम से पता चलता है, यह आमतौर पर प्रारंभिक के ठीक बाद आता हैटैग। अंतिम उपयोगकर्ता को इन टैगों में बहुत अधिक सामग्री दिखाई नहीं देती है। - अंततः
टैग उस पृष्ठ का पाठ रखता है जिसे पाठक देखता है (प्लस बहुत अधिक)। यहां आपको चित्र, लिंक और बहुत कुछ मिलेगा।
के बाद से अनुभाग एक HTML दस्तावेज़ का एक बड़ा हिस्सा बनाता है, हमारा बाकी का चलना उन तत्वों को देखता है जो इससे संबंधित हैं।
चरण 3: स्वरूपण के लिए मूल HTML टैग
अगला, आइए HTML दस्तावेज़ बनाने वाले कुछ सामान्य टैग देखें। बेशक, हर तत्व को कवर करना संभव नहीं है, इसलिए हम कुछ महत्वपूर्ण बातों की समीक्षा करेंगे। हमने कई और HTML उदाहरणों को कवर किया है 17 सरल HTML कोड उदाहरण आप 10 मिनट में सीख सकते हैं 17 सरल HTML कोड उदाहरण आप 10 मिनट में सीख सकते हैं एक मूल वेबपेज बनाना चाहते हैं? इन HTML उदाहरणों को जानें और एक टेक्स्ट एडिटर में देखें कि वे आपके ब्राउज़र में कैसे दिखते हैं। और पढ़ें अगर ये आपको संतुष्ट नहीं करते हैं।
यदि ये टैग बहुत बुनियादी लगते हैं, तो याद रखें कि 1993 में HTML सभी तरह से बनाया गया था। वेब अपने शुरुआती दौर में बहुत पाठ-आधारित था।
सरल पाठ स्वरूपण
HTML मूल पाठ शैलियों का समर्थन करता है जैसे आप Microsoft Word में पाएंगे:
- टैग टेक्स्ट को बोल्ड बनाते हैं।
- टैग (जो "जोर" के लिए खड़ा है) पाठ को इटैलिक करेगा।
HTML बोल्ड और इटैलिक्स के लिए पुराने टैग का भी समर्थन करता है। हालांकि, ऊपर वाले का उपयोग करना बेहतर होगा।
संक्षेप में, और दिखाएं कि किसी चीज़ को कैसे समझा जाना चाहिए, जबकि बाद वाले टैग केवल आपको बताते हैं कि यह कैसा दिखना चाहिए। नेत्रहीनों द्वारा उपयोग किए जाने वाले स्क्रीन पाठकों के लिए ये पूर्व टैग अधिक सुलभ हैं।
अनुच्छेद और अन्य प्रभाग
एचटीएमएल के टैग आपको दस्तावेज़ के एक भाग को परिभाषित करने देता है। आमतौर पर, यह एक निश्चित तरीके से एक अनुभाग को प्रारूपित करने के लिए CSS (नीचे देखें) के साथ जोड़ा जाता है।
टैग आपको पैराग्राफ में पाठ को विभाजित करने देता है। ब्राउजर अपने आप इससे पहले और बाद में कुछ जगह डाल देगा, जिससे आप स्वाभाविक रूप से पाठ को तोड़ सकते हैं।
आप अपने दस्तावेज़ में हेडर जोड़ सकते हैं और इसका उपयोग करना आसान बना सकते हैं
के माध्यम से टैग। H1 सबसे महत्वपूर्ण शीर्ष लेख है, जबकि H6 सबसे महत्वपूर्ण है। लगभग हर MakeUseOf लेख जानकारी को व्यवस्थित करने के लिए H2 और H3 हेडर का उपयोग करता है।
अपने HTML डॉक्यूमेंट में लाइन ब्रेक जोड़ने के लिए एन्ट्री मारना वास्तव में उन्हें प्रदर्शित नहीं करेगा। इसके बजाय, आप उपयोग कर सकते हैं
यहाँ एक उदाहरण है जो इन सभी का उपयोग करता है:
उदाहरण शीर्षक
यह एक पैराग्राफ है।
यह एक सेकंड है
पैरा दो लाइनों के बीच विभाजित।
चरण 4: छवियाँ सम्मिलित करना
छवियाँ अधिकांश वेबपृष्ठों का एक महत्वपूर्ण हिस्सा हैं। आप उन्हें HTML के साथ आसानी से जोड़ सकते हैं, और यहां तक कि उनके लिए विभिन्न गुण भी सेट कर सकते हैं।
आप का उपयोग कर एक छवि डालें src विशेषता के साथ संयोजित करने से आप निर्दिष्ट कर सकते हैं कि आप छवि को कहाँ से लोड करना चाहते हैं।
की एक और महत्वपूर्ण विशेषता
चित्र में दिखाई देने वाले पिक्सेल की संख्या निर्दिष्ट करने के लिए width और height तत्वों का उपयोग करें।
यह सब एक साथ रखो, और एक छवि टैग इस तरह दिखता है:
चरण 5: लिंक जोड़ना
वर्ल्ड वाइड वेब अन्य पृष्ठों के लिंक के बिना एक वेब के बहुत नहीं होगा। का उपयोग करते हुए टैग, आप किसी भी पाठ पर अन्य पृष्ठों से लिंक कर सकते हैं।
के अंदर टैग, href विशेषता बताता है कि आप कहां लिंक कर रहे हैं। बस URL चिपकाने से काम चल जाएगा। आप title तत्व का उपयोग उस पाठ का एक सा जोड़ने के लिए कर सकते हैं जो किसी लिंक पर होवर करते समय दिखाई देता है।
एक मूल लिंक इस तरह दिखता है:
Visit Google टैग में कई अन्य संभावित तत्व होते हैं, लेकिन हम उन्हें यहां नहीं डुबाएंगे।
सीएसएस और जावास्क्रिप्ट के साथ HTML कैसे जुड़ता है
हमने HTML के मूल को देखा है और यह एक वेबपृष्ठ कैसे स्थापित करता है। लेकिन जैसा कि आप कल्पना कर सकते हैं, अकेले एचटीएमएल ने इसे आधुनिक वेब के लिए नहीं काटा है। सरल वेब वेबपेज "वेब 1.0" दिनों में आम थे, जब अधिकांश वेबसाइटें स्थिर पाठ से ज्यादा कुछ नहीं थीं।
लेकिन अब, हमारे पास और भी बहुत कुछ है। CSS (कैस्केडिंग स्टाइल शीट्स) आवश्यक CSS3 के गुण धोखा शीट आवश्यक CSS3 के गुण धोखा शीट के मास्टर हमारे CSS3 के गुणों के साथ आवश्यक सीएसएस सिंटैक्स शीट को धोखा देते हैं। Read More एक ऐसी भाषा है जिसका उपयोग यह बताने के लिए किया जाता है कि HTML में आपके द्वारा तैयार किया गया पाठ कैसा दिखना चाहिए। याद करो टैग हमने चर्चा की? इसके अंदर (और अन्य टैग), आप एक class विशेषता को परिभाषित कर सकते हैं। फिर, आपके सीएसएस दस्तावेज़ के साथ, आप निर्देश लिख सकते हैं कि वह class कैसी class चाहिए।
आप अपने HTML कोड में इन शैली तत्वों को इनलाइन परिभाषित कर सकते हैं, लेकिन इसे खराब अभ्यास माना जाता है क्योंकि इसे बनाए रखना बहुत मुश्किल है। इन सरल सीएसएस उदाहरणों के साथ और जानें 10 सरल सीएसएस कोड उदाहरण आप 10 मिनटों में सीख सकते हैं 10 सरल सीएसएस कोड उदाहरण आप 10 मिनटों में सीख सकते हैं। हम इनलाइन स्टाइलशीट बनाने के तरीके के बारे में जानेंगे ताकि आप अपने सीएसएस कौशल का अभ्यास कर सकें। फिर हम 10 मूल CSS उदाहरणों पर आगे बढ़ेंगे। वहां से, आपकी कल्पना की सीमा है! अधिक पढ़ें ।
जावास्क्रिप्ट
हमने देखा है कि HTML सामग्री को परिभाषित करता है और CSS उपस्थिति को निर्धारित करता है। जावास्क्रिप्ट, वेब के लिए महत्वपूर्ण तिकड़ी का अंतिम सदस्य, वेब पृष्ठों को हर बार एक नया पृष्ठ लोड किए बिना लोगों के कार्यों का जवाब देने की अनुमति देता है।
उदाहरण के लिए, जावास्क्रिप्ट एक वेबसाइट को आपको यह चेतावनी देने की अनुमति देता है कि आपके द्वारा दर्ज किया गया पासवर्ड सबमिट करने से पहले उसकी आवश्यकताओं को पूरा नहीं करता है। एक वेब डिजाइनर एक स्लाइड शो में चित्रों के माध्यम से जावास्क्रिप्ट का उपयोग कर सकता है या इनपुट के लिए उपयोगकर्ता को संकेत दे सकता है।
ये कुछ प्राथमिक उदाहरण हैं। जावास्क्रिप्ट एक स्क्रिप्टिंग भाषा है जो पूरी तरह से करने में सक्षम है, और HTML और CSS की तुलना में तुलनात्मक रूप से अधिक जटिल है। जावास्क्रिप्ट का हमारा अवलोकन देखें जावास्क्रिप्ट क्या है और यह कैसे काम करता है? जावास्क्रिप्ट क्या है और यह कैसे काम करता है? जावास्क्रिप्ट क्या है? यह एक प्रोग्रामिंग लैंग्वेज है जिसका इस्तेमाल वेब पेजों को बढ़ाने के लिए किया जाता है। इसमें डायनामिक रूप से अपडेट होने वाले वेब पेज, यूजर इंटरफेस और बहुत कुछ शामिल हैं। चलो जावास्क्रिप्ट क्या सभी के बारे में है। और अधिक पढ़ें।
वेब डिज़ाइन के पूर्ण दायरे को देखते हुए इस लेख के दायरे से परे है, लेकिन यह कहने के लिए पर्याप्त है कि एचटीएमएल उन अन्य भाषाओं के साथ सहभागिता करता है जिन्हें हम आज जानते हैं।
HTML का विकास
यह ध्यान रखना महत्वपूर्ण है कि HTML स्थिर नहीं है। HTML कई संशोधनों के माध्यम से चला गया है, सबसे हाल ही में HTML 5. विशेष रूप से, यह मानक एडोब फ्लैश जैसे मालिकाना प्रारूपों पर निर्भर होने के बजाय देशी वीडियो एम्बेडिंग का समर्थन करता है।
HTML के नए पुनरावृत्तियों भी समय-समय पर अपवित्र के रूप में कुछ पुरातन टैग की घोषणा करते हैं। इनमें जैसे भयानक टैग शामिल हैं तथा (कि स्क्रॉल और फ्लैश टेक्स्ट क्रमशः) 1990 के वेबसाइट डिजाइन में आमतौर पर देखा जाता है। इसलिए ध्यान रखें कि समय के साथ मानक बदलते हैं।
थोड़ा HTML ज्ञान एक लंबा रास्ता तय करता है
हमने HTML दस्तावेज़ कैसे काम करता है, इसका एक संक्षिप्त दौरा किया है। अब आप जानते हैं कि वेबपेज कैसे संरचित होते हैं, इसके मूल सिद्धांतों को जानते हैं। यहां तक कि अगर आप वेबपेज बनाने के लिए नहीं जाते हैं, तो आप उस वेब के बारे में अधिक जागरूक होते हैं जिसका आप हर दिन उपयोग करते हैं।
अधिक जानने के लिए, अपने वेब डेवलपमेंट स्किल्स को आवश्यक टूल्स के साथ अपग्रेड करें। इन 10 आवश्यक टूल्स के साथ अपने वेब डेवलपमेंट स्किल्स को अपग्रेड करें इन 10 आवश्यक टूल्स के साथ अपने वेब डेवलपमेंट स्किल्स को अपग्रेड करें विकासशील वेबसाइटें शुरू करने के लिए तैयार हैं? नए और विशेषज्ञ वेब डेवलपर्स के लिए ये ऑनलाइन टूल आपके कौशल को बढ़ावा देने की गारंटी है! और पढ़ें और फिर अपनी पहली वेबसाइट को डिज़ाइन करने के तरीके के बारे में हमारी मार्गदर्शिका देखें कि वेबसाइट कैसे बनाएं: शुरुआती लोगों के लिए वेबसाइट कैसे बनाएं: शुरुआती लोगों के लिए आज मैं आपको स्क्रैच से एक पूरी वेबसाइट बनाने की प्रक्रिया के माध्यम से मार्गदर्शन करूंगा। चिंता मत करो अगर यह मुश्किल लगता है। मैं आपको इसके हर कदम पर मार्गदर्शन दूंगा। अधिक पढ़ें ।
इमेज क्रेडिट: बिल्लाएव्स्की / डिपॉज़िटोटोस
HTML, HTML5, जावास्क्रिप्ट, प्रोग्रामिंग, वेब डेवलपमेंट, वेबमास्टर टूल्स के बारे में अधिक जानकारी प्राप्त करें।
