👩🏫 من إعداد: فريق عمل جامعة بنها
🧑🏫 درس تفاعلي
🎯 أهداف الدرس
- تحميل وتثبيت برنامج Visual Studio Code.
- فتح البرنامج وإنشاء ملف جديد.
- كتابة أول صفحة HTML باستخدام VS Code.
- حفظ الملف وتشغيله في المتصفح.
📥 أولاً: تحميل Visual Studio Code
Visual Studio Code (VS Code) هو محرر نصوص مجاني وقوي لكتابة الأكواد البرمجية.
📱 أنظمة التشغيل المدعومة:
🪟 Windows | 🍎 macOS | 🐧 Linux
1
الذهاب إلى موقع VS Code الرسمي
2
اختيار نظام التشغيل الخاص بالجهاز (Windows/macOS/Linux)
3
الضغط على زر التحميل (Download)
4
فتح ملف التثبيت واتباع التعليمات (Next → Next → Install)
💡 ملاحظة: VS Code مجاني تماماً ويمكن تثبيته على جميع الأجهزة.
🎥 فيديو: تحميل وتثبيت VS Code
شاهد الفيديو التالي لشرح خطوات تحميل وتثبيت برنامج Visual Studio Code:
💡 نصيحة: يمكن فتح الفيديو في نافذة منفصلة بالنقر على زر التكبير في مشغل الفيديو.
🚀 ثانياً: فتح Visual Studio Code
بعد التثبيت، يتم فتح البرنامج من سطح المكتب أو قائمة البدء.
🖥️ أول ظهور للبرنامج:
ستظهر شاشة الترحيب مع خيارات لفتح مجلد أو إنشاء ملف جديد.
⚙️ واجهة البرنامج:
- 📁 مستكشف الملفات (يسار)
- 📝 منطقة الكتابة (وسط)
- 🔧 شريط الأدوات (أعلى)
1
فتح VS Code من سطح المكتب
2
إذا ظهرت شاشة الترحيب، يتم إغلاقها بالنقر على ✕
3
ستظهر واجهة فارغة جاهزة للكتابة
💡 ملاحظة: يمكن تغيير لغة الواجهة من الإعدادات (Ctrl + Shift + P → Configure Display Language).
📝 ثالثاً: إنشاء أول صفحة HTML
اتبع الخطوات التالية لإنشاء أول صفحة HTML:
1
الضغط على File → New File (أو Ctrl + N)
2
كتابة الكود التالي في الملف الجديد:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to HTML</p>
</body>
</html>
3
حفظ الملف: File → Save (أو Ctrl + S)
4
تسمية الملف index.html (مهم جداً أن يكون الامتداد .html)
5
اختيار مكان لحفظ الملف (مثل سطح المكتب أو مجلد المشروع)
⭐ مهم: التأكد أن اسم الملف ينتهي بـ .html وليس .txt
🎥 فيديو: إنشاء أول صفحة HTML
شاهد الفيديو التالي لشرح خطوات إنشاء أول صفحة HTML باستخدام VS Code:
💡 نصيحة: يمكن فتح الفيديو في نافذة منفصلة بالنقر على زر التكبير في مشغل الفيديو.
▶️ رابعاً: تشغيل الصفحة في المتصفح
هناك طريقتان لتشغيل صفحة HTML:
🖱️ الطريقة الأولى (يدوية):
1. الذهاب إلى مكان حفظ الملف
2. الضغط مرتين على index.html
3. ستفتح الصفحة في المتصفح تلقائياً
⚡ الطريقة الثانية (Live Server):
1. تثبيت إضافة Live Server من VS Code
2. الضغط على Go Live في شريط الحالة
3. ستفتح الصفحة مباشرة في المتصفح
Hello World
Welcome to HTML
🌐 نتيجة تشغيل الكود في المتصفح
💡 ملاحظة: أي تغيير في الكود يتطلب حفظ الملف (Ctrl + S) وتحديث المتصفح (F5) لرؤية التغييرات.
🎯 نشاط نهاية الدرس
📝 المطلوب:
- تثبيت برنامج Visual Studio Code على الجهاز.
- إنشاء ملف جديد وكتابة الكود التالي:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>Welcome to HTML</p>
</body>
</html>
- حفظ الملف باسم index.html.
- فتح الملف في المتصفح والتأكد من ظهور النتيجة.
Hello World
Welcome to HTML
✅ النتيجة المتوقعة