Computer >> कंप्यूटर ट्यूटोरियल >  >> सॉफ्टवेयर >> ब्राउज़र्स

Google Chrome में HTML स्रोत कैसे देखें

Chrome में स्रोत कोड देखें

तो आप किसी वेबसाइट का स्रोत कोड कैसे देखते हैं? Google Chrome ब्राउज़र का उपयोग करके ऐसा करने के लिए चरण-दर-चरण निर्देश यहां दिए गए हैं।

  1. Google Chrome वेब ब्राउज़र खोलें (यदि आपके पास Google Chrome इंस्टॉल नहीं है, तो यह मुफ्त डाउनलोड है)।

  2. उस वेब पेज पर जाएं जिसकी आप जांच करना चाहते हैं।

  3. पेज पर राइट-क्लिक करें और दिखाई देने वाले मेनू को देखें। उस मेनू से, पेज स्रोत देखें पर क्लिक करें।

  4. उस पेज का स्रोत कोड अब ब्राउज़र में एक नए टैब के रूप में दिखाई देगा।

  5. वैकल्पिक रूप से, आप कीबोर्ड शॉर्टकट Ctrl+U का उपयोग PC पर साइट का स्रोत कोड प्रदर्शित करने वाली विंडो खोलने के लिए कर सकते हैं। Mac पर, यह शॉर्टकट Command+Option+U है।

Chrome के डेवलपर टूल का उपयोग करें

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

Chrome के डेवलपर टूल का उपयोग करने के लिए:

  1. Google Chrome खोलें।

  2. उस वेब पेज पर जाएं जिसकी आप जांच करना चाहते हैं।

  3. ब्राउज़र विंडो के ऊपरी-दाएं कोने में तीन-डॉट मेनू चुनें।

  4. मेनू से, अधिक टूल पर होवर करें और फिर दिखाई देने वाले मेनू में डेवलपर टूल चुनें।

  5. एक विंडो खुलेगी जो बाएं फलक पर HTML स्रोत कोड और दाएं फलक पर संबंधित CSS दिखाती है।

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

क्या स्रोत कोड देखना कानूनी है?

वर्षों से, हमारे पास कई नए वेब डिजाइनर हैं जो सवाल करते हैं कि क्या किसी साइट का स्रोत कोड देखना और इसे अपनी शिक्षा के लिए और अंततः उनके द्वारा किए जाने वाले काम के लिए उपयोग करना स्वीकार्य है। जबकि किसी साइट के कोड को पूरी तरह से कॉपी करना और इसे अपनी वेबसाइट पर अपने काम के रूप में पेश करना निश्चित रूप से स्वीकार्य नहीं है, उस कोड को सीखने के लिए एक स्प्रिंगबोर्ड के रूप में उपयोग करना वास्तव में इस उद्योग में कई प्रगति कैसे की जाती है।

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

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

सिर्फ HTML से अधिक

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

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

  1. क्रोम एक्सटेंशन का सोर्स कोड कैसे देखें क्रोम एक्सटेंशन का सोर्स कोड कैसे देखें

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

  1. Google Chrome कस्टमाइज़ करें: बैकग्राउंड और थीम बदलने की चरण-दर-चरण गाइड Google Chrome कस्टमाइज़ करें: बैकग्राउंड और थीम बदलने की चरण-दर-चरण गाइड

    डिफ़ॉल्ट रूप से, जब आप Google Chrome खोलते हैं, तो बैकग्राउंड एक खाली सफेद विंडो होती है जिसमें एक Google Search बॉक्स और उसके ठीक नीचे कुछ शॉर्टकट होते हैं। यदि आपके डिवाइस पर डार्क मोड सक्षम है, तो बैकग्राउंड गहरा ग्रे हो सकता है। किसी भी तरह से, यह काफी उबाऊ और नीरस है। आप Chrome में बैकग्राउंड

  1. Google Chrome में डिफॉल्ट फॉन्ट कैसे बदलें: चरण-दर-चरण गाइड Google Chrome में डिफॉल्ट फॉन्ट कैसे बदलें: चरण-दर-चरण गाइड

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