HTML / تنسيق الكود
مفهوم تنسيق الكود
تنسيق الكود نقصد به إظهار النص الذي يرمز لكود برمجي، مدخلات و مخرجات الحاسوب أو لعملية حسابية ما بنوع خط مختلف عن النص العادي الموجود في الصفحة. نوع الخط الذي يستخدم في تنسيق الكود إسمه monospace و هو يعطي الأحرف حجماً موحداً مما يجعل قراءتها و تتبعها أمراً سهلاً جداً بالنسبة للقارئ.
ملاحظة: استخدام خط monospace يعتبر مهماً في البرمجة لأنه يعزز من قابلية القراءة ويجعل الأخطاء في الكود أكثر وضوحاً، مما يساعد المبرمجين في تصحيح الأخطاء بسرعة.
عرض أسماء أحرف الكيبورد
عند وضع شروحات تخبر فيها المستخدم بأن ينقر على أزرار معينة في الكيبورد (Keyboard) يمكنك وضعها بين <kbd>. هذا الوسم يقوم فقط بتغيير نوع خط النص الموضوع بداخله إلى النوع monospace حتى يظهره بشكل مختلف عن باقي النص.
ملاحظة: استخدام <kbd> يعزز من تفاعل المستخدم مع الشروحات، حيث يوضح الأزرار التي يجب استخدامها بوضوح، وهو مفيد جداً في التوجيهات التقنية.
في المثال التالي قمنا بعرض أسماء أحرف في الكيبورد باستخدام <kbd>:
<p>Press <kbd>Ctrl + S</kbd> to save this page on your computer.</p>
عرض مخرجات البرامج
في حال أردت عرض مخرجات البرامج (Programs Output) يمكنك وضعها بين <samp>. هذا الوسم يقوم فقط بتغيير نوع خط النص الموضوع بداخله إلى النوع monospace حتى يظهره بشكل مختلف عن باقي النص.
ملاحظة: الوسم <samp> يستخدم عادة لعرض نتائج البرامج، مما يساعد في تحليل وفهم كيفية تفاعل المستخدم مع النظام أو البرنامج.
في المثال التالي قمنا بعرض رسالة خطأ يظهرها الحاسوب باستخدام <samp>:
<p>My computer show me this alert:</p><p><samp>Error code: 0x80070043The network name cannot be found.</samp></p>
عرض كود في النص
في حال أردت عرض الكلام الذي هو عبارة عن كود أو عملية حسابية بشكل مميز عن النص الموضوع معه في نفس الفقرة يمكنك وضع الكود بين <code>. هذا الوسم يقوم فقط بتغيير نوع خط النص الموضوع بداخله إلى النوع monospace حتى يظهره بشكل مختلف عن باقي النص.
ملاحظة: استخدام <code> في الوثائق يتيح للمستخدمين التعرف على الأكواد البرمجية بشكل واضح، مما يسهل فهم كيفية تطبيقها أو تعديلها.
في المثال التالي قمنا بوضع الكلام الذي هو عبارة عن كود بداخل <code> حتى يظهر بشكل مختلف عن النص العادي.
<p>In java the <code>main()</code> function is the starting point.</p>
في المثال التالي قمنا بعرض إحدى قواعد الرياضيات بشكل بداخل <code> حتى تظهر بشكل مختلف عن النص العادي.
<p>Pythagorean Theorem: <code>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></code></p>
عرض أسماء المتغيرات في النص
المواضيع التي لها علاقة بالبرمجة و الرياضيات و أي مادة أخرى تتضمن معادلات نقوم عادةً باستخدام أسماء متغيرات فيها مثل X و Y. إذا أردت عرض اسم المتغير بشكل مميز عن النص الموضوع معه في نفس الفقرة يمكنك وضعه بين <var>. هذا الوسم يقوم بعرض الاسم الذي نضعه بداخله بشكل مائل.
ملاحظة: استخدام <var> يسهل التعرف على المتغيرات داخل النصوص، مما يعزز من فهم المعادلات أو الأكواد البرمجية المطروحة في الوثيقة.
في المثال التالي قمنا بوضع الأحرف التي هي عبارة عن أسماء متغيرات بداخل <var> حتى تظهر بشكل مائل.
<p>Calculate the value of <var>x</var> where <code>x + 5 = 13</code>.</p>