المحرر أعلاه هو محرر مستندات HTML كامل بمعاينة مباشرة: اكتب في اليسار، وتُعرَض الصفحة التي تبنيها في اليمين. كل شيء يعمل في متصفحك — لا تثبيت، ولا حساب، ولا شيء مما تكتبه يغادر جهازك. المعاينة إطار متصفح حقيقي، فما تراه هو ما سيراه الزائر.
اكتب وشغِّل HTML عبر الإنترنت
كل ما تضعه في المحرر يُعامَل كمستند HTML واحد كامل — الـ doctype و<head> و<body>. هذا أهم مما يبدو: وسوم meta والأيقونات المفضلة والعناوين وأوراق الأنماط لا تعمل بشكل صحيح إلا داخل <head> حقيقي، وهذا المحرر يعرض yours بأمانة. قالب البداية يتضمن الهيكل الذي يستحق الاحتفاظ به، وقائمة القوالب تقدم مستندات جاهزة — نموذج تسجيل، جدول بيانات، صورة متجاوبة، تجربة أيقونة مفضلة، ومثال وسوم المشاركة — يمكنك تفكيكها للأجزاء.
مع تفعيل التشغيل التلقائي، تُحدَّث المعاينة بعد نحو نصف ثانية من توقف الكتابة، فتبدو حية دون وميض مع كل ضغطة. تفضّل التحكم اليدوي؟ عطّله واضغط تشغيل (أو Ctrl/Cmd + Enter) عندما تريد العرض. فتح في تبويب جديد يفتح مستندك الحالي في نافذة متصفح كاملة — مفيد لاختبار النماذج بالحجم الحقيقي أو مشاركة شاشتك أثناء الدرس.
مخرجات الوحدة الطرفية وأخطاء السكربت
console.log من سكربتات مستندك يظهر في لوحة الوحدة الطرفية أسفل مساحة العمل، مع التحذيرات والأخطاء. عندما يرمي سكربت استثناءً، يصل الرسالة مع السطر والعمود الذي فشل فيه — الأرقام تطابق المحرر، لا تمثيلًا داخليًا، لأن المعاينة تحقن جسر التبليغ في سطر واحد قبل كودك. الوعود المرفوضة غير المعالجة تُلتقط أيضًا. إن كنت تتعلم مع منهج جافاسكريبت (متوفر حاليًا بالإنجليزية)، فهذه اللوحة تفرض انضباط الوحدة الطرفية نفسه الذي تتدرب عليه في أدوات المطوّر، دون واجهتها المرعبة.
افحص تخطيطك بعرض أجهزة حقيقي
أزرار العرض فوق المعاينة تعرض مستندك بعرض هاتف (390 بكسل) أو جهاز لوحي (820 بكسل) أو حاسوب مكتبي (1280 بكسل)، ممركزًا ومؤطرًا ليكون القيد واضحًا. هذه أسرع طريقة لفهم أهمية max-width والشبكات السائلة ووسم viewport: صغّر الإطار وشاهد صفحة جيدة البناء تعيد ترتيب نفسها بينما تتكسر صفحة هشة. الوضع المتجاوب الافتراضي يملأ اللوحة ببساطة — وهو على حاسوب محمول عريض بما يكفي لاختبار معظم تخطيطات سطح المكتب أصلًا.
لماذا يهم الـ head
لأن هذا محرر مستندات كاملة، فالـ <head> ملكك — وفيه يحدث قدر مذهل من العمل الحقيقي. قالب الأيقونة المفضلة مثلًا يعرّف أيقونة إيموجي بالكامل داخل وسم link واحد دون ملف صورة؛ وإن أردت الصورة الكاملة، فدليلنا «إضافة أيقونة مفضلة في HTML» (بالإنجليزية) يشرح الصيغ والأحجام والأخطاء التي تجعل الأيقونات تفشل بصمت. قالب الوسوم meta يبين ما تقرأه محركات البحث ومعاينات تطبيقات المحادثة فعلًا. تحرير عناصر الرأس مباشرة مع رد فعل فوري هو الفرق بين حفظ القواعد ورؤيتها تعمل.
عملك محفوظ — محليًا
المستند الذي تحرره يُحفَظ في التخزين المحلي لمتصفحك، فإعادة التحميل بالخطأ أو إغلاق التبويب لا يضيعان عملك. إعادة التعيين تعيد قالب البداية وتمسح المحفوظ. المشاركة تحزم المستند كله في الرابط نفسه (الجزء بعد # لا يصل أبدًا إلى خادم) لتنقل نسخة مطابقة — يستطيع مدرّس مشاركة صفحة معطلة ليصلحها الطلاب، أو الاحتفاظ بمقتطف على جهاز ثانٍ. تنزيل يحفظ الملف باسم index.html، وفتح ملف يفتح أي ملف .html من حاسوبك.
أسئلة متكررة
هل يمكن استخدام CSS وجافاسكريبت في HTML؟ نعم — بلوكات <style> و<script> تعمل كما في أي متصفح. والملعب يفصل HTML وCSS وJS في ثلاثة ملفات إن كنت تفضل ذلك.
هل يحتاج إنترنت؟ فقط لتحميل الصفحة. بعدها كل شيء — التحرير والمعاينة والوحدة الطرفية — يعمل دون اتصال.
هل يُرفَع HTML إلى أي مكان؟ لا. المعاينة تُولَّد في متصفحك. المستندات المحفوظة تعيش في التخزين المحلي، وروابط المشاركة تحمل الكود داخل الـ URL نفسه.
هل يمكن اختبار النماذج والصور والروابط؟ النماذج تُرسَل محليًا، والصور تُحمَّل من أي URL تشير إليه، والروابط تفتح في تبويبات جديدة. بيئة العزل تحفظ معاينتك منفصلة عن بقية الموقع، فلا تتسرب التجارب إلى أي مكان.
لماذا تبدو صفحتي مختلفة عن ملفي المحلي؟ إذا كان ملفك يعتمد على ملفات بجواره (styles.css محلي أو صور في مجلد)، فهذه المسارات تُحل داخل بيئة العزل — الصق CSS المعني في بلوك <style> لترى النتيجة الحقيقية.