ویرایشگر آنلاین HTML با پیش نمایش زنده (رایگان)

نوشتن و پیش نمایش HTML در زمان واقعی

این ویرایشگر آنلاین HTML با پیش‌نمایش زنده، HTML، CSS و جاوا اسکریپت شما را در حدود 300 میلی‌ثانیه پس از توقف تایپ کردن، در کنار کد ارائه می‌کند. طرح‌بندی را در عرض دسک‌تاپ، تبلت (768 پیکسل) و موبایل (375 پیکسل) بررسی کنید، نشانه‌گذاری را با Prettier مرتب کنید و به html. یا PDF صادر کنید. کد شما فقط در این مرورگر ذخیره می شود و هرگز آپلود نمی شود.

این ویرایشگر زنده HTML نشانه‌گذاری شما را در کنار کد در حین تایپ ارائه می‌کند، بنابراین می‌توانید طرح‌بندی‌های اولیه، تکه‌ها را آزمایش کنید و با آزمایش بدون راه‌اندازی پروژه یاد بگیرید. از Monaco (موتور ویرایشگر پشت VS Code) برای برجسته کردن نحو و تکمیل خودکار استفاده می کند و به طور کامل در مرورگر شما بدون ثبت نام اجرا می شود.

ویژگی ها

پیش‌نمایش جعبه‌شناختی هم‌زمان با حالت‌های تقسیم، کد و پیش‌نمایش
عرض دستگاه پاسخگو (رومیزی، تبلت ۷۶۸ پیکسل، موبایل ۳۷۵ پیکسل)
ویرایشگر موناکو با برجسته سازی نحو
قالب بندی کد زیباتر با یک کلیک
ذخیره خودکار در حافظه محلی این مرورگر، هرگز آپلود نشده است
صادرات به صورت html، چاپ/ذخیره به صورت PDF، یا PDF چند صفحه ای سریع

نحوه استفاده از ویرایشگر زنده HTML

1
HTML خود را بچسبانید یا بنویسید
یک سند کامل یا یک قطعه را تایپ کنید. CSS را در تگ <style> و جاوا اسکریپت را در تگ <script> قرار دهید یا آنها را از CDN روی https بارگذاری کنید.
2
پیش نمایش زنده را تماشا کنید
پس از توقف تایپ، صفحه پیش‌نمایش حدود 300 میلی‌ثانیه دوباره ارائه می‌شود. برای مرتب کردن فضای کاری از نمای تقسیم، کد یا پیش نمایش استفاده کنید.
3
عرض های پاسخگو را بررسی کنید
بین دسکتاپ (عرض کامل)، تبلت (768 پیکسل) و تلفن همراه (375 پیکسل) جابه‌جا شوید تا ببینید طرح‌بندی دوباره چگونه است.
4
نشانه گذاری را زیبا کنید
روی Prettify کلیک کنید تا سند را با Prettier دوباره قرار دهید (تورفتگی 2 فاصله، خطوط 100 کاراکتری).
5
کار خود را صادر کنید
کد دقیق را به صورت html دانلود کنید، از Print → Save as PDF برای متن چند صفحه ای قابل انتخاب استفاده کنید، یا برای گرفتن سریع تصویر روی PDF کلیک کنید.

موارد استفاده رایج

یک مبتدی یک تگ HTML را تایپ می کند و بلافاصله می بیند که چه کاری انجام می دهد.
یک توسعه‌دهنده یک قطعه شکسته را ایزوله می‌کند و بدون چرخش پروژه، آن را رفع اشکال می‌کند.
یک بازاریاب پیش‌نمایش ایمیل HTML یا بلوک صفحه فرود را در 375 پیکسل قبل از ارسال آن برای بررسی می‌کند.
یک معلم کد و خروجی ارائه شده را در کنار هم در کلاس نشان می دهد.
یک فریلنسر یک مؤلفه را مسخره می کند و یک فایل html یا PDF را برای مشتری ارسال می کند.

راهنمای تفصیلی

چگونه کد HTML را به صورت آنلاین آزمایش کنیم

کد خود را در ویرایشگر قرار دهید و پیش‌نمایش به‌طور خودکار به‌روزرسانی می‌شود، بدون اینکه دکمه Run را فشار دهید. می‌توانید یک سند کامل را با <!DOCTYPE html>، <head> و <body> یا فقط یک قطعه مانند <div> با چند سبک جای‌گذاری کنید و مرورگر ساختار گمشده را پر می‌کند. برای دیدن نتیجه در اندازه کامل به نمای پیش‌نمایش بروید یا وقتی می‌خواهید فضایی برای نوشتن داشته باشید، نمای کد را ببینید. اگر چیزی درست به نظر نمی‌رسد، ابتدا روی Prettify کلیک کنید: تورفتگی تمیز باعث می‌شود یک برچسب بسته نشده یا یک </div> نابجا بسیار راحت‌تر شناسایی شود.

HTML، CSS و جاوا اسکریپت را با هم بنویسید

ویرایشگر روی یک سند HTML کار می کند، بنابراین CSS و جاوا اسکریپت داخل آن می شوند. سبک‌ها را در بلوک <style> در <head> یا به‌عنوان ویژگی‌های سبک درون خطی اضافه کنید و رفتار را در بلوک <script> در انتهای <body> یا به عنوان ویژگی‌های رویداد مانند onclick اضافه کنید. همچنین می‌توانید یک کتابخانه یا چارچوب را از CDN بارگیری کنید، مانند فونت Google، Tailwind's Play CDN یا یک کتابخانه نمودار، با یک تگ معمولی <link> یا <script src> که به URL https اشاره می‌کند. پیش‌نمایش اسکریپت‌های شما را در یک موتور مرورگر واقعی اجرا می‌کند، بنابراین رویدادهای DOM، تایمرها، بوم‌ها و واکشی تماس‌ها با API‌های دارای CORS همگی مانند یک صفحه زنده رفتار می‌کنند.

طرح بندی های پاسخگو را در عرض تلفن و تبلت آزمایش کنید

از دکمه های دستگاه بالای پیش نمایش برای محدود کردن عرض آن استفاده کنید. <meta name="viewport" content="width=device-width, initial-scale=1"> را در <head> خود قرار دهید تا پرسش‌های رسانه به همان روشی که در تلفن نشان می‌دهند به عرض پیش‌نمایش پاسخ دهند.

از پیش تعیین شده	عرض پیش نمایش	چه چیزی را بررسی کنیم
دسکتاپ	عرض تمام صفحه	کانتینرهای حداکثر عرض، شبکه های چند ستونی، وضعیت های شناور
تبلت	768px	نقطه شکست متداول md: ناوبری در حال جمع شدن، طرح‌بندی‌های ۲ ستونی
موبایل	375px	بسته بندی متن، اندازه ضربه-هدف، تصاویر پر شده، اسکرول افقی

کارهایی که پیش نمایش زنده می تواند انجام دهد و نمی تواند انجام دهد

پیش نمایش یک قاب جعبه شنی است که از کد شما بارگیری شده است. برای ایمنی، منشأ غیرشفاف دارد: اسکریپت‌های شما نمی‌توانند کوکی‌ها یا فضای ذخیره‌سازی این سایت را بخوانند، و این سایت نمی‌تواند صفحه شما را بخواند. این طراحی منجر به محدودیت‌های قابل پیش‌بینی می‌شود که در زیر فهرست شده‌اند تا به جای کد خود زمان را برای اشکال‌زدایی ویرایشگر از دست ندهید.

کار می کند	کار نمی کند (و چرا)
درون خطی <style>، ویژگی های سبک و <script>	مسیرهای نسبی مانند src="img/logo.png": هیچ پوشه ای در سرور وجود ندارد که آنها را با آنها حل کند. از URLهای کامل https یا URIهای داده استفاده کنید
CSS و JS از یک CDN روی https	localStorage، sessionStorage و کوکی‌های داخل اسکریپت شما: جعبه شنی آن‌ها را مسدود می‌کند (آنها یک خطای امنیتی پرتاب می‌کنند)
alert()، confirm()، فرم ها و پیوندهایی که در یک تب جدید باز می شوند	fetch() به APIهایی که هدرهای CORS را ارسال نمی‌کنند: مرورگر پاسخ را مسدود می‌کند، درست مانند یک سایت واقعی.
تصاویر و فونت ها از URL های عمومی	چندین فایل، واردات npm یا مراحل ساخت: این یک ویرایشگر سند تک است، نه یک IDE پروژه

با Base64 Image Encoder یک تصویر را به یک URI داده تبدیل کنید

فرمت HTML کثیف با یک کلیک

Prettify قالب‌کننده HTML Prettier را در مرورگر شما اجرا می‌کند. تگ‌های تودرتو را با 2 فاصله باز می‌کند، خطوط طولانی را با 100 کاراکتر می‌پیچد، و هنگامی که یک برچسب بیش از حد گسترده می‌شود، ویژگی‌ها را روی خطوط خود قرار می‌دهد. برای ساختار HTML تنظیم شده است، بنابراین محتویات بلوک‌های <style> و <script> تا حد زیادی همانطور که شما آنها را نوشتید باقی می‌مانند. این چیزی که صفحه شما ارائه می دهد را تغییر نمی دهد. اگر نشانه‌گذاری دارای یک خطای نحوی باشد که Prettier نمی‌تواند آن را تجزیه کند، پیامی می‌بینید و کد شما دقیقاً همانطور که بوده باقی می‌ماند.

صادرات به HTML یا PDF

سه گزینه صادرات وجود دارد که هر کدام برای کار متفاوتی مناسب است. دانلود html کد بایت به بایت در ویرایشگر است که آماده باز شدن در مرورگر یا انداختن به پروژه است. Print پیش‌نمایش ارائه‌شده را به گفتگوی چاپ مرورگر شما می‌فرستد: ذخیره به‌عنوان PDF را انتخاب کنید تا متن قابل انتخاب، شکست‌های چند صفحه‌ای و هر چیزی که جاوا اسکریپ شما کشیده است را دریافت کنید. دکمه PDF یک میانبر با یک کلیک است که HTML و CSS ایستا را به عنوان یک تصویر می گیرد، آن را در صفحات A4 تقسیم می کند و آن را دانلود می کند. چون یک تصویر است، متن آن قابل انتخاب نیست و محتوای ایجاد شده توسط جاوا اسکریپت ظاهر نمی شود. اگر پی‌دی‌اف سریع با مشکل مواجه شود، دلیل معمول یک تصویر خارجی بدون سرصفحه‌های CORS است. به جای آن از Print استفاده کنید.

پیش نمایش قالب های ایمیل HTML

کلاینت‌های ایمیل از HTML و CSS بسیار کمتری نسبت به مرورگرها پشتیبانی می‌کنند، بنابراین قالب‌های ایمیل از قراردادهای قدیمی‌تر پیروی می‌کنند: یک طرح‌بندی مبتنی بر جدول، یک ستون محتوا با عرض حدود 600 پیکسل، ویژگی‌های سبک درون خطی به جای بلوک‌های <style>، و تصاویر با ویژگی‌های عرض ثابت. به همین شکل در اینجا بسازید و به پیش‌تنظیم 375 پیکسل بروید تا بررسی کنید که ایمیل‌ها چگونه روی یک تلفن قرار می‌گیرند. پیش‌نمایش نشان می‌دهد که چگونه یک مرورگر مدرن ایمیل شما را نمایش می‌دهد، که اولین بررسی خوبی است. برخی از مشتریان، به ویژه Outlook در ویندوز، آن را متفاوت ارائه می کنند، بنابراین همیشه قبل از انتشار یک کمپین، یک آزمایش را به صندوق ورودی واقعی ارسال کنید.

تکه‌های شروع برای چسباندن

الگوهای کوتاهی که می‌توانید تایپ کنید و آن‌ها را تطبیق دهید. هر یک فقط به چند خط نیاز دارد و نتیجه خود را بلافاصله در پیش نمایش نشان می دهد.

قطعه	کد کلید	آنچه را آموزش می دهد
کارت مرکزی	بدنه{display:grid;place-items:center;min-height:100vh}	مرکز شبکه در یک قانون
نوار ناوبری Flexbox	nav{display:flex;justify-content:space-between;gap:1rem}	فاصله اقلام در یک ردیف
ستون های پاسخگو	display:grid;grid-template-columns: repeat (جایگاه خودکار، حداقل حداکثر (200 پیکسل، 1 فریت))	ستون هایی که بدون درخواست رسانه بسته می شوند
روی شمارنده کلیک کنید	<button onclick="this.textContent=++n">0</button> با اجازه n=0 در یک <script>	رویدادها و به روز رسانی DOM
صفحه آگاه از حالت تاریک	@media (ترجیح می دهد طرح رنگ: تیره){body{background:#111;color:#eee}}	احترام به موضوع سیستم بازدید کننده

با CSS Generator شیب ها، سایه ها و سایر CSS ها را ایجاد کنید آیکون های SVG درون خطی را با SVG Forge بهینه کنید تصاویر مکان‌دار اندازه‌ای برای ماکت‌ها ایجاد کنید

کد شما در مرورگر شما باقی می ماند

هیچ چیزی که تایپ می کنید به سرور ارسال نمی شود. برای حفظ کار شما بین بازدیدها، ویرایشگر کد شما را به صورت خودکار در حافظه محلی این مرورگر در این دستگاه ذخیره می‌کند، بنابراین پس از به‌روزرسانی همچنان در آنجاست اما با دستگاه‌های دیگر یا مرورگرهای دیگر همگام‌سازی نمی‌شود. با کلیک بر روی Reset کد شما با سند نمونه جایگزین می شود. پاک کردن داده های این سایت در تنظیمات مرورگر، کپی ذخیره شده را حذف می کند. در یک رایانه مشترک، قبل از خروج، Reset را فشار دهید.

چه زمانی به جای آن از یک زمین بازی با کد کامل استفاده کنید

این ویرایشگر برای کار سریع، خصوصی و تک فایلی ساخته شده است: آزمایش یک قطعه، یادگیری HTML، بررسی طرح بندی در عرض تلفن یا پیش نمایش یک بلوک ایمیل، بدون نیاز به حساب. اگر به چندین فایل، بسته‌های npm، مرحله ساخت فریمورک، پیوند قابل اشتراک‌گذاری یا همکاری بلادرنگ نیاز دارید، یک زمین بازی کامل مانند CodePen، JSFiddle یا PlayCode مناسب‌تر است. بسیاری از توسعه دهندگان از هر دو استفاده می کنند: یک صفحه خراش سریع برای چک هایی مانند این، و یک زمین بازی کامل برای پروژه هایی که می خواهند به اشتراک بگذارند.

کنتراست متن و پس زمینه را با بررسی کنتراست رنگ بررسی کنید با JSON Formatter پاسخ‌های API را اعتبارسنجی و زیبا چاپ کنید

سوالات متداول

چگونه کد HTML را بصورت آنلاین به صورت رایگان تست کنم؟

HTML خود را تایپ یا در ویرایشگر قرار دهید. پیش‌نمایش پس از توقف تایپ، حدود 300 میلی‌ثانیه دوباره ارائه می‌شود و نشان می‌دهد که چگونه یک مرورگر واقعی کد شما را نمایش می‌دهد. دکمه Run، نصب و ثبت نام وجود ندارد.

آیا می توانم CSS و جاوا اسکریپت را در ویرایشگر HTML قرار دهم؟

بله. CSS را در بلوک <style> یا ویژگی های سبک و جاوا اسکریپت را در بلوک <script> یا ویژگی های رویداد مانند onclick قرار دهید. همچنین می توانید کتابخانه ها و فونت ها را از CDN با URL https بارگیری کنید. این یک ویرایشگر سند تک است، بنابراین فایل‌های css. و .js جداگانه پشتیبانی نمی‌شوند.

چگونه کد HTML را به صورت آنلاین زیبا کنیم؟

HTML کثیف یا کوچک شده خود را جایگذاری کنید و روی Prettify کلیک کنید. زیباتر برچسب‌های تودرتو را با 2 فاصله باز می‌کند و خطوط طولانی را با 100 کاراکتر بدون تغییر در نحوه رندر صفحه می‌پیچد. اگر HTML دارای یک خطای نحوی باشد که Prettier نمی تواند آن را تجزیه کند، کد شما دست نخورده باقی می ماند و پیامی خواهید دید.

آیا می توانم کد HTML خود را به صورت PDF صادر کنم؟

بله دو راه چاپ → ذخیره به عنوان PDF از موتور چاپ مرورگر شما استفاده می کند، که متن قابل انتخاب، خروجی چند صفحه و هر چیزی که جاوا اسکریپت شما ارائه می دهد را ارائه می دهد. دکمه PDF یک تصویر سریع با یک کلیک از HTML و CSS استاتیک است که در صفحات A4 تقسیم شده است. متن آن قابل انتخاب نیست و خروجی جاوا اسکریپت گنجانده نشده است.

آیا کد HTML من در جایی ذخیره می شود؟

فقط در مرورگر خودتان. ویرایشگر به‌طور خودکار در حافظه محلی این مرورگر ذخیره می‌کند، بنابراین کار شما پس از تازه‌سازی باقی می‌ماند، اما چیزی در سرور آپلود نمی‌شود و با دستگاه‌های دیگر همگام‌سازی نمی‌شود. برای حذف، روی Reset یا پاک کردن داده‌های این سایت کلیک کنید.

چرا تصویر یا فایل CSS خارجی من در پیش نمایش بارگیری نمی شود؟

مسیرهای نسبی مانند img/logo.png یا styles.css هیچ پوشه ای برای حل کردن ندارند، زیرا پیش نمایش از کد شما ساخته شده است نه از فایل های روی سرور. از یک URL کامل https استفاده کنید، CSS را در یک بلوک <style> جایگذاری کنید، یا یک تصویر کوچک را به یک URI داده تبدیل کنید.

چرا localStorage یک خطا در اسکریپت من ایجاد می کند؟

پیش‌نمایش در یک قاب sandbox با منشأ مات اجرا می‌شود، بنابراین نمی‌تواند داده‌های این سایت را لمس کند. در نتیجه، localStorage، sessionStorage و کوکی ها برای کد شما در آنجا در دسترس نیستند و یک SecurityError ایجاد می کنند. منطق ذخیره سازی را در یک فایل محلی یا یک زمین بازی کامل آزمایش کنید.

آیا می توانم از این ویرایشگر HTML برای یادگیری HTML به عنوان یک مبتدی استفاده کنم؟

بله. یک تگ تایپ کنید و بلافاصله نتیجه را ببینید. با ساختار اصلی شروع کنید (<h1>، <p>، <a>، <img>)، سپس یک بلوک <style> اضافه کنید و رنگ‌ها و طرح‌بندی را آزمایش کنید. این بازخورد فوری بسیار سریعتر از ویرایش یک فایل و تازه کردن برگه مرورگر است.

آیا به عنوان یک پیش نمایش پاسخگو کار می کند؟

بله. پیش نمایش را بین دسک تاپ (با عرض کامل)، تبلت (768 پیکسل) و تلفن همراه (375 پیکسل) تغییر دهید. یک متا تگ viewport را به <head> خود اضافه کنید تا پرسش‌های رسانه‌ای شما همانگونه که در یک تلفن واقعی پاسخ می‌دهند پاسخ دهند.

ویرایشگر آنلاین HTML با پیش نمایش زنده

نوشتن و پیش نمایش HTML در زمان واقعی

ویژگی ها

نحوه استفاده از ویرایشگر زنده HTML

HTML خود را بچسبانید یا بنویسید

پیش نمایش زنده را تماشا کنید

عرض های پاسخگو را بررسی کنید

نشانه گذاری را زیبا کنید

کار خود را صادر کنید

موارد استفاده رایج

راهنمای تفصیلی

چگونه کد HTML را به صورت آنلاین آزمایش کنیم

HTML، CSS و جاوا اسکریپت را با هم بنویسید

طرح بندی های پاسخگو را در عرض تلفن و تبلت آزمایش کنید