المستوى الرابع: إكساء وتجميل المواقع بلغة CSS

بعد أن قمنا ببناء الهيكل العظمي للموقع باستخدام HTML، ننتقل الآن إلى لغة CSS وهي اختصار لـ (Cascading Style Sheets). هذه اللغة هي المسؤولة عن تحديد الألوان، الخطوط، الخلفيات، والمظهر الجمالي الذي يجذب عين الزائر ويجعله يقضي وقتاً أطول داخل مدونتكم.

تعتمد لغة CSS على صيغة برمجية بسيطة تسمى "المُحدِّد" (Selector) واستهداف الخصائص لتغيير قيمها بين أقواس معقوفة { }:

1. الطرق الثلاث لإضافة التنسيقات (CSS insertion)

  • التنسيق المضمن (Inline CSS): يكتب مباشرة داخل وسم HTML باستخدام خاصية style كما فعلنا في عناوين هذا المقال.
  • التنسيق الداخلي (Internal CSS): يكتب داخل وسم <style> في منطقة رأس الصفحة <head>.
  • التنسيق الخارجي (External CSS): وهو الأسلوب الاحترافي؛ حيث نكتب الأكواد في ملف مستقل تماماً بامتداد .css ونربطه بالصفحة.

2. كود تطبيقي لتجميل عناصر الصفحة

إليكم كيف نغير ألوان الخلفية والنصوص، وننسق الأزرار لجعلها تفاعلية وجذابة للزوار:

/* تنسيق جسم الصفحة بالكامل */
body {
    background-color: #f4f7f6; /* لون خلفية مريح للعين */
    font-family: 'Cairo', sans-serif; /* خط عربي احترافي */
    color: #333333; /* لون النص الأساسي */
}

/* تنسيق العناوين الجانبية */
h2 {
    color: #007bff;
    text-align: center;
}

/* تنسيق زر تفاعلي احترافي */
.btn-style {
    background-color: #28a745; /* اللون الأخضر */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s; /* نعومة عند تحريك الماوس */
}

/* تأثير عند مرور مؤشر الماوس فوق الزر */
.btn-style:hover {
    background-color: #218838; /* تغميق اللون الأخضر */
}

المستوى الخامس: بث الذكاء والحركة بلغة JavaScript

الآن أصبح موقعنا يمتلك هيكلاً (HTML) ومظهراً جميلاً (CSS)، ولكنه ما زال موقعاً ثابتاً (Static). لكي نبث فيه الحياة والذكاء، نستخدم لغة JavaScript (JS). هذه اللغة هي لغة البرمجة الفعلية التي تجعل الموقع يتفاعل مع نقرات الزائر، يظهر النوافذ المنبثقة، يعالج البيانات، ويقوم بعمليات حسابية دون الحاجة لإعادة تحميل الصفحة.

1. وسم إدراج لغة الجافاسكربت

تُكتب أكواد الجافاسكربت داخل صفحة الويب بين وسمي البداية والنهاية مخصصين لها: <script> </script>، ويفضل دائماً وضعها في نهاية جسم الصفحة قبل إغلاق وسم </body> مباشرة لضمان سرعة تحميل الموقع.

2. كود تطبيقي لإنشاء ميزة تفاعلية (زر التحية الذكي)

هذا الكود يقوم بالتعرف على اسم الزائر عند الضغط على الزر، ويقوم بعرض رسالة ترحيبية مخصصة له فوراً:

<!-- عنصر HTML: زر عادي يحمل معرفاً خاصاً -->
<button id="welcomeBtn" class="btn-style">اضغط هنا لبدء التعارف</button>

<!-- كود البرمجة والتفاعل JavaScript -->
<script>
    // 1. استهداف الزر من صفحة الويب بواسطة المعرف الخاص به
    const button = document.getElementById('welcomeBtn');

    // 2. مراقبة الزر وانتظار نقرة الزائر (Event Listener)
    button.addEventListener('click', function() {
        
        // 3. إظهار صندوق إدخال يسأل الزائر عن اسمه
        let visitorName = prompt("مرحباً بك في مدونة صحيح، ما هو اسمك الكريم؟");
        
        // 4. التحقق من أن الزائر كتب اسماً ولم يترك الخانة فارغة
        if (visitorName) {
            alert("أهلاً وسهلاً بك يا " + visitorName + " في موقعنا! نتمنى لك رحلة تعليمية ممتعة.");
        } else {
            alert("مرحباً بك يا ضيفنا العزيز!");
        }
    });
</script>

الخلاصة: المنظومة الكاملة للموقع الإلكتروني المحترف

الآن، اكتملت بين أيديكم الأركان الثلاثة الكبرى لبناء وتطوير الويب عالمياً وعملياً. لكي تتضح الصورة الكلية للزوار، تذكروا هذا الترابط الدائم:

اللغة التقنية الدور الوظيفي في الموقع مثال تشبيهي (بناء منزل)
HTML الهيكلة وبناء العناصر الأساسية والنصوص الأعمدة الخرسانية، الجدران، وتوزيع الغرف
CSS التصميم، التجميل، الألوان، وتنسيق المظهر الطلاء، الديكور الداخلي، والإضاءة جمالياً
JavaScript البرمجة، الحركة، التفاعل، والمعالجة الذكية توصيل الكهرباء، الأبواب الأوتوماتيكية، والمصاعد

خطوتكم التطبيقية الأخيرة:

قوموا بدمج الأكواد الثلاثة السابقة في ملف واحد باسم complete_project.html. ضعوا وسوم الـ HTML في البداية، متبوعة بـ الـ CSS لتجميلها، ثم اختموا بالـ JavaScript لبث الحركة والتفاعل. شغلوا الملف واشهدوا ولادة أول تطبيق ويب متكامل وصناعة حقيقية من مجهودكم الخاص الحلال والمبارك.