डिवाइस लिंक
-
एंड्रॉयड
-
आई - फ़ोन
-
Chrome बुक
-
मैक
-
खिड़कियाँ
- डिवाइस गुम है?
क्या आप इस बारे में उत्सुक हैं कि वेब पेज किससे बनता है? जानना चाहते हैं कि अपनी वेबसाइट पर फ़ॉन्ट आकार या रंग कैसे बदलें? किसी वेबपेज का HTML कोड देखकर आप ये सभी काम और भी बहुत कुछ कर सकते हैं।
इस ट्यूटोरियल में, हम आपको दिखाएंगे कि क्रोम में किसी वेबपेज का HTML कोड कैसे देखें।
Chrome में HTML कोड देखना
HTML में लिखते समय, स्रोत कोड किसी वेब पेज की संरचना और सामग्री को परिभाषित करने के लिए उपयोग किए जाने वाले टैग और विशेषताओं की श्रृंखला है।
स्रोत कोड वेब ब्राउज़र द्वारा पढ़ा जाता है और स्क्रीन पर आपके द्वारा देखे जाने वाले ग्राफ़िकल वेब पेज में अनुवादित किया जाता है। किसी वेब पेज के स्वरूप और अनुभव को परिभाषित करने के अलावा, स्रोत कोड का उपयोग पॉप-अप विंडो, फॉर्म और ड्रॉप-डाउन मेनू जैसी इंटरैक्टिविटी जोड़ने के लिए भी किया जा सकता है।
हालाँकि औसत इंटरनेट उपयोगकर्ता को कभी भी किसी वेब पेज के HTML स्रोत कोड को देखने की आवश्यकता नहीं होती है, ऐसे कई कारण हैं जिनसे कुछ लोग ऐसा करना चाहेंगे।
डेवलपर्स के लिए, स्रोत कोड को देखना यह समझने का एक सहायक तरीका हो सकता है कि एक पृष्ठ कैसे संरचित है और यह निर्धारित करता है कि कौन से स्टाइल और स्क्रिप्टिंग तत्वों का उपयोग किया जा रहा है। डिज़ाइनरों के लिए, यह देखना फायदेमंद हो सकता है कि अन्य डिज़ाइनरों ने प्रभावी लेआउट बनाने के लिए HTML का उपयोग कैसे किया है।
कुछ मामलों में, उपयोगकर्ता त्रुटियों का निवारण करने या किसी विशेष वेबसाइट या वेब एप्लिकेशन के काम करने के तरीके के बारे में अधिक जानने के लिए स्रोत कोड भी देखना चाह सकते हैं। कारण जो भी हो, क्रोम में HTML स्रोत कोड देखना अपेक्षाकृत सरल प्रक्रिया है।
विंडोज़ पीसी पर क्रोम में वेबपेज का HTML कोड कैसे देखें
विंडोज़ ऑपरेटिंग सिस्टम क्रोम के सबसे संगत सिस्टमों में से एक है। क्रोम को ओपन-सोर्स क्रोमियम प्रोजेक्ट के शीर्ष पर बनाया गया है, जिसमें माइक्रोसॉफ्ट का प्रमुख योगदानकर्ता है। यह अनुकूलता HTML दायरे तक फैली हुई है, जहां लोकप्रिय ब्राउज़र उपयोगकर्ताओं को किसी भी वेबसाइट का HTML कोड देखने की अनुमति देता है।
आप HTML कोड को दो तरह से देख सकते हैं।
पृष्ठ स्रोत देखें का उपयोग करना
यह विधि सीधी है:
- Chrome खोलें और उस पृष्ठ पर जाएँ जहाँ आप HTML स्रोत कोड देखना चाहते हैं।
- पृष्ठ पर राइट-क्लिक करें और पृष्ठ स्रोत देखें का चयन करें, या स्रोत कोड को एक नए टैब में खोलने के लिए अपने कीबोर्ड पर Ctrl + U दबाएँ।
स्रोत कोड नए टैब में दिखाई देगा, और आप उस पृष्ठ के लिए HTML मार्कअप देखने के लिए इसे स्क्रॉल कर सकते हैं।
डेवलपर टूल का उपयोग करना
Google Chrome में डेवलपर टूल का उपयोग करके किसी वेब पेज के स्रोत कोड का निरीक्षण करने के लिए, नीचे दिए गए चरणों का पालन करें।
- Google Chrome खोलें और उस वेब पेज पर नेविगेट करें जिसका आप निरीक्षण करना चाहते हैं।
- अपने कीबोर्ड पर Ctrl + Shift + I दबाएँ। डेवलपर टूल फलक आपके द्वारा देखे जा रहे वेबपेज के बगल में एक डॉक में खुलेगा।
- फलक के शीर्ष पर "तत्व" टैब पर क्लिक करें। यह वेब पेज के लिए HTML स्रोत कोड प्रदर्शित करेगा।
- अब आप पृष्ठ के स्रोत कोड की समीक्षा कर सकते हैं। किसी तत्व को संक्षिप्त करने के लिए, उसके टैग नाम के आगे त्रिकोण पर क्लिक करें। किसी घटक के बारे में अधिक जानकारी देखने के लिए, उस पर राइट-क्लिक करें और "निरीक्षण करें" चुनें।
ध्यान रखें कि यह विधि HTML पृष्ठों के लिए सर्वोत्तम है; अन्य प्रकार के वेब पेजों के स्रोत कोड को देखना संभव है, लेकिन फ़ॉर्मेटिंग को पढ़ना अधिक चुनौतीपूर्ण हो सकता है।
मैक पर क्रोम में वेबपेज का HTML कोड कैसे देखें
यदि आप एक वेब डेवलपर हैं, तो किसी वेबपेज का HTML कोड देखने में सक्षम होना महत्वपूर्ण है। इससे आप देख सकते हैं कि पेज कैसे संरचित है और आने वाली किसी भी समस्या का निवारण कर सकते हैं। सौभाग्य से, Mac पर Chrome में ऐसा करना आसान है। बस इन चरणों का पालन करें:
- Chrome खोलें और उस वेबपेज पर जाएँ जहाँ आप HTML कोड देखना चाहते हैं।
- पृष्ठ पर राइट-क्लिक करें और "निरीक्षण करें" चुनें।
- स्क्रीन के नीचे HTML कोड प्रदर्शित करने वाला एक नया फलक खुलेगा।
- आप यह देखने के लिए HTML कोड में विशिष्ट तत्वों पर भी क्लिक कर सकते हैं कि उन्हें पृष्ठ पर कैसे स्टाइल किया गया है। उदाहरण के लिए, आप किसी तत्व को चुनकर और फिर खुलने वाले फलक में "शैलियाँ" टैब पर क्लिक करके देख सकते हैं कि कौन सी सीएसएस शैलियाँ उस पर लागू की जा रही हैं।
- फलक को बंद करने के लिए, शीर्ष-दाएँ कोने में "X" पर क्लिक करें।
वैकल्पिक रूप से, आप स्रोत कोड देखने के लिए क्रोम डेवलपर टूल्स का उपयोग कर सकते हैं।
- Google Chrome खोलें और उस वेबपेज पर जाएँ जिसका आप निरीक्षण करना चाहते हैं।
- ब्राउज़र के ऊपरी दाएं कोने में मेनू आइकन (तीन बिंदु) पर क्लिक करें और ड्रॉप-डाउन मेनू से अधिक टूल और डेवलपर टूल चुनें।
- डेवलपर टूल्स पैनल स्क्रीन के नीचे खुलेगा। फलक के शीर्ष पर "तत्व" का चयन करें।
- अब आप एलिमेंट्स पैनल में प्रदर्शित वर्तमान पृष्ठ के लिए HTML कोड देखेंगे। आप आवश्यकतानुसार कोड का निरीक्षण और डीबग करने के लिए पैनल में विभिन्न विकल्पों का उपयोग कर सकते हैं।
बस कुछ ही क्लिक के साथ, आप मैक पर क्रोम में किसी भी वेबपेज के लिए HTML कोड आसानी से देख सकते हैं। यह तब सहायक हो सकता है जब आप वेब विकास समस्याओं का निवारण करने का प्रयास कर रहे हों या किसी विशेष वेबसाइट का निर्माण कैसे किया जाता है, इस पर बारीकी से विचार करना चाहते हों।
iPhone ऐप पर Chrome में किसी वेबपेज का HTML कोड कैसे देखें
यदि आप iPhone का उपयोग कर रहे हैं, तो आप Chrome में किसी भी पेज का HTML कोड दो तरीकों से देख सकते हैं:
यूआरएल में बदलाव
आप यूआरएल में एक छोटा सा समायोजन करके किसी भी पेज का HTML कोड आसानी से देख सकते हैं:
- Chrome खोलें और उस वेबपेज पर जाएँ जिसका HTML कोड आप देखना चाहते हैं।
- संपादन मोड आरंभ करने के लिए एड्रेस बार में एक बार टैप करें।
- कर्सर को यूआरएल के सामने ले जाएं.
- "व्यू-सोर्स" टाइप करें और फिर "गो" बटन दबाएं। वेब पेज के लिए HTML कोड क्रोम में प्रदर्शित किया जाएगा।
डेवलपर टूल का उपयोग करना
क्रोम डेवलपर टूल आईओएस पर भी उपलब्ध हैं, लेकिन पीसी की तुलना में इसे लॉन्च करने के लिए अलग-अलग चरणों की आवश्यकता होती है।
- स्क्रीन के ऊपरी दाएं कोने में तीन बिंदुओं पर टैप करें और "सेटिंग्स" चुनें।
- नीचे स्क्रॉल करें और "उन्नत" पर टैप करें, फिर "डेवलपर टूल" के आगे टॉगल सक्षम करें।
- पृष्ठ के खाली क्षेत्र को टैप करके रखें, फिर "तत्व का निरीक्षण करें" चुनें। इससे उस पेज के HTML कोड के साथ एक साइड पैनल खुल जाएगा।
एंड्रॉइड ऐप पर क्रोम में किसी वेबपेज का HTML कोड कैसे देखें
अपने एंड्रॉइड फोन पर क्रोम ऐप का उपयोग करते समय, आप किसी वेबपेज के लिए HTML कोड देखना चाह सकते हैं। यदि आप पृष्ठ के साथ किसी समस्या का निवारण करने का प्रयास कर रहे हैं या यह देखना चाहते हैं कि पृष्ठ कैसे संरचित है तो यह सहायक हो सकता है। अपने Android फ़ोन पर Chrome में किसी वेबपेज का HTML कोड देखने के लिए, इन चरणों का पालन करें:
- अपने एंड्रॉइड पर क्रोम खोलें।
- "व्यू-सोर्स:" टाइप करें और उसके बाद उस पेज का यूआरएल टाइप करें जहां आप सोर्स कोड देखना चाहते हैं। उदाहरण के लिए, यदि आप www.google.com का स्रोत कोड देखना चाहते हैं, तो आपको Chrome के एड्रेस बार में "view-source: www.google.com" टाइप करना होगा।
इससे Chrome के अंतर्निहित डेवलपर टूल इंटरफ़ेस में उस पृष्ठ के लिए HTML कोड खुल जाएगा। वहां से, आप इच्छानुसार कोड को देख और संपादित कर सकते हैं। ध्यान रखें कि यह विधि केवल तभी काम करेगी जब आप जिस वेबसाइट को देखने का प्रयास कर रहे हैं वह अपने स्रोत कोड तक पहुंच की अनुमति देती है। यदि ऐसा नहीं होता है, तो आप त्रुटि संदेश के अलावा कुछ भी नहीं देख पाएंगे।
आईपैड पर क्रोम में वेबपेज का HTML कोड कैसे देखें
आईपैड ऐप पर क्रोम किसी भी वेबपेज के HTML कोड को देखना आसान बनाता है। बस इन चरणों का पालन करें:
- क्रोम खोलें और "व्यू-सोर्स:" टाइप करें और उसके बाद उस पेज का यूआरएल टाइप करें जिसे आप देखना चाहते हैं। उदाहरण के लिए, यदि आप www.alphr.com का स्रोत कोड देखना चाहते हैं, तो आपको Chrome के एड्रेस बार में "view-source: www.alphr.com" टाइप करना होगा।
- "जाओ" बटन दबाएँ.
इससे पृष्ठ के स्रोत कोड को क्रोम के भीतर एक नए टैब में लोड करना चाहिए। वहां से, आप आवश्यकतानुसार कोड को सहेज या साझा कर सकते हैं।
सोर्स कोड वह गोंद है जो पेजों को एक साथ जोड़े रखता है
HTML किसी भी वेबसाइट की नींव है। यह वह संरचना और सामग्री प्रदान करता है जिसे विज़िटर अपने ब्राउज़र में कोई पृष्ठ लोड करते समय देखते हैं।
जबकि किसी पृष्ठ का अंतिम स्वरूप सीएसएस या अन्य स्टाइलिंग भाषाओं द्वारा निर्धारित किया जा सकता है, HTML कोड पृष्ठ की मूल संरचना और सामग्री को निर्धारित करता है। कुछ परिवर्तन संभावित रूप से पृष्ठ को तोड़ सकते हैं. इस कारण से, स्रोत कोड को देखते या उसमें परिवर्तन करते समय HTML की अच्छी समझ होना महत्वपूर्ण है।
साथ ही, ध्यान रखें कि HTML कोड देखना कुछ मामलों में सहायक हो सकता है, लेकिन कोड में किए गए परिवर्तन लाइव वेबपेज पर दिखाई नहीं देंगे। केवल साइट के व्यवस्थापक द्वारा प्रकाशित परिवर्तन ही आगंतुकों को दिखाई देंगे।
क्या आपने इस ट्यूटोरियल में चर्चा की गई किसी भी विधि का उपयोग करके किसी वेबपेज का HTML कोड देखने का प्रयास किया है? यह कैसे हुआ?
चलो टिप्पड़ियों के अनुभाग से पता करते हैं।
