شيفرة الحاسوب في HTML

غالبًا ما تعرض الدروس والمستندات أوامرًا وأسماء خصائص ومقتطفات HTML. إذا لصقت ذلك النص في فقرة عادية، قد يطوي المتصفح المسافات ويعامل < على أنه بداية وسم حقيقي. يوفّر HTML عناصر مخصصة لـ نص الحاسوب حتى تبقى الأمثلة مقروءة وآمنة. هذه الجلسة تركّز على اختيار العنصر المناسب لكل دور: مقتطف قصير داخل جملة، كتلة متعددة الأسطر، مفتاح يضغطه المستخدم، أو مخرجات برنامج نموذجية. عندما تفهم الفرق بين هذه الأدوار، تصبح صفحات الشرح أوضح للقارئ وللأدوات المساعدة، وتتجنّب الأخطاء الشائعة التي تحوّل مثال الشيفرة إلى عناصر حيّة في الصفحة.

ما عناصر شيفرة الحاسوب؟

تعلّم هذه العناصر نصًا يمثل شيفرة أو إدخال لوحة مفاتيح أو مخرجات برنامج — وليس نثرًا عاديًا. تساعد المتصفح على اختيار خط افتراضي مناسب (غالبًا monospace لـ code وpre) وتخبر التقنيات المساعدة أن هذا المقطع مرتبط بالحاسوب. ما زلت تكتب الأحرف بنفسك؛ تضيف الوسوم المعنى، ومع pre تحافظ على التخطيط. لا تغيّر هذه العناصر منطق البرنامج خلف الصفحة؛ دورها دلالي وعرضي. إن وسمت كلمة عادية بـ code دون حاجة، قد تربك القارئ؛ وإن تركت شيفرة متعددة الأسطر بلا pre، قد يختفي التنسيق الذي أردت إظهاره.

إجابة مباشرة

استخدم code لمقطع قصير داخل جملة. استخدم pre عندما يجب أن تبقى المسافات وكسور السطر. النمط الشائع للكتلة هو <pre><code>...</code></pre>. علّم مفاتيح لوحة المفاتيح بـ kbd ومخرجات البرنامج النموذجية بـ samp عندما تكون تلك الأدوار حقيقية. عندما يكون المثال نفسه HTML، اكتب < و> بدل < و> الخام حتى لا يبني المتصفح عناصر حيّة بالخطأ. هذه القاعدة البسيطة تحمي صفحات الدروس: القارئ يرى الأحرف كما كتبتها، لا فقرة أو قسمًا جديدًا أُنشئ بالخطأ من المثال.

العناصر في لمحة

الشيفرة داخل السطر

عندما تذكر رمزًا قصيرًا داخل جملة، غلّفه بـ code. يبقى اللفظ مميزًا بصريًا دون إجبار كتلة كاملة. هذا النمط مناسب لأسماء الخصائص والأوامر القصيرة وأسماء الدوال التي تظهر وسط الشرح. لا تستخدم code لكل كلمة تقنية في الفقرة؛ اتركه للتوكنات التي تريد أن يلاحظها القارئ بسرعة.

قراءة العينة

• الجملة نص فقرة عادي
• اسم الخاصية وحده داخل code
• يستطيع القارئ مسح التوكن التقني بسرعة
• هذا ليس قائمة متعددة الأسطر — لذلك استخدم pre
• الخط الافتراضي غالبًا monospace، لكن المعنى أهم من المظهر وحده
• يمكنك تكرار عدة عناصر code في الفقرة نفسها إذا ذكرت أكثر من رمز

الكتل مع pre وcode

يعني pre منسّق مسبقًا: تبقى المسافات وكسور السطر تقريبًا كما كتبتها. تداخل code داخل pre نمط واضح لكتلة شيفرة. في أمثلة HTML، رمّز الأقواس الزاوية. بدون pre، قواعد المسافات البيضاء العادية في HTML قد تطوي الأسطر البادئة وتجعل المثال يبدو سطرًا واحدًا مزدحمًا. الجمع بين العنصرين يوضح للقارئ والأدوات أن المحتوى شيفرة محفوظة التخطيط.

لماذا الترميز مهم

إذا كتبت <p> خامًا داخل صفحة الدرس، قد ينشئ المتصفح فقرة حقيقية بدل عرض الأحرف <p>. الترميز كـ <p> يعرض المثال بأمان. جلسة الكيانات (Entities) تتعمق في مراجع الأحرف؛ هنا تحتاج فقط عادة ترميز الأقواس الزاوية في عروض HTML. جرّب مرة واحدة لصق وسم خام ثم ترميزه: سترى الفرق فورًا عند إعادة التحميل، وهذا أثبت من الشرح النظري وحده. تذكّر أن الترميز يخص نص المثال داخل صفحتك، لا يغيّر لغة HTML نفسها التي تتعلمها.

إدخال لوحة المفاتيح ومخرجات العينة

استخدم kbd عندما تصف مفاتيح يضغطها المستخدم. استخدم samp عندما تعرض مخرجات عينة من برنامج أو أمر. كن صادقًا — لا تعلّم كلمات عادية بـ kbd لمجرد مظهر monospace. إذا كان النص اسم خاصية CSS، فـ code أنسب؛ وإذا كان مفتاح اختصار، فـ kbd هو الخيار الصحيح. هذا الفصل الدلالي يجعل الوثائق أوضح ويساعد قارئي الشاشة على فهم نوع المحتوى.

تمرين في المحرّر

1. اكتب جملة تذكر خاصية font-size داخل code.
2. أضف كتلة pre+code بسطرين HTML قصيرين باستخدام < و>.
3. أضف سطر نصيحة بـ kbd لاختصار الحفظ.
4. اختياري: أضف سطر samp واحدًا لمخرجات أمر وهمية.
5. احفظ وافتح — تأكد أن المسافات داخل pre تبقى وأن الوسوم المرمّزة تظهر كنص.
6. الصق مؤقتًا <div> خامًا في الكتلة بلا ترميز، أعد التحميل، راقب المشكلة، ثم رمّزه.
7. راجع الفقرة: هل كل kbd يمثل مفتاحًا فعليًا؟ هل بقي النثر العادي خارج pre؟
   أكمل الخطوات بالترتيب؛ الخطوة السادسة مهمة لأنها تجعل خطر الوسوم الخام ملموسًا. إذا اختفت المسافات البادئة، تحقق أن الكتلة داخل pre وأنك لم تغلق الوسم مبكرًا. إذا ظهر قسم أو فقرة جديدة في منتصف المثال، فغالبًا نسيت الترميز.

أخطاء تفسد الأمثلة

• وضع شيفرة متعددة الأسطر في code فقط دون pre — قد تنطوي كسور السطر والمسافة البادئة
• لصق <div> أو <p> خام في الصفحة بلا ترميز — يصبح عنصرًا حيًا
• استخدام pre لمقالات طويلة من النثر العادي (هو لنص الحاسوب المنسّق مسبقًا، لا للمقالات)
• تعليم كل كلمة تقنية بـ kbd وهي ليست إدخال لوحة مفاتيح
• نسيان إغلاق pre أو code فيبقى النص اللاحق عالقًا بأسلوب التنسيق المسبق
• الاعتماد على المظهر monospace وحده دون اختيار العنصر حسب المعنى
• ترميز بعض الأقواس وترك أخرى في نفس المثال — يظهر جزءًا كنصًا وجزءًا كوسوم حية

ملخص

• code يعلّم نصًا حاسوبيًا قصيرًا داخل السطر
• pre يحافظ على المسافات وكسور السطر للكتل
• الجمع بين pre وcode نمط شائع متعدد الأسطر
• رمّز < و> في أمثلة HTML كـ < و>
• kbd وsamp يغطيان إدخال لوحة المفاتيح ومخرجات العينة عندما يناسب الدور
• اختر العنصر من معنى النص، لا من مظهر الخط الافتراضي وحده
• راجع الأمثلة بعد الحفظ: هل ما يراه القارئ هو الأحرف التي قصدت عرضها؟
  بهذا تصبح صفحات الدروس أوضح وأكثر أمانًا: المقتطفات القصيرة داخل الجملة، والكتل المحفوظة التخطيط، والمفاتيح والمخرجات بأدوارها الصحيحة، والترميز الذي يمنع تحول المثال إلى عناصر حيّة.