🏆 أساسيات HTML : من الصفر إلى بناء أول صفحة ويب

المقدمة : المبرمج المحترف لا يستخدم “المفكرة العادية” ، بل يستخدم أدوات تساعده على اكتشاف الأخطاء ، تلوين الأكواد لتسهيل قراءتها ، وتسريع عملية البناء . في أكاديمية قياوي ، نعتمد أفضل أداة في العالم حالياً : Visual Studio Code (VS Code) .

  1. لماذا VS Code ؟ مجاني تماماً : مدعوم من شركة مايكروسوفت .

ذكي : يقترح عليك الأكواد ويكملها عنك (Intellisense) .

مرن : يمكنك إضافة أدوات مساعدة بداخله تجعل عملك أسهل بعشر مرات .

  1. خطوات التجهيز (خطوة بخطوة) : التحميل : توجه إلى الموقع الرسمي code.visualstudio.com واضغط على زر التحميل المتوافق مع نظام تشغيلك (Windows أو Mac) .

التثبيت : افتح الملف الذي قمت بتحميله واضغط Next حتى النهاية . (تأكد من تحديد خيار “Add to PATH” إذا ظهر لك) . فتح أول مشروع : * قم بإنشاء مجلد جديد على سطح المكتب وسمِّه MyFirstProject . افتح برنامج VS Code ،  ثم اختر File -> Open Folder واختر المجلد الذي أنشأته .

  1. الإضافة السحرية (Live Server) : هذه الأداة هي الصديق الصدوق للمبرمجين ، فهي تفتح لك موقعك في المتصفح وتحدثه تلقائياً بمجرد كتابة أي حرف وحفظه .

من القائمة الجانبية في VS Code ، اضغط على أيقونة المربعات (Extensions) . في خانة البحث ، اكتب : Live Server . اضغط على زر Install .

🎯 التحدي التطبيقي لهذا الدرس :

قم بتثبيت البرنامج ، وأنشئ بداخله ملفاً جديداً (File -> New File) وسمِّه index.html . هل أنت مستعد للدرس القادم لنكتب أول هيكل حقيقي للموقع ؟ لتكوين مجلد على سطح المكتب يكتفي  :

الطريقة الأولى  : من خلال نظام التشغيل (ويندوز كمثال) ، هذه هي الطريقة التقليدية التي يعرفها الجميع :

اذهب إلى سطح المكتب (Desktop) أو أي قرص صلب (مثل D:) . اضغط بزر الفأرة الأيمن (Right Click) في أي مكان فارغ . اختر جديد (New) ثم مجلد (Folder) . وقم بتسميته : MyFirstProject.

الطريقة الثانية : من داخل برنامج VS Code (طريقة المبرمجين) بما أننا قمنا بتثبيت البرنامج ، يفضل أن يتعلم الطالب كيف يدير ملفاته من داخله : افتح برنامج Visual Studio Code

من القائمة العلوية اختر File ثم Open Folder . ستفتح لك نافذة، اضغط على أيقونة “New Folder” (مجلد جديد) الموجودة في الأعلى. سمِّه MyFirstProject ثم اضغط على الزر Select Folder . الآن سيظهر اسم المجلد في القائمة الجانبية للبرنامج ، وأي ملف تنشئه سيحفظ داخله تلقائياً .

💡 نصيحة تقنية لطلاب الأكاديمية (مهمة جداً) : يجب تنبيه الطلاب إلى قاعدة ذهبية في تسمية المجلدات والملفات في عالم البرمجة :

تجنب المسافات :

يفضل دائماً عدم ترك مسافة في اسم المجلد .

(مثلاً نكتب MyFirstProject أو my_first_project بدلاً من My First Project). استخدم اللغة الإنجليزية :

يفضل دائماً تسمية المجلدات والملفات بالإنجليزية لتجنب أي مشاكل تقنية مع المتصفحات أو السيرفرات مستقبل .

https://youtu.be/K9QUBiy_7Go?si=Xn7lrITHq_kSqM7f

Scroll to Top