العودة إلى الدورة

الدرس 31: ربط CSS و JavaScript (الموارد الخارجية)

الدورة الاحترافية في HTML: من الصفر إلى مطور ويب

31. ربط CSS و JavaScript (الموارد الخارجية)

توفر HTML الهيكل، لكن CSS تتعامل مع التنسيق، و JavaScript تتعامل مع التفاعل. نحتاج إلى ربط هذه الملفات الخارجية.

31.1 ربط CSS (<link>)

وسم <link> هو وسم ذاتي الإغلاق يوضع داخل <head>. يخبر المتصفح بمكان العثور على قواعد التنسيق.

  • rel (العلاقة): يتم ضبطها دائماً على stylesheet.
  • href: المسار النسبي أو المطلق لملف CSS.

html

31.2 ربط JavaScript (<script>)

يستخدم وسم <script> لتضمين أو الإشارة إلى السكربتات من جانب العميل.

  • نضع وسم <script>، عادةً قبل وسم </body> الختامي مباشرة، لأسباب تتعلق بالأداء.
  • تشير خاصية src إلى ملف JavaScript الخارجي.

html

<!-- ربط بملف السكربت الرئيسي الخاص بنا -->
<script src="js/app.js"></script>

ملاحظة: بينما يمكنك استخدام <style> (CSS داخلي) و inline CSS، فإن ربط الملفات الخارجية هو الممارسة القياسية في الصناعة للحفاظ على فصل الاهتمامات.