33- ربط HTML مع تقنيات أخرى – المستوى الرابع
ربط HTML مع CSS (لتنسيق الصفحات)
ما هي CSS؟
CSS = Cascading Style Sheets
هي اللغة المسؤولة عن تنسيق وتجميل HTML:
-
تغيير الألوان، الخطوط، المسافات.
-
التحكم في أحجام العناصر.
-
إنشاء تصاميم متجاوبة مع الشاشات.
طرق ربط CSS مع HTML:
أ) Inline CSS (داخل العنصر نفسه)
⚠️ غير مستحسن لأنه يلخبط الكود ويصعب التعديل.
ب) Internal CSS (داخل <style> في <head>)
ج) External CSS (ملف خارجي) ✅ (أفضل طريقة)
📂 ملف style.css:
⚡ 2. ربط HTML مع JavaScript (لإضافة تفاعلية)
ما هي JavaScript؟
JavaScript = لغة برمجة بتضيف حياة وتفاعلية لموقعك:
-
عمل أزرار تفاعلية.
-
التحقق من النماذج (Validation).
-
تغيير محتوى الصفحة بدون إعادة تحميل.
-
التعامل مع API وجلب بيانات.
طرق إضافة JavaScript:
أ) Inline JavaScript (داخل وسم)
ب) Internal JavaScript (داخل <script> في الصفحة)
ج) External JavaScript (ملف خارجي) ✅ (أفضل طريقة)
📂 ملف script.js:
📂 ملف index.html:
🛠️ 3. التعرف على مكتبات وأُطر عمل Front-End
بعد ما تتقن HTML + CSS + JavaScript، تقدر تستخدم أدوات جاهزة لتسريع عملك.
🔹 أ) مكتبات (Libraries)
المكتبة = مجموعة دوال وأكواد جاهزة تقدر تستخدمها بدل ما تكتبها من الصفر.
-
jQuery: مكتبة لتسهيل كتابة JavaScript (أقل استخدامًا الآن).
-
GSAP: مكتبة للأنيميشن.
-
Three.js: مكتبة لرسوميات 3D في الويب.
🔹 ب) أُطر عمل (Frameworks)
الإطار = نظام كامل بيوفر هيكل + أدوات لتطوير المواقع بسرعة.
1. CSS Frameworks
-
Bootstrap:
-
الأشهر في تنسيق الصفحات بسرعة.
-
يوفر أزرار، جداول، نماذج، شبكات (Grid) جاهزة.
-
مثال:
-
-
Tailwind CSS:
-
إطار حديث يعتمد على Utility Classes.
-
مرن أكثر من Bootstrap.
-
2. JavaScript Frameworks (مراحل لاحقة بعد التأسيس)
-
React.js (الأكثر انتشارًا).
-
Vue.js (سهل التعلم).
-
Angular (قوي لكن معقد).
🔹 مثال عملي (HTML + CSS + JS + Bootstrap)
📂 ملف style.css:
📂 ملف script.js:
✅ ملخص
-
CSS → لتنسيق وتجميل الصفحات.
-
JavaScript → لإضافة التفاعلية والحياة.
-
مكتبات وأُطر عمل (Bootstrap, React…) → لتسريع وتسهيل تطوير المواقع.
Call now
Contact WhatsApp
