أساسيات HTML5

إعداد بيئة التطوير الخاصة بك

20 دقيقة الدرس 2 من 18

اختيار محرر الاكواد: Visual Studio Code

محرر الاكواد هو الاداة الاساسية التي ستستخدمها يوميا كمطور. بينما توجد خيارات كثيرة متاحة، يعتبر Visual Studio Code (VS Code) المحرر الاكثر شعبية والموصى به لتطوير الويب. وهو مجاني ومفتوح المصدر وخفيف ويعمل على Windows و macOS و Linux.

لتثبيت VS Code:

قم بزيارة https://code.visualstudio.com في المتصفح.
انقر على زر التحميل لنظام التشغيل الخاص بك.
شغل المثبت واتبع التعليمات على الشاشة.
افتح VS Code بعد اكتمال التثبيت.

ملاحظة: VS Code يختلف عن Visual Studio. الاخير هو بيئة تطوير متكاملة لتطوير .NET بشكل رئيسي، بينما VS Code هو محرر خفيف مثالي لتطوير الويب.

اضافات VS Code الاساسية

الاضافات تضيف ميزات قوية الى VS Code. اليك ثلاث اضافات اساسية يجب على كل مطور HTML تثبيتها فورا:

1. Live Server -- يطلق خادم تطوير محلي مع اعادة تحميل تلقائية. في كل مرة تحفظ فيها ملف HTML، يتم تحديث المتصفح تلقائيا لعرض التغييرات.

2. Prettier -- ينسق الكود تلقائيا ليكون نظيفا ومتسقا. يصلح المسافات البادئة والتباعد وانماط علامات الاقتباس حتى تتمكن من التركيز على كتابة الكود.

3. Auto Rename Tag -- عندما تعيد تسمية وسم HTML افتتاحي، تقوم هذه الاضافة تلقائيا بتعديل وسم الاغلاق المطابق. هذا يمنع عدم تطابق الوسوم ويوفر الوقت.

لتثبيت اضافة، انقر على ايقونة الاضافات في الشريط الجانبي (او اضغط Ctrl+Shift+X في Windows / Cmd+Shift+X في Mac)، ابحث عن اسم الاضافة، وانقر تثبيت.

مثال: اعدادات VS Code لتطوير HTML

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "liveServer.settings.doNotShowInfoMsg": true
}

نصيحة: يمكنك فتح اعدادات VS Code بالضغط على Ctrl+, (في Windows) او Cmd+, (في Mac). انتقل الى عرض JSON بالنقر على ايقونة الاقواس المعقوفة في الزاوية العلوية اليمنى للصق الاعدادات اعلاه مباشرة.

نظرة عامة على ادوات المطور في المتصفح

كل متصفح حديث يتضمن ادوات مطور مدمجة (DevTools) تتيح لك فحص صفحات الويب وتصحيحها وتعديلها في الوقت الفعلي. لفتح ادوات المطور:

Chrome / Edge: اضغط F12 او Ctrl+Shift+I (في Windows) / Cmd+Option+I (في Mac).
Firefox: اضغط F12 او Ctrl+Shift+I.
Safari: فعل قائمة Develop في التفضيلات ثم اضغط Cmd+Option+I.

اهم لوحات ادوات المطور لتطوير HTML هي:

Elements -- فحص وتعديل HTML و CSS في الوقت الفعلي.
Console -- عرض الاخطاء وتنفيذ اوامر JavaScript.
Network -- مراقبة طلبات واستجابات HTTP (تذكر نموذج العميل والخادم من الدرس الاول).

مثال: استخدام وحدة التحكم لاختبار JavaScript

// افتح DevTools > تبويب Console واكتب:
document.title
// هذا يعيد عنوان الصفحة الحالية

document.querySelector("h1").textContent
// هذا يعيد النص داخل اول عنصر h1

انشاء مشروعك الاول

الان دعنا ننشئ بنية مشروع صحيحة. اتبع هذه الخطوات:

انشئ مجلدا جديدا على جهازك. سمه my-first-website.
افتح VS Code واذهب الى File > Open Folder، ثم اختر مجلدك الجديد.
في الشريط الجانبي لمستكشف VS Code، انقر على ايقونة ملف جديد وسمه index.html.

مثال: ملف index.html مكتمل كنقطة بداية

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>موقعي الاول</title>
</head>
<body>
    <h1>مرحبا بكم في موقعي</h1>
    <p>انا اتعلم HTML وهذا اول مشروع لي.</p>
    <p>اليوم قمت بإعداد بيئة التطوير الخاصة بي.</p>
</body>
</html>

مثال: بنية مجلد المشروع الموصى بها

my-first-website/
  index.html
  about.html
  contact.html
  css/
    style.css
  js/
    main.js
  images/
    logo.png

ملاحظة: ملف index.html له اهمية خاصة. خوادم الويب تبحث عن هذا الملف افتراضيا عندما يزور شخص ما موقعك. سم صفحتك الرئيسية دائما index.html.

استخدام Live Server

مع تثبيت Live Server، يمكنك معاينة صفحتك فورا:

افتح ملف index.html في VS Code.
انقر بزر الفارة الايمن في اي مكان في المحرر واختر "Open with Live Server".
سيفتح المتصفح الافتراضي ويعرض صفحتك على http://127.0.0.1:5500.
الان عدل النص في ملف HTML واحفظ. سيتم تحديث المتصفح تلقائيا.

حلقة التغذية الراجعة الفورية هذه ضرورية للتعلم. تكتب الكود وتحفظ وترى النتيجة فورا دون تحديث المتصفح يدويا.

مثال: اختبار اعادة التحميل التلقائي

<!-- غير هذا السطر في ملف index.html: -->
<h1>مرحبا بكم في موقعي</h1>

<!-- الى هذا: -->
<h1>مرحبا من VS Code!</h1>

<!-- احفظ الملف (Ctrl+S / Cmd+S) -->
<!-- شاهد المتصفح يتحدث تلقائيا -->

قواعد تسمية الملفات

اتباع قواعد التسمية الصحيحة يمنع الاخطاء ويحافظ على تنظيم مشاريعك:

استخدم الاحرف الصغيرة -- سم الملفات about.html وليس About.HTML. خوادم الويب غالبا حساسة لحالة الاحرف.
استخدم الشرطات بدلا من المسافات -- سم الملفات contact-us.html وليس contact us.html. المسافات في عناوين URL تسبب مشاكل.
استخدم اسماء وصفية -- سم الملفات portfolio.html وليس page2.html. الاسماء الواضحة تجعل المشاريع اسهل في الصيانة.
استخدم دائما امتداد .html -- هذا يخبر المتصفح والمحرر ان الملف يحتوي كود HTML.
ابق الاسماء قصيرة -- استهدف كلمة الى ثلاث كلمات. تجنب الاسماء الطويلة.

خطا شائع: استخدام المسافات او الاحرف الخاصة في اسماء الملفات. ملف بأسم my page.html يصبح my%20page.html في عنوان URL، وهذا يبدو فوضويا وقد يسبب مشاكل. استخدم دائما الشرطات بدلا من المسافات.

نصيحة: في VS Code، اكتب ! متبوعا بمفتاح Tab داخل ملف HTML فارغ. هذا يفعل اختصار Emmet وينشئ هيكل HTML5 كاملا فوريا، مما يوفر عليك كتابة البنية بالكامل يدويا.

تمرين عملي

قم بإعداد بيئة التطوير الخاصة بك باتباع هذه الخطوات: ثبت VS Code والاضافات الثلاث الموصى بها (Live Server و Prettier و Auto Rename Tag). انشئ مجلد مشروع بأسم html-course على سطح المكتب. بداخله انشئ ملف index.html مع هيكل HTML5. اضف عنوانا بأسمك وفقرة تصف لماذا تريد تعلم HTML. افتحه بـ Live Server وتاكد من عرضه بشكل صحيح في المتصفح. ثم افتح ادوات المطور وافحص عنصر العنوان في لوحة Elements. جرب تغيير نص العنوان مباشرة في ادوات المطور ولاحظ التغيير على الصفحة.