HTMLخطوات إنشاء ملف HTML بواسطة برنامج VSCode
1. في البداية نريد منك إنشاء مجلد إسمه html على حاسوبك لتقوم بوضع أي تصاميم تنشئها بداخلها كالتالي حتى يكون عملك مرتباً.
2. أنقر بزر الفأرة الأيمن على المجلد html ثم أنقر على الخيار Open with Code حتى يتم فتح المجلد بداخل برنامج VSCode كالتالي.
3. هكذا سيظهر برنامج VSCode أول مرة تقوم بفتحه.
4. قم بإغلاق صفحة الترحيب بالنقر على الزر X التي وضعها لك البرنامج لأننا لا نحتاجها.
5. هكذا سيظهر برنامج VSCode في كل مرة جديد تقوم بفتحه فيها.
6. HTML هو إسم المجلد الذي قمنا بفتحه بواسطة البرنامج و لكن لاحظ أنه يظهره بأحرف كبيرة.
7. أنقر على إسم المجلد HTML مرة واحدة حتى يتم فتحه و يصبح بإمكانك التعامل معه كالتالي.
8. لاحظ كيف ظهر لك زر لإنشاء مجلد، زر لإنشاء ملف و زر لتحديث المجلد.
9. أنقر على زر إنشاء ملف، ثم قم بتسميته test.html كما فعلنا.
10. بعد الإنتهاء من كتابة إسم الملف أنقر على الزر Enter حتى يتم إنشاؤه و فتحه.
11. لاحظ أنه تم إنشاء ملف إسمه test.html بداخل المجلد html و قد تم فتحه لك بشكل تلقائي.
12. قم بنسخ الكود التالي و وضعه بداخل الملف test.html كما هو.
ملاحظة: سنشرح لك هذا الكود بتفصيل في الدرس التالي لا تشغل بالك به الآن.
<html> <head> <title>My First HTML Page</title> </head> <body> <h1>Hello World!</h1> </body> </html>
13. قم بحفظ التغييرات التي تم إجراءها على الملف test.html من خلال النقر على File ثم Save كالتالي.
14. الآن إذا توجهت للمجلد الذي قمت فيه بحفظ الملف test.html ستجد أنه يوجد عليه أيقونة المتصفح الإفتراضي لحاسوبك مما يعني أنه سيتم فتحه كصفحة ويب عند النقر عليه كالتالي.
15. إذا قمت بالنقر على الملف test.html سيتم عرض محتواه كصفحة ويب عادية كالتالي.
لاحظ أنه لا يظهر في الصفحة أي كود HTML بل يظهر النص العادي الموضوع ضمن الكود و بشكل مرتب.
عند تجربة الكود على الحاسوب، في كل مرة تقوم بإجراء تعديل على ملف الـ HTML يجب أن تقوم بتحديث الصفحة المفتوحة في المتصفح مرة واحدة حتى يظهر لك نتيجة آخر تحديث للملف.
