Google क्रोम में एचटीएमएल स्रोत कैसे देखें

जानें कि कैसे अपना स्रोत कोड देखकर वेबसाइट बनाई गई थी

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

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

बस एचटीएमएल से ज्यादा

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

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

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

कदम निर्देशों द्वारा कदम

  1. Google क्रोम वेब ब्राउज़र खोलें (यदि आपके पास Google क्रोम इंस्टॉल नहीं है, तो यह एक मुफ्त डाउनलोड है)।
  2. उस वेब पेज पर नेविगेट करें जिसे आप देखना चाहते हैं
  3. पृष्ठ पर राइट-क्लिक करें और दिखाई देने वाले मेनू को देखें। उस मेनू से, पृष्ठ स्रोत देखें पर क्लिक करें।
  4. उस पृष्ठ का स्रोत कोड अब ब्राउज़र में एक नए टैब के रूप में दिखाई देगा।
  5. वैकल्पिक रूप से, आप एक साइट पर CTRL + U के कीबोर्ड शॉर्टकट का उपयोग किसी साइट के स्रोत कोड के साथ विंडो खोलने के लिए भी कर सकते हैं। मैक पर, यह शॉर्टकट कमांड + Alt + U है

डेवलपर उपकरण

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

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

  1. Google क्रोम खोलें।
  2. उस वेब पेज पर नेविगेट करें जिसे आप देखना चाहते हैं
  3. ब्राउज़र विंडो के ऊपरी दाएं कोने में तीन पंक्तियों वाले आइकन पर क्लिक करें।
  4. मेनू से, अधिक टूल पर होवर करें और फिर दिखाई देने वाले मेनू में डेवलपर टूल पर क्लिक करें।
  5. यह एक विंडो खुल जाएगा जो फलक के बाईं ओर HTML स्रोत कोड और दाईं ओर संबंधित सीएसएस दिखाएगा।
  6. वैकल्पिक रूप से, यदि आप किसी वेब पेज पर किसी तत्व पर राइट क्लिक करते हैं और दिखाई देने वाले मेनू से निरीक्षण का चयन करते हैं, तो क्रोम के डेवलपर टूल पॉप अप हो जाएंगे और आपके द्वारा चुने गए सटीक तत्व को HTML में दाईं ओर दिखाए गए संबंधित सीएसएस के साथ हाइलाइट किया जाएगा। यदि आप साइट के एक विशिष्ट टुकड़े को कैसे तैयार किया गया था, इस बारे में अधिक जानना चाहते हैं तो यह बहुत उपयोगी है।

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

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

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

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