मूल HTML कोड को समझने के लिए 5 कदम

मूल HTML कोड को समझने के लिए 5 कदम

जैसा कि हम जानते हैं, HTML वेब का एक महत्वपूर्ण हिस्सा है। और जबकि कुछ वेब डिज़ाइनर मैन्युअल रूप से HTML टाइप करके पेज बनाते हैं, फिर भी इसके बारे में थोड़ा जानना आसान है।





हम भाषा की कुछ बुनियादी बातों को देखेंगे, जिसमें HTML वास्तव में क्या है, कुछ मूलभूत अवधारणाएँ, और यह अन्य भाषाओं के साथ कैसे इंटरैक्ट करता है। इसे 'डमी के लिए HTML' क्रैश कोर्स के रूप में सोचें।



HTML मूल बातें: HTML क्या है?

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





के तौर पर मार्कअप भाषा , HTML आपको केवल पृष्ठों का प्रदर्शन लेआउट बनाने देता है। सच्चा प्रोग्रामिंग भाषा , जावा या सी++ की तरह, इसमें लॉजिक और कमांड होते हैं जो किए जाते हैं।

हालांकि यह आसान है, HTML वेब पर प्रत्येक पृष्ठ की रीढ़ की हड्डी में है। यह इस बात के लिए ज़िम्मेदार है कि कौन सा टेक्स्ट बोल्ड के रूप में दिखाई देता है, छवियों को जोड़ता है, और अन्य पृष्ठों से लिंक करता है। हमारे पास एक HTML FAQ है जो अधिक व्याख्या करता है।



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

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



चरण 1: टैग की अवधारणा को समझना

HTML की एक प्रणाली का उपयोग करता है टैग दस्तावेज़ के विभिन्न तत्वों को वर्गीकृत करने के लिए।

अधिकांश टैग जोड़े में प्रभावित टेक्स्ट को अपने अंदर लपेटने के लिए आते हैं। यहाँ एक सरल उदाहरण है (



टैग टेक्स्ट बनाता है बोल्ड ; हम इस पर एक पल में और चर्चा करेंगे।)

This is some bold text .

ध्यान दें कि क्लोजिंग टैग फॉरवर्ड स्लैश (/) से कैसे शुरू होता है। यह एक क्लोजिंग टैग को दर्शाता है, जो महत्वपूर्ण है। यदि आप किसी टैग को बंद नहीं करते हैं, तो प्रारंभ से लेकर आगे तक सभी चीज़ों में वह विशेषता होगी।

ऐप जो आपको कपड़े खोजने में मदद करता है

हालांकि, सभी टैग में एक जोड़ी नहीं होती है। कुछ HTML तत्व, जिन्हें कहा जाता है खाली तत्व , कोई सामग्री नहीं है और अपने दम पर मौजूद है। एक उदाहरण है


टैग, जो एक लाइन ब्रेक है। आप स्लैश जोड़कर ऐसे टैग को 'बंद' कर सकते हैं (जैसे


) लेकिन यह सख्ती से जरूरी नहीं है।

चरण 2: कंकाल HTML लेआउट

एक उचित HTML दस्तावेज़ में कुछ निश्चित टैग परिभाषित होने चाहिए ताकि इसे सही ढंग से निर्धारित किया जा सके। ये आवश्यक भाग हैं:

  • प्रत्येक HTML दस्तावेज़ की शुरुआत |_+_| . से होनी चाहिए खुद को ऐसा घोषित करने के लिए। इस प्रकार, इसका समापन टैग, |_+_| , HTML फ़ाइल में अंतिम आइटम है।
  • अगला, |_+_| अनुभाग में पृष्ठ शीर्षक, पृष्ठ पर चलने वाली विभिन्न स्क्रिप्ट, और इसी तरह की जानकारी शामिल है। जैसा कि नाम से पता चलता है, यह आमतौर पर प्रारंभिक |_+_| . के ठीक बाद आता है उपनाम। अंतिम उपयोगकर्ता को इन टैगों में अधिकतर सामग्री दिखाई नहीं देती है।
  • अंत में |_+_| टैग उस पृष्ठ का पाठ रखता है जिसे पाठक देखता है (साथ ही और भी बहुत कुछ)। यहां आपको चित्र, लिंक, और बहुत कुछ मिलेगा।

चूंकि

अनुभाग एक HTML दस्तावेज़ का बड़ा हिस्सा बनाता है, हमारा शेष पूर्वाभ्यास उन तत्वों को देखता है जो इससे संबंधित हैं।

चरण 3: स्वरूपण के लिए मूल HTML टैग

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

यदि ये टैग बहुत ही बुनियादी लगते हैं, तो याद रखें कि HTML को 1993 में सभी तरह से बनाया गया था। वेब अपने शुरुआती चरणों में बहुत अधिक टेक्स्ट-आधारित था।

सरल पाठ स्वरूपण

HTML मूल पाठ शैलियों का समर्थन करता है जैसे आप Microsoft Word में पाएंगे:

  • |_+_| टैग टेक्स्ट बनाते हैं बोल्ड .
  • |_+_| टैग (जो 'जोर' के लिए खड़ा है) तिरछे अक्षर लिखना मूलपाठ।

HTML पुराने का भी समर्थन करता है

बोल्ड और के लिए टैग

इटैलिक के लिए। हालांकि, ऊपर वाले का उपयोग करना बेहतर है।

संक्षेप में,

तथा

दिखाएँ कि किसी चीज़ को कैसे समझा जाना चाहिए, जबकि बाद वाले टैग आपको केवल यह बताते हैं कि उसे कैसा दिखना चाहिए। दृष्टिबाधित लोगों द्वारा उपयोग किए जाने वाले स्क्रीन रीडर्स के लिए ये पुराने टैग अधिक पहुंच योग्य हैं।

पैराग्राफ और अन्य प्रभाग

HTML का

टैग आपको दस्तावेज़ के एक भाग को परिभाषित करने देता है। आमतौर पर, किसी अनुभाग को एक निश्चित तरीके से प्रारूपित करने के लिए इसे CSS (नीचे देखें) के साथ जोड़ा जाता है।

NS

टैग आपको टेक्स्ट को पैराग्राफ में विभाजित करने देता है। ब्राउज़र स्वचालित रूप से इनके पहले और बाद में कुछ जगह डाल देंगे, जिससे आप स्वाभाविक रूप से टेक्स्ट को तोड़ सकते हैं।

आप अपने दस्तावेज़ में हेडर जोड़ सकते हैं और इसका उपयोग करके अनुसरण करना आसान बना सकते हैं

के माध्यम से

टैग। H1 सबसे महत्वपूर्ण हैडर है, जबकि H6 सबसे कम महत्वपूर्ण है। लगभग हर MakeUseOf लेख सूचना को व्यवस्थित करने के लिए H2 और H3 हेडर का उपयोग करता है।

साधते प्रवेश करना आपके HTML दस्तावेज़ में लाइन ब्रेक जोड़ने के लिए वास्तव में उन्हें प्रदर्शित नहीं किया जाएगा। इसके बजाय, आप उपयोग कर सकते हैं

एक लाइन ब्रेक जोड़ने के लिए।

यहां एक उदाहरण दिया गया है जो इन सभी का उपयोग करता है:

चरण 4: चित्र सम्मिलित करना

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

आप का उपयोग करके एक छवि सम्मिलित करते हैं

उपनाम। इसे के साथ जोड़कर

विशेषता आपको यह निर्दिष्ट करने देती है कि आप छवि को कहाँ से लोड करना चाहते हैं।

की एक और महत्वपूर्ण विशेषता

कैश मेमोरी के स्तर की गति ________ से प्रभावित होती है।

टैग है

. ऑल्ट टेक्स्ट आपको स्क्रीन रीडर्स के लिए या इमेज के ठीक से लोड नहीं होने की स्थिति में इमेज का वर्णन करने की अनुमति देता है। आप किसी छवि का वैकल्पिक पाठ देखने के लिए उस पर माउस ले जा सकते हैं।

उपयोग

तथा




छवि प्रदर्शित होने वाले पिक्सेल की संख्या निर्दिष्ट करने के लिए तत्व।

यह सब एक साथ रखो, और एक छवि टैग इस तरह दिखता है:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



वर्ल्ड वाइड वेब अन्य पृष्ठों के लिंक के बिना एक वेब नहीं होगा। का उपयोग करते हुए

टैग, आप किसी भी पाठ पर अन्य पृष्ठों से लिंक कर सकते हैं।

के अंदर

src

टैग, द

विशेषता बताती है कि आप कहां लिंक कर रहे हैं। बस यूआरएल चिपकाने से काम चलेगा। आप का उपयोग कर सकते हैं

alt

कुछ पाठ जोड़ने के लिए तत्व जो तब प्रकट होता है जब कोई लिंक पर होवर करता है।

एक बुनियादी लिंक इस तरह दिखता है:

width

NS

height

टैग में कई अन्य संभावित तत्व हैं, लेकिन हम यहां उनके बारे में नहीं जानेंगे।

HTML कैसे CSS और JavaScript से जुड़ता है

हमने HTML के मूल सिद्धांतों को देखा है और यह कैसे एक वेबपेज को स्थापित करता है। लेकिन जैसा कि आप कल्पना कर सकते हैं, HTML अकेले इसे आधुनिक वेब के लिए नहीं काटता है। साधारण HTML वेबपेज 'वेब 1.0' दिनों में आम थे, जब अधिकांश वेबसाइटें स्टैटिक टेक्स्ट से ज्यादा कुछ नहीं थीं।

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

Dr. Phil

टैग हमने चर्चा की? इसके अंदर (और अन्य टैग), आप परिभाषित कर सकते हैं a

गुण। फिर, अपने संलग्न सीएसएस दस्तावेज़ में, आप इसके लिए निर्देश लिख सकते हैं कि कैसे

देखना चाहिए।

आप अपने एचटीएमएल कोड में इन स्टाइल तत्वों को इनलाइन परिभाषित कर सकते हैं, लेकिन इसे खराब अभ्यास माना जाता है क्योंकि इसे बनाए रखना अधिक कठिन होता है। इसके साथ और जानें ये सरल सीएसएस उदाहरण . यह भी देखें अपनी CSS फाइलों को ऑप्टिमाइज़ कैसे करें .

जावास्क्रिप्ट

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

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

ये केवल कुछ प्राथमिक उदाहरण हैं। जावास्क्रिप्ट एक स्क्रिप्टिंग भाषा है जो बहुत कुछ करने में सक्षम है, और तुलनात्मक रूप से HTML और CSS की तुलना में कहीं अधिक जटिल है। देखो जावास्क्रिप्ट का हमारा अवलोकन बहुत अधिक के लिए।

वेब डिज़ाइन के संपूर्ण दायरे को देखना इस लेख के दायरे से बाहर है, लेकिन यह कहना पर्याप्त है कि HTML आज हम जिन वेबपेजों को जानते हैं, उन्हें बनाने के लिए अन्य भाषाओं के साथ इंटरैक्ट करते हैं।

एचटीएमएल का विकास

यह ध्यान रखना महत्वपूर्ण है कि HTML स्थिर नहीं है। एचटीएमएल कई संशोधनों से गुजरा है, सबसे हाल ही में एचटीएमएल 5 है। विशेष रूप से, यह मानक एडोब फ्लैश जैसे मालिकाना प्रारूपों पर निर्भर होने के बजाय देशी वीडियो एम्बेडिंग का समर्थन करता है।

एचटीएमएल के नए पुनरावृत्तियों ने कुछ पुरातन टैगों को समय-समय पर बहिष्कृत घोषित किया है। इनमें भयानक टैग शामिल हैं जैसे

href

तथा

title

(क्रमशः स्क्रॉल और फ्लैश टेक्स्ट) आमतौर पर 1990 के दशक की वेबसाइट डिजाइन में देखा जाता है। इसलिए ध्यान रखें कि समय के साथ मानक बदलते हैं।

थोड़ा सा HTML ज्ञान एक लंबा रास्ता तय करता है

हमने एक संक्षिप्त भ्रमण किया है कि एक HTML दस्तावेज़ कैसे काम करता है। अब आप वेबपेजों की संरचना के मूल सिद्धांतों को जान गए हैं। यहां तक ​​कि अगर आप वेबपेज नहीं बनाते हैं, तो आप उस वेब के बारे में थोड़ा अधिक जागरूक होते हैं जिसका आप हर दिन उपयोग करते हैं।

वॉलेट जो आपके क्रेडिट कार्ड की सुरक्षा करते हैं

अधिक जानने के लिए, अपने वेब विकास कौशल को आवश्यक टूल के साथ अपग्रेड करें और फिर चेक आउट करें अपनी पहली वेबसाइट कैसे डिज़ाइन करें, इस बारे में हमारी मार्गदर्शिका .

छवि क्रेडिट: Belyaevskiy/ जमा तस्वीरें

साझा करना साझा करना कलरव ईमेल अपने वर्चुअलबॉक्स लिनक्स मशीनों को सुपरचार्ज करने के लिए 5 टिप्स

वर्चुअल मशीनों द्वारा पेश किए गए खराब प्रदर्शन से थक गए हैं? अपने वर्चुअलबॉक्स प्रदर्शन को बढ़ावा देने के लिए आपको यहां क्या करना चाहिए।

आगे पढ़िए संबंधित विषय
  • प्रोग्रामिंग
  • एचटीएमएल
  • वेब विकास
  • जावास्क्रिप्ट
  • वेबमास्टर उपकरण
  • प्रोग्रामिंग
  • एचटीएमएल 5
लेखक के बारे में बेन स्टेग्नर(१७३५ लेख प्रकाशित)

बेन MakeUseOf में डिप्टी एडिटर और ऑनबोर्डिंग मैनेजर हैं। उन्होंने 2016 में पूर्णकालिक लेखन के लिए अपनी आईटी नौकरी छोड़ दी और फिर कभी पीछे मुड़कर नहीं देखा। वह सात वर्षों से अधिक समय से एक पेशेवर लेखक के रूप में तकनीकी ट्यूटोरियल, वीडियो गेम अनुशंसाएँ और बहुत कुछ कवर कर रहा है।

बेन स्टेग्नर . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें