Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

HTMLالوسم <code>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

نستخدم الوسم <code> على هذا النحو <code>text</code> لعرض كود برمجي في الصفحة.

مكان الكلمة text نمرر النص الذي نريد عرضه ككود برمجي, أي بنوع خط مختلف.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <code>.

Chrome Edge Firefox Opera Safari Android
Webview
Chrome
for Android
Firefox
for Android
Opera
for Android
Safari
for IOS
Samsung
Internet
1 12 1 مدعوم مدعوم مدعوم مدعوم 4 مدعوم مدعوم مدعوم

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بوضع الكلام الذي هو عبارة عن كود بداخل <code> </code> حتى يظهر بشكل مختلف عن النص العادي.

المثال الأول

<p>In java the <code>main()</code> function is the starting point.</p>
<p>In java the <code>main()</code> function is the starting point.</p>

جرب الكود



في المثال التالي قمنا بعرض إحدى قواعد الرياضيات بشكل بداخل <code> </code> حتى تظهر بشكل مختلف عن النص العادي.
ملاحظة: بداخل الوسم <code> قمنا باستخدام الوسم <sup> لعرض جزء بعض الأجزاء منه بشكل مرتفع.

المثال الثاني

<p>Pythagorean Theorem: <code>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></code></p>
<p>Pythagorean Theorem: <code>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></code></p>

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

code {
font-family: monospace;
}
code { font-family: monospace; }

نصائح و ملاحظات

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