🖥️ فهم وكتابة الكود البرمجي في HTML

مرحباً بك في درس جديد ومهم! هل تساءلت يوماً كيف يمكنك عرض جزء من الكود البرمجي على موقعك الإلكتروني بشكل مرتب وواضح؟ هذا بالضبط ما سنتعلمه اليوم. سنتعرف على الوسوم الخاصة التي تتيح لنا عرض الكود البرمجي (Computer Code) بشكل صحيح داخل صفحات HTML، مما يجعله سهل القراءة والتمييز عن النص العادي.

💡 ما هو الكود البرمجي (Computer Code) في HTML؟

عندما نريد عرض تعليمات برمجية، مثل اسم وسوم HTML أو جملة بلغة JavaScript، لا نريد للمتصفح أن ينفذ هذا الكود، بل نريده أن يعرضه كنص عادي للقارئ. هنا يأتي دور الوسوم الخاصة بعرض الكود.

الوسم الأساسي لهذا الغرض هو <code>. وظيفته الأساسية هي إخبار المتصفح بأن النص الموجود بداخله هو كود برمجي، فيقوم بتنسيقه بشكل مختلف (عادةً بخط ذو مسافات متساوية - monospace font) لتمييزه.

<p>لإنشاء فقرة في HTML، نستخدم الوسم <code>&lt;p&gt;</code>.</p>

نتيجة المتصفح:

لإنشاء فقرة في HTML، نستخدم الوسم <p>.

لاحظ كيف تم عرض الوسم <p> كنص وليس كوسم فعال في الصفحة.

🛠️ الوسم <code>: أساسيات العرض

الوسم <code> هو وسم inline، أي أنه يمكن وضعه داخل سطر النص العادي، مثل المثال أعلاه. دعنا نرى مثالاً آخر لكتابة سطر كامل من الكود.

<p>لطباعة جملة في JavaScript، نكتب: <code>console.log("مرحبا بالعالم!");</code></p>

نتيجة المتصفح: لطباعة جملة في JavaScript، نكتب: console.log("مرحبا بالعالم!");

ماذا لو كان الكود الذي نريد عرضه يتكون من عدة أسطر؟ هنا نواجه مشكلة، لأن الوسم <code> وحده لا يحافظ على المسافات وعلامات السطور (New Lines).

📄 الوسم <pre>: للحفاظ على التنسيق

عندما يكون لديك كود متعدد الأسطر، مثل دالة كاملة، تحتاج إلى وسوم تحافظ على التنسيق الأصلي للكود، بما في ذلك المسافات البادئة وعلامات الانتقال لسطر جديد.

هذا هو دور الوسم <pre>، وهو اختصار لـ "Preformatted Text" أو النص المنسق مسبقاً. يقوم هذا الوسم بعرض النص بداخله تماماً كما هو مكتوب في الكود المصدري، بما في ذلك جميع المسافات والأسطر.

<pre>
function sayHello() {
    console.log("Hello!");
    return true;
}
</pre>

نتيجة المتصفح:

function sayHello() {
    console.log("Hello!");
    return true;
}

لاحظ كيف تم الحفاظ على المسافة البادئة (Indentation) قبل console.log و return. هذا يجعل الكود مقروءاً جداً.

✨ الجمع بين <pre> و <code> للحصول على أفضل نتيجة

للحصول على أفضل النتائج عند عرض كتل الكود (Code Blocks)، يجمع المطورون المحترفون بين الوسمين <pre> و <code>. نضع الوسم <code> داخل الوسم <pre>.

  • دور <pre>: يحافظ على التنسيق والهيكل (المسافات والأسطر).
  • دور <code>: يضيف التنسيق الدلالي الذي يشير إلى أن هذا النص هو كود برمجي، ويطبق نمط الخط المناسب.
<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;صفحتي&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;مرحبا!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

نتيجة المتصفح:

<!DOCTYPE html>
<html>
<head>
    <title>صفحتي</title>
</head>
<body>
    <h1>مرحبا!</h1>
</body>
</html>

بهذه الطريقة، تحصل على كود مقروء ومنسق بشكل مثالي.

⚠️ ملاحظة مهمة: تهريب الأحرف (Escaping Characters)

لاحظ في المثال السابق أننا استخدمنا &lt; بدلاً من علامة < و &gt; بدلاً من علامة > داخل الوسم <code>. هذا ما يسمى "تهريب" أو "هروب" الأحرف (Escaping).

السبب بسيط: إذا كتبنا علامة < داخل الوسم <code>، سيعتقد المتصفح أننا نبدأ وسماً جديداً وسيحاول تفسيره، مما يتسبب في خطأ. لذلك نستخدم رموز HTML الخاصة (HTML Entities) لتمثيل هذه الرموز كنص.

  • &lt; تعني < (أقل من)
  • &gt; تعني > (أكبر من)
  • &amp; تعني & (علامة و)

مثال على التهريب الخاطئ والصحيح:

<!-- خطأ: المتصفح سيعتقد أن <html> وسم جديد -->
<code><html></code>

<!-- صحيح: تم عرض الوسم كنص -->
<code>&lt;html&gt;</code>

🧪 دعنا نجرب معاً: مثال تطبيقي بسيط

لنقم بإنشاء قسم في صفحة ويب نعرض فيه كيفية إنشاء قائمة غير مرتبة في HTML.

<!DOCTYPE html>
<html>
<head>
    <title>عرض الكود</title>
</head>
<body>
    <h1>كيفية إنشاء قائمة</h1>
    <p>لإنشاء قائمة غير مرتبة في HTML، نستخدم الوسوم <code>&lt;ul&gt;</code> و <code>&lt;li&gt;</code>.</p>
    
    <h2>مثال كامل:</h2>
    <pre><code>&lt;ul&gt;
    &lt;li&gt;قهوة&lt;/li&gt;
    &lt;li&gt;شاي&lt;/li&gt;
    &lt;li&gt;حليب&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</body>
</html>

في هذا المثال، استخدمنا <code> لعرض أسماء الوسوم داخل الفقرة، واستخدمنا <pre><code> معاً لعرض الكود الكامل للقائمة مع الحفاظ على تنسيقه.

🎯 ملخص الدرس

  • الوسم <code>: يستخدم لعرض أجزاء صغيرة من الكود داخل سطر النص. يطبق تنسيق الخط المناسب.
  • الوسم <pre>: يستخدم لعرض كتل كود متعددة الأسطر مع الحفاظ على التنسيق والمسافات البادئة.
  • الاستخدام الأمثل: الجمع بين <pre> و <code> لعرض كتل الكود الطويلة بشكل منظم.
  • تهريب الأحرف: استخدام &lt; و &gt; بدلاً من < و > داخل الكود المعروض لتجنب أخطاء التفسير.

بهذه الأدوات البسيطة والفعالة، أصبح بإمكانك الآن إنشاء صفحات تعليمية أو توثيقية تعرض الأكواد البرمجية بشكل أنيق ومحترف.