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

HTMLتنسيق الكود

  • مفهوم تنسيق الكود
  • عرض أسماء أحرف الكيبورد
  • عرض مخرجات البرامج
  • عرض كود في النص
  • عرض أسماء المتغيرات في النص

مفهوم تنسيق الكود

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

نوع الخط الذي يستخدم في تنسيق الكود إسمه monospace و هو يعطي الأحرف حجماً موحداً مما يجعل قراءتها و تتبعها أمر سهل جداً بالنسبة للقارئ.

في هذا الدرس ستتعرف على الوسوم المخصصة لتنسيق الكود البرمجي و المعادلات الحسابية.

عرض أسماء أحرف الكيبورد

عند وضع شروحات تخبر فيها المستخدم بأن ينقر على أزرار معينة في الكيبورد ( Keyboard ) يمكنك وضعها بين <kbd> </kbd>.
هذا الوسم يقوم فقط بتغيير نوع خط النص الموضوع بداخله إلى النوع monospace حتى يظهره بشكل مختلف عن باقي النص.

في المثال التالي قمنا بعرض أسماء أحرف في الكيبورد باستخدام <kbd>.

مثال

<p>Press <kbd>Ctrl + S</kbd> to save this page on your computer.</p>
جرب الكود

عرض مخرجات البرامج

في حال أردت عرض مخرجات البرامج ( Programs Output ) يمكنك وضعها بين <samp> </samp>.
هذا الوسم يقوم فقط بتغيير نوع خط النص الموضوع بداخله إلى النوع monospace حتى يظهره بشكل مختلف عن باقي النص.

في المثال التالي قمنا بعرض رسالة خطأ يظهرها الحاسوب باستخدام <samp>.

مثال

<p>My computer show me this alert:</p>
<p><samp>Error code: 0x80070043<br>The network name cannot be found.</samp></p>
جرب الكود

عرض كود في النص

في حال أردت عرض الكلام الذي هو عبارة عن كود أو عملية حسابية بشكل مميز عن النص الموضوع معه في نفس الفقرة يمكنك وضع الكود بين <code> </code>.
هذا الوسم يقوم فقط بتغيير نوع خط النص الموضوع بداخله إلى النوع monospace حتى يظهره بشكل مختلف عن باقي النص.


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

المثال الأول

<p>In java the <code>main()</code> function is the starting point.</p>
جرب الكود

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

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

<p>Pythagorean Theorem: <code>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></code></p>
جرب الكود

عرض أسماء المتغيرات في النص

المواضيع التي لها علاقة بالبرمجة و الرياضيات و أي مادة أخرى تتضمن معادلات نقوم عادةً باستخدام أسماء متغيرات فيها مثل X و Y.
إذا أردت عرض إسم المتغير بشكل مميز عن النص الموضوع معه في نفس الفقرة يمكنك وضعه بين <var> </var>.
هذا الوسم يقوم بعرض الإسم الذي نضعه بداخله بشكل مائل.

في المثال التالي قمنا بوضع الأحرف التي هي عبارة عن أسماء متغيرات بداخل <var> </var> حتى تظهر بشكل مائل.

مثال

<p>Calculate the value of <var>x</var> where <code>x + 5 = 13</code>.</p>
جرب الكود