في هذا الدرس، سنتعلم كيفية الوصول إلى صفحات HTML عبر الملفات على جهاز الكمبيوتر المحلي. سنتناول خطوات إنشاء مجلد وملف HTML، كيفية فتح هذا الملف في المتصفح، وشرح مفهوم بروتوكول الملفات، بالإضافة إلى تثبيت امتداد Live Server في برنامج VSCode. هذا الدرس مفيد للمبتدئين في تطوير الويب الذين يرغبون في فهم كيفية العمل مع الملفات المحلية وتجربة صفحات HTML قبل نشرها على الإنترنت.

1. إنشاء مجلد وملف HTML

1.1 إنشاء المجلد

أول خطوة هي إنشاء مجلد جديد على جهاز الكمبيوتر الخاص بك. اتبع الخطوات التالية:

1. انتقل إلى الموقع الذي ترغب في إنشاء المجلد فيه على جهاز الكمبيوتر (مثلاً، سطح المكتب أو مستندات).


2. انقر بزر الماوس الأيمن في المساحة الفارغة واختر "جديد" ثم "مجلد".


3. قم بتسمية المجلد باسم "Test" (أو أي اسم تفضله).

1.2 إنشاء ملف HTML

بمجرد أن يكون لديك المجلد "Test"، قم بإنشاء ملف HTML داخله:

1. افتح المجلد "Test".


2. انقر بزر الماوس الأيمن في المساحة الفارغة داخل المجلد واختر "جديد" ثم "مستند نصي".


3. قم بتسمية المستند "gallery.html" مع التأكد من تغيير امتداد الملف من .txt إلى .html.


4. يمكنك الآن تحرير الملف باستخدام محرر نصوص مثل Notepad أو VSCode، وكتابة محتوى HTML الأساسي فيه.

2. فتح ملف HTML في المتصفح

2.1 استخدام السحب والإفلات

لفتح ملف HTML في المتصفح، يمكنك استخدام طريقة السحب والإفلات:

1. افتح متصفح الويب المفضل لديك (مثل Chrome أو Firefox).


2. اسحب ملف "gallery.html" من مجلد "Test" إلى نافذة المتصفح.


3. ستلاحظ أن المتصفح يعرض محتويات ملف HTML مباشرة.

2.2 قراءة المسار من الجذر المحلي

عند فتح ملف HTML في المتصفح، يقرأ المتصفح المسار الكامل للملف على جهاز الكمبيوتر المحلي. يشمل هذا المسار كافة المجلدات من الجذر المحلي حتى ملف HTML. على سبيل المثال، قد يكون المسار على جهازك:

يشير هذا المسار إلى موقع الملف داخل هيكل المجلدات على جهاز الكمبيوتر الخاص بك.

3. مفهوم بروتوكول الملفات (File Protocol)

بروتوكول الملفات هو نظام يستخدم لفتح الملفات من نظام الملفات المحلي في المتصفح. عند استخدام هذا البروتوكول، يبدأ عنوان URL بـ file:///، يليه مسار الملف على جهاز الكمبيوتر. يتيح هذا البروتوكول للمتصفح الوصول إلى الملفات الموجودة محلياً وفتحها كما لو كانت على الويب، لكنه لا يدعم وظائف الشبكة مثل الطلبات من الخوادم البعيدة.

4. تثبيت امتداد Live Server في VSCode

4.1 تنزيل وتثبيت Live Server

لتسهيل عملية تطوير الويب وتجربة الصفحات بشكل مباشر، يمكنك تثبيت امتداد Live Server في VSCode:

1. افتح برنامج VSCode.


2. انتقل إلى قسم "الامتدادات" (Extensions) من الشريط الجانبي الأيسر.


3. في مربع البحث، اكتب "Live Server" واضغط على Enter.


4. اختر امتداد "Live Server" من النتائج، ثم انقر على "تثبيت" (Install).

4.2 استخدام Live Server

بمجرد تثبيت الامتداد، يمكنك فتح ملف HTML الخاص بك:

1. افتح ملف "gallery.html" في VSCode.


2. انقر بزر الماوس الأيمن داخل المحرر واختر "Open with Live Server" من القائمة.


3. سيفتح Live Server صفحة HTML في متصفح الويب، مما يتيح لك رؤية التعديلات في الوقت الحقيقي دون الحاجة إلى إعادة تحميل الصفحة يدويًا.

خاتمة

تعلم كيفية الوصول إلى صفحات HTML عبر الملفات يعد خطوة أساسية في تطوير الويب. من خلال إنشاء مجلد وملف HTML، فتح الملف في المتصفح، وفهم مفهوم بروتوكول الملفات، بالإضافة إلى استخدام Live Server لتسهيل عملية التطوير، يمكنك تحسين مهاراتك وتجربة تطوير صفحات الويب بكفاءة أكبر.