انتقل إلى محتوى الدرس

Code Snippets with code Element تنسيق المقاطع البرمجية بالوسم code

تعلم عناصر الاقتباس والأكواد في HTML: أتقن استخدام blockquote و q و cite و abbr لتوثيق المصادر، ووظف عناصر code و kbd و samp لتمثيل الشفرات ومخرجات الأنظمة.
5 صفوف تعليمية
لغة HTML
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمثل الوسم <code> مقطعاً من كود برمجي، أو أمر طرفية، أو اسم متغير، أو استدعاء دالة، أو وسم هيكلي. وتُعرض النصوص داخله بخط أحادي المسافة (Monospaced) يميزها بوضوح عن النص الإنشائي العادي.

وعند الرغبة في عرض كتلة برمجية متعددة الأسطر، يُدمج الوسمان معاً بصيغة <pre><code>...</code></pre>. وتذكر دائماً أن الأقواس الزاوية داخل كود HTML يجب تحويلها إلى رموز الهروب &lt; و &gt; لمنع المتصفح من تفسيرها كوسوم حية وتنفيذها بالخطأ.

الصف 2 صورة توضيحية
مخطط يوضح المعمارية المتكاملة بين عنصر الكود البرمجي وعنصر لوحة المفاتيح وعنصر مخرجات الطرفية
الصف 3 شرح توضيحي

يوضح الجدول المرجعي التالي الدور الدلالي والنمط الافتراضي لعناصر الحوسبة التقنية الثلاثة:

العنصرالفئة الدلالية في المعاييرالمحتوى النموذجينوع الخط الافتراضي
<code>شفرة ومفردات برمجيةأسماء الدوال والمتغيرات والوسومخط أحادي المسافة Monospace
<kbd>مدخلات المستخدم واللوحةاختصارات المفاتيح ونقرات الإدخالخط أحادي المسافة Monospace
<samp>مخرجات شاشة الأوامرسجلات الطرفية ورسائل الخادمخط أحادي المسافة Monospace
الصف 4 ملاحظة هامة
الصف 5 كود برمجي
HTML
<p>
  Use the <code>fetch()</code> API to load remote JSON.
  Always inspect the <code>status</code> property.
</p>