محرر HTML عبر الإنترنت مع معاينة مباشرة (مجانًا)

كتابة ومعاينة HTML في الوقت الحقيقي

يقوم محرر HTML عبر الإنترنت مع المعاينة المباشرة بعرض HTML وCSS وJavaScript بجانب الكود في حوالي 300 مللي ثانية بعد التوقف عن الكتابة. تحقق من التخطيط على سطح المكتب والجهاز اللوحي (768 بكسل) والجهاز المحمول (375 بكسل)، وقم بترتيب العلامات باستخدام Prettier، وقم بالتصدير إلى .html أو PDF. يتم حفظ الكود الخاص بك تلقائيًا في هذا المتصفح فقط ولا يتم تحميله أبدًا.

يعرض محرر HTML المباشر هذا ترميزك بجانب الكود أثناء الكتابة، حتى تتمكن من إنشاء نماذج أولية للتخطيطات واختبار المقتطفات والتعلم من خلال التجربة دون إعداد مشروع. يستخدم Monaco (محرك التحرير وراء VS Code) لتسليط الضوء على بناء الجملة والإكمال التلقائي، ويتم تشغيله بالكامل في متصفحك دون الحاجة إلى الاشتراك.

سمات

معاينة وضع الحماية في الوقت الفعلي مع أوضاع Split وCode وPreview
عرض الأجهزة المستجيبة (سطح المكتب، الكمبيوتر اللوحي 768 بكسل، الهاتف المحمول 375 بكسل)
محرر موناكو مع تسليط الضوء على بناء الجملة
بنقرة واحدة تنسيق التعليمات البرمجية أجمل
يتم الحفظ تلقائيًا في وحدة التخزين المحلية لهذا المتصفح، ولم يتم تحميله مطلقًا
تصدير بتنسيق .html، أو طباعة/حفظ بتنسيق PDF، أو ملف PDF سريع متعدد الصفحات

كيفية استخدام محرر HTML المباشر

1
قم بلصق أو كتابة HTML الخاص بك
اكتب مستندًا كاملاً أو جزءًا منه. ضع CSS في علامة <style> وJavaScript في علامة <script>، أو قم بتحميلهما من CDN عبر https.
2
شاهد المعاينة المباشرة
يتم إعادة عرض جزء المعاينة خلال 300 مللي ثانية تقريبًا بعد التوقف عن الكتابة. استخدم طريقة العرض Split أو Code أو Preview لترتيب مساحة العمل.
3
تحقق من العروض المستجيبة
قم بالتبديل بين سطح المكتب (العرض الكامل)، والكمبيوتر اللوحي (768 بكسل) والجوال (375 بكسل) لترى كيف يتدفق التخطيط مرة أخرى.
4
تجميل العلامات
انقر فوق Prettify لإعادة وضع مسافة بادئة للمستند باستخدام Prettier (مسافة بادئة بمسافتين، وسطر مكون من 100 حرف).
5
تصدير عملك
قم بتنزيل الكود الدقيق بتنسيق ‎.html، واستخدم طباعة → حفظ بتنسيق PDF للحصول على نص متعدد الصفحات قابل للتحديد، أو انقر فوق PDF لالتقاط صورة سريعة.

حالات الاستخدام الشائع

يقوم المبتدئ بكتابة علامة HTML ويرى على الفور ما تفعله.
يقوم المطور بعزل المقتطف المعطوب وتصحيح أخطائه دون تشغيل المشروع.
يقوم أحد المسوقين بمعاينة بريد إلكتروني بتنسيق HTML أو قالب الصفحة المقصودة بحجم 375 بكسل قبل إرساله للمراجعة.
يعرض المعلم التعليمات البرمجية والمخرجات المقدمة جنبًا إلى جنب في الفصل.
يقوم المستقل بمحاكاة أحد المكونات ويرسل للعميل ملف .html أو PDF.

دليل مفصل

كيفية اختبار كود HTML على الانترنت

الصق الكود الخاص بك في المحرر وسيتم تحديث المعاينة تلقائيًا، دون الحاجة إلى الضغط على زر التشغيل. يمكنك لصق مستند كامل باستخدام <!DOCTYPE html> و<head> و<body>، أو مجرد جزء مثل <div> مع بعض الأنماط، وسيقوم المتصفح بملء البنية المفقودة. قم بالتبديل إلى طريقة العرض Preview لرؤية النتيجة بالحجم الكامل، أو طريقة العرض Code عندما تريد مساحة للكتابة. إذا كان هناك شيء لا يبدو صحيحًا، فانقر على "تجميل" أولاً: المسافة البادئة النظيفة تجعل من السهل اكتشاف علامة غير مغلقة أو </div> في غير مكانها.

اكتب HTML وCSS وJavaScript معًا

يعمل المحرر على مستند HTML واحد، بحيث يتم إدخال CSS وJavaScript داخله. أضف أنماطًا في كتلة <style> في <head> أو كسمات نمط مضمّنة، وأضف سلوكًا في كتلة <script> في نهاية <body> أو كسمات حدث مثل onclick. يمكنك أيضًا تحميل مكتبة أو إطار عمل من شبكة CDN، مثل Google Font أو Tailwind's Play CDN أو مكتبة الرسوم البيانية، باستخدام علامة <link> أو <script src> عادية تشير إلى عنوان URL https. تعمل المعاينة على تشغيل البرامج النصية الخاصة بك في محرك متصفح حقيقي، وبالتالي فإن أحداث DOM والمؤقتات والقماش واستدعاءات الجلب إلى واجهات برمجة التطبيقات التي تدعم CORS جميعها تتصرف كما تفعل في الصفحة المباشرة.

اختبار التخطيطات المستجيبة على عرض الهاتف والجهاز اللوحي

استخدم أزرار الجهاز أعلى المعاينة لتقييد عرضها. قم بتضمين <meta name="viewport" content="width=device-width, الأولي-scale=1"> في <head> حتى تستجيب استعلامات الوسائط لعرض المعاينة بنفس الطريقة التي تستجيب بها على الهاتف.

محددة مسبقا	عرض المعاينة	ما يجب التحقق منه
سطح المكتب	عرض الجزء الكامل	الحاويات ذات العرض الأقصى، والشبكات متعددة الأعمدة، وحالات التمرير
قرص	768px	نقطة توقف md الشائعة: انهيار التنقل، تخطيطات مكونة من عمودين
متحرك	375px	التفاف النص، حجم النقر المستهدف، الصور الفائضة، التمرير الأفقي

ما يمكن للمعاينة المباشرة فعله وما لا يمكنها فعله

المعاينة عبارة عن إطار رمل يتم تحميله من التعليمات البرمجية الخاصة بك. من أجل السلامة، فإن أصله غير واضح: لا يمكن للنصوص البرمجية الخاصة بك قراءة ملفات تعريف الارتباط أو مساحة التخزين لهذا الموقع، ولا يمكن لهذا الموقع قراءة صفحتك. يؤدي هذا التصميم إلى بعض الحدود المتوقعة، المدرجة أدناه حتى لا تضيع الوقت في تصحيح أخطاء المحرر بدلاً من التعليمات البرمجية الخاصة بك.

يعمل	لا يعمل (ولماذا)
مضمّنة <style> وسمات النمط و<script>	المسارات النسبية مثل src="img/logo.png": لا يوجد مجلد على الخادم لحلها. استخدم عناوين URL الكاملة لـ https أو عناوين URI للبيانات
CSS وJS من CDN عبر https	localStorage وsessionStorage وملفات تعريف الارتباط داخل البرنامج النصي الخاص بك: يقوم صندوق الحماية بحظرها (يتسببون في حدوث خطأ أمني)
تنبيه () وتأكيد () والنماذج والروابط التي يتم فتحها في علامة تبويب جديدة	fetch() إلى واجهات برمجة التطبيقات التي لا ترسل رؤوس CORS: يحظر المتصفح الاستجابة، تمامًا كما يحدث على موقع حقيقي
الصور والخطوط من عناوين URL العامة	ملفات متعددة، أو استيراد npm أو خطوات الإنشاء: إنه محرر مستند واحد، وليس IDE للمشروع

قم بتحويل صورة إلى URI للبيانات باستخدام Base64 Image Encoder

قم بتنسيق HTML الفوضوي بنقرة واحدة

يقوم Prettify بتشغيل منسق HTML الخاص بـ Prettier في متصفحك. فهو يعيد وضع العلامات المتداخلة بمسافتين، ويغلف الأسطر الطويلة بطول 100 حرف، ويضع السمات في أسطرها الخاصة عندما تصبح العلامة واسعة جدًا. لقد تم ضبطه ليناسب بنية HTML، لذا يتم ترك محتويات الكتل <style> و <script> إلى حد كبير كما كتبتها. ولا يغير ما تعرضه صفحتك. إذا كان الترميز يحتوي على خطأ في بناء الجملة لا يمكن لـ Prettier تحليله، فسترى رسالة ويتم ترك الكود الخاص بك تمامًا كما كان.

تصدير إلى HTML أو PDF

هناك ثلاثة خيارات للتصدير، كل منها مناسب لوظيفة مختلفة. تنزيل .html عبارة عن رمز بايت مقابل بايت في المحرر، وهو جاهز للفتح في المتصفح أو وضعه في مشروع. ترسل الطباعة المعاينة المقدمة إلى مربع حوار الطباعة في المتصفح الخاص بك: اختر حفظ بتنسيق PDF للحصول على نص قابل للتحديد، وعمل فواصل متعددة الصفحات وأي شيء رسمه JavaScript. زر PDF عبارة عن اختصار بنقرة واحدة يلتقط HTML وCSS الثابت كصورة، ويقسمها عبر صفحات A4 وينزلها. نظرًا لأنها صورة، فلا يمكن تحديد نصها، ولن يظهر المحتوى الذي تم إنشاؤه بواسطة JavaScript. إذا فشل ملف PDF السريع، فإن السبب المعتاد هو صورة خارجية بدون رؤوس CORS؛ استخدم الطباعة بدلاً من ذلك.

معاينة قوالب البريد الإلكتروني بتنسيق HTML

يدعم عملاء البريد الإلكتروني قدرًا أقل بكثير من HTML وCSS مقارنة بالمتصفحات، لذا تتبع قوالب البريد الإلكتروني التقاليد القديمة: تخطيط قائم على الجدول، وعمود محتوى يبلغ عرضه حوالي 600 بكسل، وسمات النمط المضمنة بدلاً من كتل <style>، والصور ذات سمات العرض الثابتة. قم بالبناء بهذه الطريقة هنا وانتقل إلى الإعداد المسبق 375 بكسل للتحقق من كيفية تكدس البريد الإلكتروني على الهاتف. تُظهر المعاينة كيف يعرض المتصفح الحديث بريدك الإلكتروني، وهو فحص أولي جيد. سيعرضه بعض العملاء، وخاصة Outlook على نظام التشغيل Windows، بشكل مختلف، لذا أرسل دائمًا اختبارًا إلى صناديق البريد الوارد الحقيقية قبل بدء الحملة.

مقتطفات البداية المراد لصقها

أنماط قصيرة يمكنك كتابتها وتكييفها. يحتاج كل واحد إلى بضعة أسطر فقط ويظهر نتيجته فورًا في المعاينة.

مقتطف	رمز المفتاح	ما يعلمه
بطاقة مركزية	الجسم{display:grid;place-items:center;min-height:100vh}	توسيط الشبكة في قاعدة واحدة
شريط التنقل Flexbox	نافزQX0XQZ	تباعد العناصر في صف واحد
الأعمدة المستجيبة	العرض: الشبكة؛ أعمدة قالب الشبكة: كرر (احتواء تلقائي، Minmax (200px، 1fr))	الأعمدة التي تلتف بدون استعلامات الوسائط
انقر فوق العداد	<button onclick="this.textContent=++n">0</button> مع ترك n=0 في <script>	الأحداث وتحديث DOM
صفحة تدرك الوضع الداكن	@media (يفضل نظام الألوان: داكن){body{background:#111;color:#eee}}	احترام موضوع نظام الزائر

قم بإنشاء التدرجات والظلال وCSS الأخرى باستخدام CSS Generator قم بتحسين أيقونات SVG المضمنة باستخدام SVG Forge قم بإنشاء صور العناصر النائبة ذات الحجم المناسب للنماذج بالحجم الطبيعي

يبقى الرمز الخاص بك في متصفحك

لا يتم إرسال أي شيء تكتبه إلى الخادم. للاحتفاظ بعملك بين الزيارات، يقوم المحرر تلقائيًا بحفظ الكود الخاص بك في وحدة التخزين المحلية لهذا المتصفح على هذا الجهاز، بحيث يظل موجودًا بعد التحديث ولكن لا تتم مزامنته مع الأجهزة الأخرى أو المتصفحات الأخرى. يؤدي النقر فوق "إعادة تعيين" إلى استبدال التعليمات البرمجية الخاصة بك بالمستند النموذجي. يؤدي مسح بيانات هذا الموقع في إعدادات المتصفح لديك إلى حذف النسخة المحفوظة. على جهاز كمبيوتر مشترك، اضغط على إعادة تعيين قبل المغادرة.

متى يجب استخدام ملعب الكود الكامل بدلاً من ذلك

تم تصميم هذا المحرر للعمل السريع والخاص في ملف واحد: اختبار مقتطف أو تعلم HTML أو التحقق من التخطيط على عرض الهاتف أو معاينة كتلة البريد الإلكتروني، دون الحاجة إلى حساب. إذا كنت بحاجة إلى عدة ملفات، أو حزم npm، أو خطوة بناء إطار عمل، أو رابط قابل للمشاركة أو تعاون في الوقت الفعلي، فإن ساحة اللعب الكاملة مثل CodePen أو JSFiddle أو PlayCode هي الأفضل. يستخدم العديد من المطورين كليهما: لوحة مسودة سريعة لعمليات التحقق مثل هذه، ومنطقة لعب كاملة للمشاريع التي يرغبون في مشاركتها.

تحقق من تباين النص والخلفية باستخدام مدقق تباين الألوان التحقق من صحة استجابات واجهة برمجة التطبيقات (API) وطباعتها بشكل جميل باستخدام JSON Formatter

الأسئلة المتداولة

كيف يمكنني اختبار كود HTML عبر الإنترنت مجانًا؟

اكتب أو الصق HTML الخاص بك في المحرر. يتم إعادة عرض المعاينة خلال 300 مللي ثانية تقريبًا بعد التوقف عن الكتابة، مما يوضح كيف يعرض المتصفح الحقيقي التعليمات البرمجية الخاصة بك. لا يوجد زر تشغيل ولا تثبيت ولا تسجيل.

هل يمكنني تضمين CSS وJavaScript في محرر HTML؟

نعم. ضع CSS في كتلة <style> أو سمات النمط وجافا سكريبت في كتلة <script> أو سمات الحدث مثل onclick. يمكنك أيضًا تحميل المكتبات والخطوط من CDN باستخدام عنوان URL https. إنه محرر مستند واحد، لذا لا يتم دعم ملفات .css و .js المنفصلة.

كيف أقوم بتجميل كود HTML عبر الإنترنت؟

الصق HTML الفوضوي أو المصغر وانقر فوق Prettify. تعمل خاصية Prettier على إعادة تحديد العلامات المتداخلة بمسافتين وتغليف الأسطر الطويلة بطول 100 حرف دون تغيير كيفية عرض الصفحة. إذا كان HTML يحتوي على خطأ في بناء الجملة لا يمكن لـ Prettier تحليله، فسيتم ترك التعليمات البرمجية الخاصة بك دون تغيير وستظهر لك رسالة.

هل يمكنني تصدير كود HTML الخاص بي كملف PDF؟

نعم، طريقتان. طباعة → حفظ بتنسيق PDF يستخدم محرك الطباعة الخاص بالمتصفح الخاص بك، والذي يوفر نصًا قابلاً للتحديد ومخرجات متعددة الصفحات وأي شيء يتم عرضه بواسطة JavaScript. يعد زر PDF بمثابة التقاط صورة سريع بنقرة واحدة لملفات HTML وCSS الثابتة، مقسمة على صفحات بحجم A4؛ نصه غير قابل للتحديد ولا يتم تضمين إخراج JavaScript.

هل يتم حفظ كود HTML الخاص بي في أي مكان؟

فقط في المتصفح الخاص بك. يقوم المحرر بالحفظ التلقائي في وحدة التخزين المحلية لهذا المتصفح حتى يظل عملك قيد التحديث، ولكن لا يتم تحميل أي شيء على الخادم ولا تتم مزامنته مع الأجهزة الأخرى. انقر فوق إعادة تعيين أو مسح بيانات هذا الموقع لإزالتها.

لماذا لا يتم تحميل الصورة أو ملف CSS الخارجي في المعاينة؟

لا تحتوي المسارات النسبية مثل img/logo.png أوstyles.css على مجلد يمكن حل المشكلة عليه، لأن المعاينة مبنية على التعليمات البرمجية الخاصة بك وليس من الملفات الموجودة على الخادم. استخدم عنوان URL https كاملًا، أو الصق ملف CSS في كتلة <style>، أو قم بتحويل صورة صغيرة إلى معرف URI للبيانات.

لماذا يُظهر localStorage خطأً في البرنامج النصي الخاص بي؟

يتم تشغيل المعاينة في إطار وضع الحماية ذي أصل غير شفاف، لذا لا يمكنها لمس بيانات هذا الموقع. ونتيجة لذلك، لا تتوفر خدمة localStorage وsessionStorage وملفات تعريف الارتباط للتعليمات البرمجية الخاصة بك هناك مما يؤدي إلى حدوث خطأ أمني. اختبار منطق التخزين في ملف محلي أو ملعب كامل.

هل يمكنني استخدام محرر HTML هذا لتعلم HTML كمبتدئ؟

نعم. اكتب علامة وشاهد النتيجة على الفور. ابدأ بالبنية الأساسية (<h1>، <p>، <a>، <img>)، ثم أضف كتلة <style> وقم بتجربة الألوان والتخطيط. تعد هذه التعليقات الفورية أسرع بكثير من تحرير ملف وتحديث علامة تبويب المتصفح.

هل تعمل كمعاينة سريعة الاستجابة؟

نعم. قم بتبديل المعاينة بين سطح المكتب (العرض الكامل)، والكمبيوتر اللوحي (768 بكسل) والجوال (375 بكسل). أضف علامة وصفية لإطار العرض إلى <head> حتى تستجيب استعلامات الوسائط الخاصة بك بالطريقة التي تستجيب بها على هاتف حقيقي.

محرر HTML عبر الإنترنت مع معاينة مباشرة

كتابة ومعاينة HTML في الوقت الحقيقي

سمات

كيفية استخدام محرر HTML المباشر

قم بلصق أو كتابة HTML الخاص بك

شاهد المعاينة المباشرة

تحقق من العروض المستجيبة

تجميل العلامات

تصدير عملك

حالات الاستخدام الشائع