HTML, CSS और JavaScript लिखें और टाइप करते समय एक लाइव, सैंडबॉक्स्ड पूर्वावलोकन देखें। रिस्पॉन्सिव डिवाइस चौड़ाई, मोनाको सिंटैक्स हाइलाइटिंग, प्रीटियर फ़ॉर्मेटिंग, स्थानीय ऑटोसेव और HTML, प्रिंट या पीडीएफ निर्यात। मुफ़्त, कोई साइनअप नहीं.
लाइव पूर्वावलोकन वाला यह ऑनलाइन HTML संपादक आपके टाइप करना बंद करने के बाद लगभग 300ms कोड के साथ आपके HTML, CSS और जावास्क्रिप्ट को प्रस्तुत करता है। डेस्कटॉप, टैबलेट (768px) और मोबाइल (375px) चौड़ाई पर लेआउट की जाँच करें, प्रीटियर के साथ मार्कअप को व्यवस्थित करें, और .html या PDF में निर्यात करें। आपका कोड केवल इस ब्राउज़र में स्वत: सहेजा जाता है और कभी अपलोड नहीं किया जाता है।
यह लाइव HTML संपादक आपके टाइप करते समय कोड के बगल में आपके मार्कअप को प्रस्तुत करता है, ताकि आप लेआउट को प्रोटोटाइप कर सकें, स्निपेट्स का परीक्षण कर सकें और प्रोजेक्ट सेट किए बिना प्रयोग करके सीख सकें। यह सिंटैक्स हाइलाइटिंग और स्वत: पूर्णता के लिए मोनाको (वीएस कोड के पीछे संपादक इंजन) का उपयोग करता है, और यह बिना किसी साइनअप के पूरी तरह से आपके ब्राउज़र में चलता है।
विशेषताएँ
स्प्लिट, कोड और पूर्वावलोकन मोड के साथ वास्तविक समय सैंडबॉक्स पूर्वावलोकन
रिस्पॉन्सिव डिवाइस की चौड़ाई (डेस्कटॉप, 768px टैबलेट, 375px मोबाइल)
सिंटैक्स हाइलाइटिंग के साथ मोनाको संपादक
एक-क्लिक प्रीटियर कोड फ़ॉर्मेटिंग
इस ब्राउज़र के स्थानीय संग्रहण में स्वतः सहेजना, कभी अपलोड नहीं किया गया
.html के रूप में निर्यात करें, पीडीएफ के रूप में प्रिंट/सहेजें, या त्वरित बहु-पृष्ठ पीडीएफ
लाइव HTML संपादक का उपयोग कैसे करें
1
अपना HTML चिपकाएँ या लिखें
एक पूरा दस्तावेज़ या एक टुकड़ा टाइप करें। CSS को <style> टैग में और JavaScript को <script> टैग में रखें, या उन्हें https पर CDN से लोड करें।
2
लाइव पूर्वावलोकन देखें
आपके टाइप करना बंद करने के बाद पूर्वावलोकन फलक लगभग 300ms को पुन: प्रस्तुत करता है। कार्यक्षेत्र को व्यवस्थित करने के लिए स्प्लिट, कोड या पूर्वावलोकन दृश्य का उपयोग करें।
3
प्रतिक्रियाशील चौड़ाई की जाँच करें
लेआउट कैसे पुनः प्रवाहित होता है यह देखने के लिए डेस्कटॉप (पूरी चौड़ाई), टैबलेट (768px) और मोबाइल (375px) के बीच स्विच करें।
4
मार्कअप को सुंदर बनाएं
दस्तावेज़ को प्रीटियर (2-स्पेस इंडेंट, 100-वर्ण पंक्तियाँ) के साथ पुनः इंडेंट करने के लिए Prettify पर क्लिक करें।
5
अपना काम निर्यात करें
सटीक कोड को .html के रूप में डाउनलोड करें, चयन योग्य बहु-पृष्ठ टेक्स्ट के लिए प्रिंट → पीडीएफ के रूप में सहेजें का उपयोग करें, या त्वरित छवि कैप्चर के लिए पीडीएफ पर क्लिक करें।
सामान्य उपयोग के मामले
एक नौसिखिया एक HTML टैग टाइप करता है और तुरंत देखता है कि यह क्या करता है।
एक डेवलपर एक टूटे हुए स्निपेट को अलग करता है और किसी प्रोजेक्ट को बनाए बिना इसे डीबग करता है।
एक विपणक किसी HTML ईमेल या लैंडिंग-पेज ब्लॉक को समीक्षा के लिए भेजने से पहले 375px पर उसका पूर्वावलोकन करता है।
एक शिक्षक कक्षा में कोड और प्रस्तुत आउटपुट को एक साथ दिखाता है।
एक फ्रीलांसर एक घटक का नकल करता है और ग्राहक को एक .html फ़ाइल या पीडीएफ भेजता है।
विस्तृत मार्गदर्शिका
HTML कोड का ऑनलाइन परीक्षण कैसे करें
अपना कोड संपादक में चिपकाएँ और पूर्वावलोकन स्वचालित रूप से अपडेट हो जाएगा, बिना रन बटन दबाए। आप <!DOCTYPE html>, <head> और <body> के साथ एक संपूर्ण दस्तावेज़ चिपका सकते हैं, या कुछ शैलियों के साथ <div> जैसा केवल एक टुकड़ा चिपका सकते हैं, और ब्राउज़र गायब संरचना को भर देता है। परिणाम को पूर्ण आकार में देखने के लिए पूर्वावलोकन दृश्य पर स्विच करें, या जब आप लिखने के लिए जगह चाहते हैं तो कोड दृश्य पर स्विच करें। यदि कुछ सही नहीं दिखता है, तो पहले Prettify पर क्लिक करें: साफ़ इंडेंटेशन एक बंद टैग या गलत </div> को पहचानना बहुत आसान बना देता है।
HTML, CSS और JavaScript को एक साथ लिखें
संपादक एक ही HTML दस्तावेज़ पर काम करता है, इसलिए CSS और JavaScript इसके अंदर जाते हैं। शैलियों को <head> में या इनलाइन शैली विशेषताओं के रूप में एक <style> ब्लॉक में जोड़ें, और <body> के अंत में एक <script> ब्लॉक में व्यवहार जोड़ें या onclick जैसे ईवेंट विशेषताओं के रूप में जोड़ें। आप किसी लाइब्रेरी या फ्रेमवर्क को सीडीएन से भी लोड कर सकते हैं, जैसे कि गूगल फॉन्ट, टेलविंड की प्ले सीडीएन या चार्टिंग लाइब्रेरी, एक सामान्य <लिंक> या <स्क्रिप्ट src> टैग के साथ जो https यूआरएल पर इंगित करता है। पूर्वावलोकन आपकी स्क्रिप्ट को एक वास्तविक ब्राउज़र इंजन में चलाता है, इसलिए DOM ईवेंट, टाइमर, कैनवास और CORS-सक्षम एपीआई के लिए फ़ेच कॉल सभी उसी तरह व्यवहार करते हैं जैसे वे एक लाइव पेज पर करते हैं।
फ़ोन और टैबलेट की चौड़ाई पर प्रतिक्रियाशील लेआउट का परीक्षण करें
इसकी चौड़ाई सीमित करने के लिए पूर्वावलोकन के ऊपर डिवाइस बटन का उपयोग करें। अपने <head> में <meta name = "viewport" content = "width = डिवाइस-विड्थ, प्रारंभिक-स्केल = 1"> शामिल करें ताकि मीडिया क्वेरीज़ पूर्वावलोकन चौड़ाई पर उसी तरह प्रतिक्रिया दें जैसे वे फ़ोन पर करते हैं।
प्रीसेट
पूर्वावलोकन चौड़ाई
क्या जांच करनी है
डेस्कटॉप
पूर्ण फलक चौड़ाई
अधिकतम-चौड़ाई वाले कंटेनर, बहु-स्तंभ ग्रिड, होवर स्थिति
गोली
768px
सामान्य एमडी ब्रेकप्वाइंट: एनएवी कोलैप्सिंग, 2-कॉलम लेआउट
पूर्वावलोकन आपके कोड से लोड किया गया एक सैंडबॉक्स फ़्रेम है। सुरक्षा के लिए इसका एक अपारदर्शी मूल है: आपकी स्क्रिप्ट इस साइट की कुकीज़ या स्टोरेज को नहीं पढ़ सकती है, और यह साइट आपके पेज को नहीं पढ़ सकती है। वह डिज़ाइन कुछ पूर्वानुमानित सीमाओं की ओर ले जाता है, जिन्हें नीचे सूचीबद्ध किया गया है ताकि आप अपने कोड के बजाय संपादक को डीबग करने में समय बर्बाद न करें।
काम करता है
काम नहीं करता (और क्यों)
इनलाइन <शैली>, शैली विशेषताएँ और <स्क्रिप्ट>
संबंधित पथ जैसे src='img/logo.png': सर्वर पर उन्हें हल करने के लिए कोई फ़ोल्डर नहीं है। पूर्ण https यूआरएल या डेटा यूआरआई का उपयोग करें
https पर सीडीएन से सीएसएस और जेएस
आपकी स्क्रिप्ट के अंदर लोकलस्टोरेज, सेशनस्टोरेज और कुकीज़: सैंडबॉक्स उन्हें ब्लॉक कर देता है (वे एक सिक्योरिटी एरर फेंकते हैं)
अलर्ट(), पुष्टि(), फॉर्म और लिंक एक नए टैब में खुल रहे हैं
फ़ेच() उन एपीआई के लिए जो सीओआरएस हेडर नहीं भेजते हैं: ब्राउज़र प्रतिक्रिया को ब्लॉक कर देता है, ठीक वैसे ही जैसे यह किसी वास्तविक साइट पर होता है
सार्वजनिक यूआरएल से छवियाँ और फ़ॉन्ट
एकाधिक फ़ाइलें, एनपीएम आयात या बिल्ड चरण: यह एक एकल-दस्तावेज़ संपादक है, प्रोजेक्ट आईडीई नहीं
Prettify आपके ब्राउज़र में Prettier का HTML फ़ॉर्मेटर चलाता है। यह 2 स्थानों के साथ नेस्टेड टैग को फिर से इंडेंट करता है, 100 अक्षरों पर लंबी लाइनें लपेटता है, और जब कोई टैग बहुत चौड़ा हो जाता है तो विशेषताओं को अपनी लाइनों पर रखता है। इसे HTML संरचना के लिए ट्यून किया गया है, इसलिए <style> और <script> ब्लॉक की सामग्री काफी हद तक वैसी ही बनी हुई है जैसी आपने उन्हें लिखी थी। यह आपके पृष्ठ द्वारा प्रस्तुत की जाने वाली सामग्री को नहीं बदलता है। यदि मार्कअप में एक सिंटैक्स त्रुटि है जिसे प्रीटियर पार्स नहीं कर सकता है, तो आपको एक संदेश दिखाई देगा और आपका कोड बिल्कुल वैसा ही छोड़ दिया जाएगा जैसा वह था।
HTML या PDF में निर्यात करें
तीन निर्यात विकल्प हैं, प्रत्येक एक अलग नौकरी के लिए उपयुक्त है। .html डाउनलोड संपादक में कोड को बाइट-दर-बाइट करता है, जो ब्राउज़र में खोलने या किसी प्रोजेक्ट में छोड़ने के लिए तैयार है। प्रिंट रेंडर किए गए पूर्वावलोकन को आपके ब्राउज़र के प्रिंट डायलॉग पर भेजता है: चयन योग्य टेक्स्ट, कार्यशील मल्टी-पेज ब्रेक और आपके जावास्क्रिप्ट द्वारा खींची गई किसी भी चीज़ को प्राप्त करने के लिए पीडीएफ के रूप में सहेजें चुनें। पीडीएफ बटन एक वन-क्लिक शॉर्टकट है जो स्थिर HTML और CSS को एक छवि के रूप में कैप्चर करता है, इसे A4 पेजों में विभाजित करता है और डाउनलोड करता है। क्योंकि यह एक छवि है, इसका पाठ चयन योग्य नहीं है, और जावास्क्रिप्ट द्वारा बनाई गई सामग्री दिखाई नहीं देगी। यदि त्वरित पीडीएफ विफल हो जाता है, तो सामान्य कारण CORS हेडर के बिना एक बाहरी छवि है; इसके बजाय प्रिंट का उपयोग करें।
HTML ईमेल टेम्प्लेट का पूर्वावलोकन करें
ईमेल क्लाइंट ब्राउज़र की तुलना में बहुत कम HTML और CSS का समर्थन करते हैं, इसलिए ईमेल टेम्प्लेट पुराने सम्मेलनों का पालन करते हैं: एक तालिका-आधारित लेआउट, लगभग 600px चौड़ा एक सामग्री कॉलम, <style> ब्लॉक के बजाय इनलाइन शैली विशेषताएँ, और निश्चित चौड़ाई विशेषताओं वाली छवियां। यहां इस तरह से निर्माण करें और यह जांचने के लिए 375px प्रीसेट पर स्विच करें कि फोन पर ईमेल कैसे स्टैक होता है। पूर्वावलोकन दिखाता है कि एक आधुनिक ब्राउज़र आपके ईमेल को कैसे प्रस्तुत करता है, जो एक अच्छी पहली जांच है। कुछ क्लाइंट, विशेष रूप से विंडोज़ पर आउटलुक, इसे अलग तरीके से प्रस्तुत करेंगे, इसलिए अभियान शुरू होने से पहले हमेशा वास्तविक इनबॉक्स में एक परीक्षण भेजें।
चिपकाने के लिए स्टार्टर स्निपेट
छोटे पैटर्न जिन्हें आप टाइप कर सकते हैं और अनुकूलित कर सकते हैं। प्रत्येक को केवल कुछ पंक्तियों की आवश्यकता होती है और पूर्वावलोकन में तुरंत अपना परिणाम दिखाता है।
आपके द्वारा टाइप किया गया कुछ भी सर्वर पर नहीं भेजा जाता है। विज़िट के बीच आपके काम को जारी रखने के लिए, संपादक आपके कोड को इस डिवाइस पर इस ब्राउज़र के स्थानीय स्टोरेज में स्वचालित रूप से सहेजता है, इसलिए रिफ्रेश के बाद भी यह वहां मौजूद रहता है लेकिन अन्य डिवाइस या अन्य ब्राउज़र के साथ सिंक नहीं होता है। रीसेट पर क्लिक करने से आपका कोड नमूना दस्तावेज़ से बदल जाता है। अपनी ब्राउज़र सेटिंग में इस साइट का डेटा साफ़ करने से सहेजी गई प्रतिलिपि हट जाती है। साझा कंप्यूटर पर, जाने से पहले रीसेट दबाएँ।
इसके बजाय पूर्ण कोड खेल के मैदान का उपयोग कब करें
यह संपादक तेज़, निजी, एकल-फ़ाइल कार्य के लिए बनाया गया है: स्निपेट का परीक्षण करना, HTML सीखना, फ़ोन की चौड़ाई पर लेआउट की जाँच करना या ईमेल ब्लॉक का पूर्वावलोकन करना, बिना किसी खाते की आवश्यकता के। यदि आपको कई फ़ाइलों, एनपीएम पैकेजों, एक फ्रेमवर्क निर्माण चरण, एक साझा करने योग्य लिंक या वास्तविक समय सहयोग की आवश्यकता है, तो कोडपेन, जेएसफ़िल्ड या प्लेकोड जैसे एक पूर्ण खेल का मैदान बेहतर उपयुक्त है। कई डेवलपर्स दोनों का उपयोग करते हैं: इस तरह के चेक के लिए एक त्वरित स्क्रैचपैड, और उन परियोजनाओं के लिए एक पूर्ण खेल का मैदान जिन्हें वे साझा करना चाहते हैं।
मैं मुफ़्त में HTML कोड का ऑनलाइन परीक्षण कैसे करूँ?
अपना HTML संपादक में टाइप करें या पेस्ट करें। आपके द्वारा टाइप करना बंद करने के बाद पूर्वावलोकन लगभग 300ms को पुन: प्रस्तुत करता है, यह दर्शाता है कि एक वास्तविक ब्राउज़र आपके कोड को कैसे प्रदर्शित करता है। कोई रन बटन नहीं है, कोई इंस्टॉल नहीं है और कोई साइनअप नहीं है।
क्या मैं HTML संपादक में CSS और JavaScript शामिल कर सकता हूँ?
हाँ। सीएसएस को <स्टाइल> ब्लॉक या स्टाइल एट्रिब्यूट्स में और जावास्क्रिप्ट को <स्क्रिप्ट> ब्लॉक या इवेंट एट्रिब्यूट्स जैसे ऑनक्लिक में रखें। आप https URL के साथ CDN से लाइब्रेरी और फ़ॉन्ट भी लोड कर सकते हैं। यह एक एकल-दस्तावेज़ संपादक है, इसलिए अलग-अलग .css और .js फ़ाइलें समर्थित नहीं हैं।
मैं HTML कोड को ऑनलाइन कैसे सुशोभित करूँ?
अपना गन्दा या छोटा HTML पेस्ट करें और Prettify पर क्लिक करें। प्रीटियर नेस्टेड टैग्स को 2 स्थानों के साथ रीइंडेंट करता है और पेज के रेंडर होने के तरीके को बदले बिना 100 अक्षरों पर लंबी लाइनें लपेटता है। यदि HTML में कोई सिंटैक्स त्रुटि है, तो Prettier पार्स नहीं कर सकता, आपका कोड अछूता रह जाएगा और आपको एक संदेश दिखाई देगा।
क्या मैं अपना HTML कोड PDF के रूप में निर्यात कर सकता हूँ?
हाँ, दो तरीके. प्रिंट → पीडीएफ के रूप में सहेजें आपके ब्राउज़र के प्रिंट इंजन का उपयोग करता है, जो चयन योग्य टेक्स्ट, मल्टी-पेज आउटपुट और आपके जावास्क्रिप्ट द्वारा प्रस्तुत कुछ भी देता है। पीडीएफ बटन स्थिर HTML और CSS की त्वरित एक-क्लिक छवि कैप्चर है, जो A4 पृष्ठों में विभाजित है; इसका पाठ चयन योग्य नहीं है और जावास्क्रिप्ट आउटपुट शामिल नहीं है।
क्या मेरा HTML कोड कहीं भी सहेजा गया है?
केवल आपके अपने ब्राउज़र में. संपादक इस ब्राउज़र के स्थानीय संग्रहण में स्वतः सहेजता है ताकि आपका काम ताज़ा बना रहे, लेकिन सर्वर पर कुछ भी अपलोड नहीं किया जाता है और यह अन्य उपकरणों के साथ समन्वयित नहीं होता है। इसे हटाने के लिए इस साइट का डेटा रीसेट करें या साफ़ करें पर क्लिक करें।
पूर्वावलोकन में मेरी छवि या बाहरी CSS फ़ाइल लोड क्यों नहीं होती?
img/logo.png या style.css जैसे संबंधित पथों में हल करने के लिए कोई फ़ोल्डर नहीं है, क्योंकि पूर्वावलोकन सर्वर पर फ़ाइलों के बजाय आपके कोड से बनाया गया है। पूर्ण https URL का उपयोग करें, CSS को <style> ब्लॉक में पेस्ट करें, या एक छोटी छवि को डेटा URI में बदलें।
लोकलस्टोरेज मेरी स्क्रिप्ट में त्रुटि क्यों उत्पन्न करता है?
पूर्वावलोकन एक अपारदर्शी मूल के साथ सैंडबॉक्स वाले फ़्रेम में चलता है, इसलिए यह इस साइट के डेटा को नहीं छू सकता है। परिणामस्वरूप, लोकलस्टोरेज, सेशनस्टोरेज और कुकीज आपके कोड के लिए अनुपलब्ध हैं और एक सिक्योरिटी एरर फेंकते हैं। किसी स्थानीय फ़ाइल या पूर्ण खेल के मैदान में भंडारण तर्क का परीक्षण करें।
क्या मैं शुरुआती तौर पर HTML सीखने के लिए इस HTML संपादक का उपयोग कर सकता हूँ?
हाँ। एक टैग टाइप करें और तुरंत परिणाम देखें। बुनियादी संरचना (<h1>, <p>, <a>, <img>) से शुरू करें, फिर एक <style> ब्लॉक जोड़ें और रंगों और लेआउट के साथ प्रयोग करें। वह त्वरित फीडबैक किसी फ़ाइल को संपादित करने और ब्राउज़र टैब को रीफ्रेश करने की तुलना में बहुत तेज़ है।
क्या यह एक प्रतिक्रियाशील पूर्वावलोकन के रूप में काम करता है?
हाँ। पूर्वावलोकन को डेस्कटॉप (पूरी चौड़ाई), टैबलेट (768px) और मोबाइल (375px) के बीच स्विच करें। अपने <head> में एक व्यूपोर्ट मेटा टैग जोड़ें ताकि आपके मीडिया प्रश्न उसी तरह प्रतिक्रिया दें जैसे वे वास्तविक फ़ोन पर देते हैं।
