عارض كود HTML

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

يوضع كود HTML الذي تلصقه داخل إطار iframe معزول بواسطة خاصية 'sandbox'. يسمح هذا العزل بتشغيل الكود مع حظر وصوله إلى بقية الموقع أو ملفات تعريف الارتباط أو علامات التبويب الأخرى — مما يعني أنه حتى الكود غير الموثوق يمكن اختباره بأمان.

• تلصق كود HTML الخاص بك (والذي قد يتضمن أيضاً CSS/JavaScript) في مربع الكود.
• عند النقر على 'تحديث المعاينة'، يُمرَّر الكود إلى إطار iframe معزول.
• يعرض إطار iframe الكود في بيئة معزولة عن الصفحة الرئيسية، بفضل خاصية 'sandbox'.
• تُعرض النتيجة بصرياً في منطقة المعاينة على اليمين.
• عدّل الكود وانقر على الزر مرة أخرى لتحديث المعاينة.

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

• اختبر كيف سيبدو كود التضمين (مثل عنصر واجهة iframe) على موقعك قبل نشره هنا.
• لا تتحدث المعاينة تلقائياً مع كل تغيير — تذكّر النقر على 'تحديث المعاينة' بعد تعديل الكود.
• نظراً لأن منطقة المعاينة معزولة، لا يمكن لأي نصوص برمجية في كودك التأثير على بقية صفحتك أو قراءتها.

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

في صميم هذه الأداة تكمن ميزة إطار 'sandbox' التي توفرها المتصفحات. تعزل هذه الميزة المحتوى داخل إطار iframe بالكامل خارج مجموعة محددة من الأذونات؛ ولا تُمنح افتراضياً أي قدرة تتجاوز تشغيل النصوص البرمجية — لا وصول إلى الصفحة الأصل، ولا إرسال نماذج، ولا فتح نوافذ جديدة.

هذا الخيار التصميمي متعمد: توفير مساحة يمكن للمستخدمين فيها اختبار حتى الكود الذي لا يثقون به، مع حماية الموقع الفعلي (وملفات تعريف الارتباط وبيانات الجلسة الخاصة بالمستخدم) في الوقت نفسه. تتبع العديد من منصات مشاركة الكود الاحترافية (مثل أدوات على غرار CodePen) نفس مبدأ العزل.

لا تتحدث المعاينة تلقائياً مع كل تغيير في الكود؛ بل تُفعَّل يدوياً بواسطة زر 'تحديث المعاينة'. يحافظ هذا على سلاسة الأداء ويمنح المستخدم التحكم في وقت تشغيل الكود فعلياً، بدلاً من تشغيله عن طريق الخطأ قبل اكتماله.

تُعد هذه الأداة مفيدة لاختبار عناصر التضمين، وتجربة فكرة HTML/CSS بسرعة، وفحص الكود المشارك في تقرير خطأ بأمان، أو ببساطة رؤية كيفية عرض HTML كجزء من عملية تعلم.