تصميم موقع الكتروني من البداية بلغات البرمجة HTML و CSS و Java Script لم يعد شيئا خارقا كما كان في فترة ظهور اﻷنترنيت بل أصبح الآن ضمن أساسيات تعلم و تطبيق البرمجة في إطار إنشاء صفحات الويب و التي تُكون الموقع اﻹلكتروني ، و كل شخص يمكن أن ينشئ لنفسه أو لغيره موقعا إلكترونيا بسيطا على اﻷنترنيت يحتوي على اﻷفكار أو المعلومات التي يريد تقديمها للآخرين مثل السيرة الذاتية أو الصور و الفيديوهات التي توثق نشاطاته في مكانه . إذا كيف نحصل على ذلك ؟
 |
| تصميم موقع إلكتروني |
كيف نحدد نوع و محتوى الموقع اﻹلكتروني الذي نريد إنشاءه ؟
كيف نبدأ في برمجة هذا الموقع اﻹلكتروني ؟
كيف نرفع الموقع للظهور على اﻷنترنيت ؟
كيف نحدد نوع و محتوى الموقع اﻹلكتروني الذي نريد إنشاءه ؟
هناك نوعين من المواقع اﻹلكترونية اﻷول موقع صفحات الويب الثابت و الثاني الموقع الديناميكي . الموقع الثابت ليس صعبا في برمجته و نستخدم في ذلك HTML و CSS و JS و يمكن أن يحتوي مثلا على صفحات تعريفية حول موضوع أو شخص أو شركة أو غير ذلك . الموقع الديناميكي ليس مثل اﻷول و يحتاج إلى برمجة متقدمة بسبب احتواءه على قواعد البيانات و لغات برمجة إضافية مثل PHP .
الموقع اﻹلكتروني الثابت تكون ملفاته و صفحاته مخزنة على سيرفر بعيد مرتبط باﻷنترنيت و كلما طٌلبت عن طريق المتصفح يتم جلبها و بسرعة ، في حين المواقع الدينامكية تكون ضخمة و عبارة عن منصات يتفاعل فيها المستخدم مع الموقع حيث يسجل بياناته و يعالجها الموقع عن طريق السيرفر و باستخدام قواعد بيانات و لغات البرمجة الخاصة .
كيف نبدأ في برمجة هذا الموقع اﻹلكتروني ؟
أولا نختار أحد محررات اﻷكواد بلغة HTML و هي كثيرة و اﻷشهر في اﻹستخدام هو VisualStudio Code لشركة ميكروسوفت و هو مفتوح المصدر و يدعم عدة لغات برمجة أخرى و يقبل اﻹضافات ، و يمكن الوصول إليه من هذا الرابط ، و المحرر يستخدم حاليا تقنيات الذكاء اﻹصطناعي (Copilot) للمساعدة في كتابة اﻷكواد غير أنه يحتاج البرنامج أولا للتدرب عليه و فهم المكونات و النوافذ .
هيكل لغة HTML يأتي بهذا الشكل و يحتوي على الوسوم التي تكون الصفحة و هي الرأس و داخله العنوان ثم جسم الصفحة التي تكون المحتويات مثل النصوص و الصور و الفيديوات وبالتالي نبدأ في ملء الصفحة و بأي محتوى نريد .
 |
| هيكل لغة البرمجة html |
في برنامج Visual Studio Code نقوم بإنشاء ملف جديد index.html لكتابة أكواد صفحات الموقع ، و ذلك بعد إنشاء مجلد جديد في سطح المكتب حيت سيحتوي كل الملفات التي سنقوم بعملها في البرنامج .الآن ﻹضافة محتوى الموقع و يكون داخل داخل العنصر <body>…</body> نحتاج الوسوم Tags المختلفة الموجودة في كورسات تعلم لغة البرمجة HTML و هذه بعض اﻷمثلة :
<img> </img> لعرض صورة في الصفحة
<p> </p> لعرض فقرة
<b> </b> كتابة عريضة
<button> </button> عرض زر في الصفحة
إذا بعد كتابة اﻷكواد المناسبة التي نحتاجها في الصفحات الخاصة بالموقع اﻹلكتروني الذي نريد بناءه نمر لمرحلة ثانية و هي التعرف على لغة CSS و أكوادها و هي لغة التصميم و البرمجة التي نحتاجها لتنسيق محتوى الصفحات التي كتبناها بي HTML .
بعد إنشاء ملف جديد في برنامج Visual Studio Code بصيغة index.css نضيف اﻷكواد الخاصة التي نريدها و الخاصة بلغة CSS و هذا مثال :
<style>
h1 {
color: red;
text-align: center;
}
</style>
<h1>السلام عليكم</h1>
اﻷن ملف CSS
الذي يحتوي على مجموعة
من اﻷكواد يجب ربطه بملف HTML
لكي يتعرف على خصائصه
و ذلك عن طريق إضافة رابط داخل ملف HTML
و يكون بهذا الشكل
أسفله و نضعه في داخل وسم head
:
و نفس الطريقة السابقة نتبعها في إنشاء ملف Java Script حيت إضافة ملف جديد بصيغة script.js إلى نفس المجلد الذي يحتوي اﻷن على تلاثة ملفات index.html و index.css و script.js . طريقة ربط ملف الجافا بي HTML هي بإضافة الكود التالي داخل head في HTML :
ما ينقص اﻷن هو إنشاء عدة صفحات للموقع و تكون كل صفحة بكود خاص بها ثم بعد ذلك ربطها جميعا .المقطع التالي عبارة عن فيديو تطبيقي للأكواد السابقة :
كيف نرفع الموقع للظهور على اﻷنترنيت ؟
اتباع المراحل التالية شيء ضروري لرفع ملفات الموقع اﻹلكتروني الذي صممناه و أضفنا المحتوى الذي نريده و الصفحات و العناصر كلها كالنصوص و الفقرات و الجداول و الصور و القوائم و الروابط الخارجية إلى غير ذلك ثم اﻷشياء اﻷخرى لما بعد تشغيل الموقع :
- التحقق واختبار عمل الموقع من خلال المتصفح الخاص بي
- اختيار سيرفر الاستضافة تابع ﻷحد شركات اﻹستضافة
- شراء إسم نطاق و ربطه بالموقع اﻹلكتروني الخاص بي
- رفع ملفات الموقع عن طريق FTP نحو السيرفر
- النسخ اﻹحتياطي لملفات الموقع
- توفير أمان جيد للموقع
- تحسين الموقع في نتائج محركات البحث
- تحديثات لمحتوى و أمان الموقع
- حملات ترويج للموقع ليتعرف عليه الجمهور
