دروس تعليمية حول HTML و CSS و JavaScript للمبتدئين

دروس تعليمية حول HTML و CSS و JavaScript للمبتدئين


english français العربية
برمجة منذ 10 أشهر

 

HTML: أساس صفحات الويب

  • ما هو: HTML (لغة ترميز النص التشعبي) هي العمود الفقري لكل صفحة ويب. حيث تحدد هيكل ومحتوى الصفحة ، مثل العناوين والفقرات والصور والروابط.
  • المفاهيم الأساسية:
    • العناصر: اللبنات الأساسية لـ HTML ، مثل <h1> للعناوين ، و <p> للفقرات ، و <img> للصور ، والمزيد.
    • الوسوم: تُستخدم لتحديد بداية ونهاية العناصر (على سبيل المثال ، </h1>هذا هو العنوان<h1>).
    • الصفات: تمنح معلومات إضافية حول العناصر (على سبيل المثال ، صفة src لمصدر الصورة).
  • الهيكل الأساسي لصفحة HTML:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>عنوان الصفحة</title>
</head>
<body>
  </body>
</html>

 

 

CSS: التصميم من أجل الجمال

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

CSS

h1 {
  color: red;
  font-size: 40px;
}

JavaScript: إضافة التفاعلية

  • ما هو: JavaScript هي لغة برمجة تضع التفاعلية والسلوك الديناميكي لصفحات الويب.
  • ماذا يفعل:
    • يتفاعل مع عناصر HTML لتعديل محتواها ومظهرها.
    • يستجيب لإجراءات المستخدم (مثل النقرات ، وإرسال الاستمارات).
    • يخلق الرسوم المتحركة والآثار البصرية.
  • المفاهيم الأساسية:
    • المتغيرات: تخزن البيانات لاستخدامها لاحقًا.
    • الدوال: وحدات قابلة لإعادة الاستخدام من التعليمات البرمجية لإجراء مهام محددة.
    • الأحداث: الإجراءات التي تحفز تنفيذ تعليمات JavaScript (على سبيل المثال ، النقرات ، وتحميل الصفحة).
  • مثال على تعليمات JavaScript:

 

function greet() {
  alert("مرحبا بالعالم!");
}

العمل معًا: الثلاثي الديناميكي

  • HTML يوفر الهيكل.
  • CSS يضيف التصميم.
  • JavaScript يضيف التفاعلية.

التمرين والاستكشاف:

  • استخدم الموارد والدورات التعليمية عبر الإنترنت للتعمق في كل لغة.
  • جرب أمثلة التعليمات البرمجية وقم بإنشاء صفحات الويب الخاصة بك.
  • قم ببناء مواقع ويب تفاعلية وجذابة بصريًا من خلال إتقان هذه التقنيات الأساسية!

سيساعدك فهم وتطبيق هذه اللغات الثلاث على إنشاء صفحات ويب ديناميكية وتفاعلية ومتميزة. استمتع بالتعلم والممارسة!