কীভাবে ব্যবহার করবেন
- উপরের বোতামগুলো দিয়ে HTML, CSS ও JavaScript এডিটরের মধ্যে বদলান এবং আপনার কোড লিখুন।
- টাইপ করা থামালে প্রিভিউ স্বয়ংক্রিয়ভাবে আপডেট হয়; চাইলে এটি বন্ধ করে চালান বোতামে ক্লিক করুন।
- কনসোলে আউটপুট ও ত্রুটি দেখুন, তারপর পেজটি সংরক্ষণ করতে HTML ডাউনলোড করুন বোতামে ক্লিক করুন।
অপশনগুলোর ব্যাখ্যা
- স্যান্ডবক্স
- প্রিভিউটি একটি আলাদা sandbox-এ চলে; এটি এই সাইটের কুকি বা স্টোরেজ পড়তে পারে না এবং কোনো ডায়ালগ খুলতে পারে না।
- কনসোল
- console.log, warn ও error-এর আউটপুট এবং লাইন নম্বরসহ ধরা না-পড়া ত্রুটি দেখায়; সর্বশেষ 200টি এন্ট্রি রাখে।
- ডাউনলোড
- তিনটি অংশ একত্র করে একটি HTML ফাইল তৈরি করে; স্টাইলগুলো style ট্যাগে এবং স্ক্রিপ্টটি body-এর শেষে রাখা হয়।
পেজ কীভাবে জোড়া লাগে
তিনটি এডিটর এই ক্রমে একটি ডকুমেন্টে একত্র হয়। «HTML ডাউনলোড করুন»-এ ক্লিক করলে একই বিন্যাস পাওয়া যায়, তবে প্রিভিউয়ের নিচের পেজে কনসোল আউটপুট পাঠানোর ছোট স্ক্রিপ্টটি ডাউনলোড থেকে বাদ যায়।
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>স্ক্রিপ্টটি আপনার HTML-এর পরে আসে বলে পেজ লোড হওয়ার অপেক্ষা না করেই সরাসরি document.getElementById ব্যবহার করা যায়। HTML এডিটরে শুধু body-র ভেতরের অংশ লিখুন, html, head বা body ট্যাগ নিজে নয়। প্রিভিউ একটি iframe, যার শুধু স্ক্রিপ্ট চালানোর অনুমতি আছে; এ কারণেই alert ডায়ালগ এবং এই সাইটের কুকিতে প্রবেশ আটকানো থাকে।
সচরাচর জিজ্ঞাসিত প্রশ্ন
আপনি কি বাহ্যিক লাইব্রেরি ব্যবহার করতে পারবেন?
হ্যাঁ। HTML এডিটরে jsDelivr-এর মতো কোনো CDN নির্দেশ করে এমন script বা link ট্যাগ যোগ করুন।
alert কেন দেখা যায় না?
sandbox ডায়ালগ আটকে দেয়, তাই alert ও confirm কোনো কাজ করে না। এর বদলে console.log ব্যবহার করুন।
আমার কোড কি সংরক্ষণ করা হয়?
এটি সংরক্ষণ বা আপলোড করা হয় না। পেজ বন্ধ করার আগে HTML ফাইলটি ডাউনলোড করুন।
গোপনীয়তা
এই টুলটি পুরোপুরি আপনার ব্রাউজারে চলে। আপনার ফাইল ও লেখা আপনার ডিভাইসেই প্রসেস হয় এবং কখনো আমাদের সার্ভারে আপলোড হয় না।