قم بتشغيل HTML وCSS وJS عبر الإنترنت

يمكنك كتابة صفحات ويب كاملة باستخدام HTML وCSS وJavaScript — كل ذلك في محرر واحد.

مقدمة

يتم إنشاء صفحات الويب الحديثة باستخدام ثلاث تقنيات أساسية: HTML للهيكل، وCSS للتصميم، وJavaScript للتفاعل. يدعم برنامج تشغيل الأكواد عبر الإنترنت الخاص بنا العناصر الثلاثة في محرر واحد - اكتب صفحة ويب كاملة وشاهدها تُعرض على الفور.

كيفية كتابة HTML وCSS وJS معًا

في HTML Code Runner، يمكنك كتابة مستند HTML كامل يتضمن CSS وJavaScript مضمنين. وإليك كيفية عملهم معًا:

  • HTML — حدد بنية صفحتك ومحتواها
  • CSS — أضف أنماطًا باستخدام علامات
  • JavaScript — أضف التفاعل باستخدام علامات

مثال: الجمع بين HTML وCSS وJavaScript

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; text-align: center; padding: 2rem; }
    button { padding: 0.8rem 2rem; font-size: 1.1rem; cursor: pointer; }
    #counter { font-size: 3rem; margin: 1rem; color: #6C5CE7; }
  </style>
</head>
<body>
  <h1>Click Counter</h1>
  <div id="counter">0</div>
  <button onclick="count()">Click Me</button>
  <script>
    let n = 0;
    function count() {
      n++;
      document.getElementById('counter').textContent = n;
    }
  </script>
</body>
</html>

ما يمكنك بناءه

  • النماذج التفاعلية مع التحقق من الصحة
  • الصفحات المقصودة المتحركة
  • لوحات تصور البيانات
  • نماذج اللعبة
  • فن CSS والرسوم المتحركة
  • التطبيقات المتصلة بواجهة برمجة التطبيقات (جلب البيانات الخارجية)

نصائح للرمز متعدد اللغات

  • ضع CSS في لتجنب FOUC (فلاش المحتوى غير المنسق)
  • ضع JavaScript في نهاية أو استخدم defer
  • استخدم لوحة إخراج وحدة التحكم لتصحيح أخطاء JavaScript
  • اختبر التصميمات سريعة الاستجابة عن طريق تغيير حجم نافذة المتصفح

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

نعم. استخدم علامات الارتباط لـ CSS وعلامات البرنامج النصي مع سمات src لتحميل الموارد الخارجية من شبكات CDN.

نعم. قم بتضمين رابط Bootstrap CDN في قسم رأس HTML الخاص بك وستعمل جميع فئات Bootstrap في المعاينة.

نعم. قم بتضمين علامة البرنامج النصي jQuery CDN ويمكنك استخدام بناء جملة jQuery في التعليمات البرمجية الخاصة بك.

الموارد ذات الصلة