Lesson 32 / الدرس 32

Linking CSS and JS to your page / ربط CSS و JS بصفحتك

A page becomes real once you connect it to a stylesheet with <link> and a script with <script> — two tags that pull in the files that make the page look good and do things.

تصبح الصفحة حقيقية حين تربطها بملف تنسيق عبر <link> وبملف سكربت عبر <script> — وسمان يجلبان الملفات التي تُجمّل الصفحة وتجعلها تفعل شيئًا.

Every tag you have written so far describes structure, and the browser supplies its own plain default look. Two files change that: a stylesheet decides how the page looks, and a script decides what it does. You connect both with a single tag each — <link> for the stylesheet, <script> for the script.

كل وسم كتبته حتى الآن يصف الهيكل فقط، والمتصفح يعطيه شكله الافتراضي البسيط. وملفان يغيّران ذلك: ملف تنسيق يقرر شكل الصفحة، وملف سكربت يقرر ما تفعله. وتربط كل واحد منهما بوسم واحد — <link> لملف التنسيق، و <script> للسكربت.

Linking a stylesheet with `<link>`

ربط ملف تنسيق بالوسم <link>

<link rel="stylesheet" href="styles.css"> goes inside <head>. rel says what kind of file this is related to — "stylesheet" here — and href says where to find it. Putting it in the head means the browser downloads and applies your styles before it shows the page, so the visitor never sees a plain, unstyled flash of it first. What actually goes inside that file — the real rules of CSS — is a separate course; here you only need to know how to point at it.

الوسم <link rel="stylesheet" href="styles.css"> يوضع داخل <head>. والسمة rel تقول نوع الملف المرتبط — "stylesheet" هنا — والسمة href تقول أين يوجد. ووضعه في الرأس يعني أن المتصفح يُحمّل تنسيقك ويطبقه قبل أن يعرض الصفحة، فلا يرى الزائر لمحة من الصفحة بلا تنسيق قبلها. أما ما بداخل ذلك الملف — قواعد CSS الحقيقية — فمقرر مستقل؛ وكل ما تحتاجه هنا أن تعرف كيف تشير إليه.

<head>
    <meta charset="UTF-8">
    <title>Amman Dates</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Amman Dates</h1>
    <p>We sell dates and honey from local farms.</p>
</body>

The stylesheet link sits with the rest of the head. This preview has no styles.css to load, so the page still renders in the browser's plain default look — the point here is only that the tag itself is written correctly.

رابط ملف التنسيق يقع مع بقية عناصر الرأس. لا يوجد في هذه المعاينة ملف styles.css ليُحمَّل، فتظهر الصفحة بشكلها الافتراضي البسيط من المتصفح — والمقصود هنا فقط أن الوسم نفسه مكتوب بشكل صحيح.

Adding a script with `<script>`

إضافة سكربت بالوسم <script>

<script src="app.js"></script> connects a JavaScript file. Unlike <link>, <script> always has a closing tag, even when — as here — nothing goes between the two. The browser reads your page from top to bottom, and a script placed in <head> runs before the body exists, before there is anything below it for the script to touch. That is why script tags traditionally sit right before the closing </body> tag: by the time the browser reaches them, everything above has already loaded.

الوسم <script src="app.js"></script> يربط ملف JavaScript. وبخلاف <link>، لوسم <script> دائمًا وسم إغلاق، حتى وإن لم يكن بينهما — كما هنا — أي شيء. والمتصفح يقرأ صفحتك من أعلى إلى أسفل، والسكربت الموضوع في <head> يعمل قبل أن يوجد الجسم، وقبل أن يكون تحته أي شيء يستطيع لمسه. ولهذا توضع وسوم <script> تقليديًا قبل وسم الإغلاق </body> مباشرة: فحين يصل إليها المتصفح، يكون كل ما فوقها قد حُمّل بالفعل.

<body>
    <h1>Amman Dates</h1>
    <p>We sell dates and honey from local farms.</p>

    <script src="app.js"></script>
</body>

The script tag is the very last thing before </body>. This preview has no real app.js to run, but notice the page above it renders exactly as if the script were not there at all — that is the whole point of the placement.

وسم السكربت هو آخر شيء قبل </body>. لا يوجد في هذه المعاينة ملف app.js حقيقي ليعمل، لكن لاحظ أن الصفحة فوقه تظهر تمامًا كما لو لم يكن السكربت موجودًا أصلًا — وهذا بالضبط سبب وضعه هناك.

وضع <script src="app.js"></script> في <head> ثم جعله يبحث عن عنصر أسفل الصفحة خطأ كلاسيكي شائع: فالعنصر غير موجود بعد حين يعمل السكربت، فيفشل في العثور عليه بصمت. انقل وسم <script> إلى ما قبل </body> مباشرة، ونفس الكود يعمل، لأن كل عنصر فوقه يكون موجودًا حينها.

يمكنك أيضًا كتابة CSS و JavaScript مباشرة داخل الصفحة، بالوسم <style> وبكتلة <script> بلا src. لكن الملفات المنفصلة أفضل عادةً حين تكبر الصفحة: يستطيع المتصفح تخزينها مؤقتًا، وتستطيع كل صفحة أخرى في موقعك إعادة استعمال الملف نفسه بالضبط.

Tag	Where it goes	Key attribute	What it connects
<link>	Inside <head>	href	A stylesheet — loaded before the page is shown
<script>	Just before </body>	src	A script — runs after the page already exists

Link and script, side by side.

That is the last thing HTML itself teaches you about styling a page: how to point at a stylesheet. What actually goes inside styles.css — colors, spacing, layout, every rule that makes a page look designed instead of default — is exactly where the CSS course picks up.

هذا آخر ما تعلّمك إياه HTML نفسها عن تنسيق الصفحة: كيف تشير إلى ملف تنسيق. أما ما يدخل فعلًا داخل styles.css — الألوان والمسافات والتخطيط، وكل قاعدة تجعل الصفحة تبدو مصممة لا افتراضية — فهو بالضبط ما يبدأ منه مقرر CSS.

Try it live / جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>

    <!-- link styles.css here -->

</head>
<body>
    <h1>My Page</h1>
    <p>Some content here.</p>

    <!-- connect app.js here -->

</body>
</html>

Preview / المعاينة

Check yourself / اختبر نفسك

1. Where should <link rel="stylesheet"> go?

أين يجب أن يوضع <link rel="stylesheet">؟

2. Why do <script> tags commonly go just before </body> instead of in <head>?

لماذا توضع وسوم <script> غالبًا قبل </body> مباشرة لا في <head>؟

3. Which attribute holds the file location on <script>?

أي سمة تحمل موقع الملف في <script>؟

Your task / مهمتك

Take the page below and connect it to two files: a stylesheet called styles.css, linked correctly in the head, and a script called app.js, connected correctly just before the page ends.

خذ الصفحة أدناه واربطها بملفين: ملف تنسيق باسم styles.css، مربوط بشكل صحيح داخل الرأس، وملف سكربت باسم app.js، مربوط بشكل صحيح قبل نهاية الصفحة مباشرة.

A <link rel="stylesheet" href="styles.css"> inside <head> وسم <link rel="stylesheet" href="styles.css"> داخل <head>
A <script src="app.js"></script> right before </body> وسم <script src="app.js"></script> قبل </body> مباشرة
Neither tag is placed in the other's spot لا يوجد وسم في مكان الآخر