كيفية إنشاء ملفات HTML لعمل موقع ويب خطوة بخطوة
أزيكم يا شباب؟ عاملين إيه؟ يا رب تكونوا بخير وسلامة.
لو أنت دلوقتي عايز تبدأ تتعلم أو تنشئ الموقع بتاعك على الإنترنت، لازم تعرف الموقع ده بيتكون من إيه، وإيه هي الملفات اللي هتحتاجها عشان تبني الموقع بتاعك.
ملفات الموقع وأنواعها
المواقع بتتكون من ملفات مختلفة، أشهرها:
-
ملفات HTML: وهيكل الموقع.
-
ملفات CSS: لتنسيق وتصميم الموقع.
-
ملفات JavaScript: لإضافة تفاعلية وحركات للموقع.
في الكورس ده هنتعلم أساسيات لغة HTML لأنها الأساس اللي بيبني عليه الموقع.
طريقتين لإنشاء ملفات الموقع
الطريقة اليدوية
-
إنشاء مجلد خاص بالموقع:
على سطح المكتب في الكمبيوتر، تعمل كليك يمين وتختار New Folder (مجلد جديد)، وتسميه باسم الموقع بتاعك علشان تقدر تفرق بين مشاريعك.
مثلاً، ممكن تسميه TestSite.
-
إنشاء ملف HTML داخل المجلد:
جوه المجلد، تعمل كليك يمين وتختار New Text Document (ملف نصي جديد).
بعدين تسمي الملف index بدل الاسم الافتراضي، وتحذف امتداد
.txtوتغيره لـ.html.لو الامتداد مش ظاهر، هتحتاج تفتح إعدادات الجهاز وتلغي خيار "إخفاء امتدادات الملفات المعروفة".
-
فتح الملف في المتصفح:
لما تفتح الملف ده (بعد تغييره لـ
.html) هتلاقيه فتح صفحة فارغة لأنك لسه مافيش كود داخل الملف.
التعديل على الملف باستخدام محرر الأكواد
-
فتح الملف في محرر الأكواد:
تعمل كليك يمين على الملف، وتختار Open with ثم تختار محرر الأكواد اللي انت مثبتو، زي Visual Studio Code.
-
كتابة نص داخل الملف:
تكتب أي نص أو كود بسيط، مثلاً كلمة "Test".
-
حفظ الملف:
تضغط على Ctrl + S للحفظ.
-
تحديث الصفحة في المتصفح:
تروح لمتصفح الإنترنت وتعمل تحديث (Reload)، هتلاقي الكلمة اللي كتبتها ظهرت.
الطريقة الثانية: إنشاء الملفات مباشرة من محرر الأكواد
-
افتح محرر الأكواد.
-
من داخل المحرر، تختار Open Folder وتحدد المكان اللي عايز تنشئ فيه ملفات الموقع (مثلاً سطح المكتب).
-
تعمل فولدر جديد وتسميه باسم الموقع.
-
جوه الفولدر، تعمل ملف جديد وتسميه index.html.
-
تكتب داخل الملف أي نص أو كود HTML.
-
ممكن تفعل خاصية Auto Save (الحفظ التلقائي) في المحرر علشان كل ما تعدل يترفع تلقائي من غير ما تحتاج تضغط Ctrl + S.
-
افتح الملف في المتصفح وشوف التغييرات تظهر مباشرة.
شرح الفرق بين عرض الملف في المتصفح ومحرر الأكواد
-
المتصفح: هو المكان اللي بتشوف فيه نتيجة الكود اللي كتبته بشكل صفحة ويب فعلية.
-
محرر الأكواد: هو المكان اللي بتكتب فيه الكود نفسه.
مثلاً، لو كتبت كلمة "Test" في الملف من غير ما تحطها داخل وسم HTML، هتظهر في المتصفح بس لازم تحفظ الملف الأول.
نصائح مهمة
-
دايمًا خليك تحرر الملفات باستخدام محرر أكواد مخصص زي Visual Studio Code، مش المفكرة العادية.
-
فعل خاصية الحفظ التلقائي لو موجودة علشان توفر وقت.
-
اتعلم تدير امتدادات الملفات على جهازك علشان تقدر تغير
.txtلـ.htmlبسهولة. -
لما تعمل تحديث في المتصفح، دايمًا اتأكد إنك حفظت التعديلات في المحرر.
إن شاء الله تكونوا استفدتوا من الشرح، وإن شاء الله في الفيديوهات الجاية هنتعلم إزاي نكتب أكواد HTML بشكل عملي، خطوة بخطوة.
لو عندكم أي أسئلة أو استفسارات، اكتبولي في التعليقات، وهساعدكم على طول.
أشوفكم في فيديو جديد، والسلام عليكم.
شاهد الفيديو التوضيحي
وفي النهاية اشكرك علي المتابعة واللي اللقاء