طريقة ربط CSS و JavaScript بصفحة HTML

•

عبد الله نجاوي

•

شارك :

ربما أن من أكثر المشاكل شيوعا التي تواجه المبتدئين عند تعلم بناء المواقع باستخدام HTML و CSS بالإضافة إلى JavaScript هي ربط هذه اللغات مع بعضها بشكل جيد , ببساطة لأن هذه اللغات ترتبط ببعض فإن كانت HTML مهمتها بناء جسم الصفحة ,فإن لغة CSS تقوم بتغطية التصميم أما JavaScript فهي تدخل الدينامية على صفحات الموقع.

طرق الربط المتوفرة

هناك عدة طرق يمكنك الإعتماد عليها من أجل ربط مكونات صفحة HTML رغم أن واحدة هي التي تستخدم بكثرة لفعاليتها مقارنة مع بقية الطرق ,لكن لابأس من الإشارة لهذه الطرق ,والتركيز في الأخير على الأكثر استخداما.

قبل البدء لنتعرف على شكل صفحة HTML الإفتراضي قبل إضافة CSS و JavaScript

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset=“utf-8”>
    <title></title>
  </head>
  <body>
    
  </body>
</html>

والأن سنتعرف على طرق إضافة تنسيقات CSS إلى الصفحة ,وهناك ثلاث طرق يمكنك الإعتماد عليها.

الطريقة الأولى هي Inline Styles أو التنسيقات داخل وسوم HTML مباشرة على هذه الطريقة

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset=“utf-8”>
    <title></title>
  </head>
  <body>
<p style=“color:#0077cc;”>الطريقة الأولى : التنسيقات داخل وسوم HTML </p>
    
  </body>
</html>

كما تلاحظ قمنا بإضافة خاصية اللون “color ” والقيمة “#0077cc” باستخدام style الخاص ب CSS داخل الوسم نفسه.

الطريقة الثانية وهي وضع ال CSS في رأس الصفحة وهي تسمى بالتنسيقات الداخلية أو Internal Style ويتم وضع هذه التنسيقات بين <head> و </head> وهذا مثال على هذه الطريقة

 

<!DOCTYPE html>
  <head>
    <meta charset=“utf-8”>
    <title> برط CSS و JavaScript ب HTML</title>
   
 <style type=“text/css”>
    p {
      
    color: #0077cc;
    
      }

   </style>

  </head>
  <body>

<p>الطريقة الثانية : التنسيقات الداخلية HTML </p>

  </body>
</html>

وطبعا عند تجربت الطريقتين لن يكون هناك فرق في النتيجة ,لكن لما ذا هناك مجموعة من الطرق رغم أن النتيجة واحدة ,هذا الأمر يرجع إلى مسار تطور اللغة حيث كانت لغة بسيطة وصفحات الأنترنت تحتاج فقط لتنسيقات قليلة ومحدودة, لكن الآن الأمر مختلف.

لنفترض الأن أننا نتوفر على 100 صفحة ,ونريد إجراء بعض التعديلات ,هل سنقوم بفتح 100 صفحة والتعديل على كل واحدة بشكل منفصل ,ماذا لو كان ليدنا 1000 صفحة أو أكثر ,لهذا هناك طريقة أخرى عملية أكثر لإضافة التنسيقات لصفحات HTML .

التنسيقات الخارجية External Style

فكرة التنسيقات الخارجية هي وضع أكواد CSS في ملف يملك الإمتداد .css ثم استدعاء هذا الملف عند الحاجة ,قد يكون ملف .css في النفس المجلد الذي يحتوي على صفحات HTML أو في مجلد منفصل.

والكود النهائي سيكون على هذا الشكل

<!DOCTYPE html>
  <head>
    <meta charset=“utf-8”>
    <title> برط CSS و JavaScript ب HTML</title>

    <link rel=“stylesheet” type=“text/css” href=“style.css”>
  </head>
  <body>

<p>الطريقة التالتة : التنسيقات الخارجية HTML </p>

  </body>

</html>

إضافة ملف JavaScript

طريقة إضافة جافا سكريبت هي نفسها بالنسبة CSS حيث هي أيضا تدعم إمكانية الإضافة داخل الوسوم والملف الداخلي والخارجي , لهذا لن نتطرق للطريقتين الأولى والثانية ,و سنركز على التالتة أي الربط الخارجي.

سيكون لهذا سيكون ملف HTML النهائي الخاص بنا على هذا الشكل

<!DOCTYPE html>
  <head>
    <meta charset=“utf-8”>
    <title> برط CSS و JavaScript ب HTML</title>

    <link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
    <script src=“/script.js”></script>

  </head>
  <body>

<p>الطريقة الأولى : التنسيقات داخل وسوم HTML </p>

  </body>
</html>

 

وبهذا يمكنك إضافة كل من CSS و JavaScript بطريقة منظمة وأكثر فاعلية ,طبعا ينصح بجعل استدعاء ملفات JavaScript هي الأخيرة أي القيام بتقديم CSS وهذا بسبب طريقة عمل الملفين , لأن طريقة عمل المتصفحات هي تنفيذ الأوامر في الصفحة بشكل تنازلي ,حيث مثلا لو قمت بتقديم ملف جافا سكريبت وكان يحتوي على خطأ فقد يؤدي هذا الأمر لتعطيل كامل الموقع ,لهذا ينصح بجعله هو الأخير.

اكتشاف المزيد من كيف عربي

اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.

«
»