تتيح لغة HTML تحديد وتنسيق مختلف أنواع المحتوى في صفحات الويب، بما في ذلك أكواد الحاسوب والعناصر التفاعلية. للقيام بذلك، توفر HTML عدة عناصر مخصصة لهذا الغرض. إليك لمحة سريعة عنها:
<code>
x = 5;
y = 6;
z = x + y;
</code>
عنصر <kbd> في HTML لإظهار مدخلات لوحة المفاتيح:
يوفر عنصر <kbd> في HTML طريقةً بسيطةً لتمثيل مدخلات المستخدم من لوحة المفاتيح. حيث يعرض النص الموجود داخل هذا العنصر بخط أحادي المسافة (Monospace Font) يُشبه طريقة كتابة الأوامر أو النصوص التقنية، مما يساعد على تمييزها عن باقي المحتوى.
مثال:
لتحويل نص معين إلى شكل يمثل مدخلاً من لوحة المفاتيح داخل مستند HTML، استخدم العنصر <kbd> كما يلي:
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>النتيجه
Save the document by pressing Ctrl + S
عنصر <samp> في HTML لعرض خرج البرامج:
يوفر عنصر <samp> في HTML وسيلة مميزة لعرض عينات مخرجات البرامج داخل مستندات الويب. حيث يعرض النصوص داخل هذا العنصر بخط أحادي المسافة (Monospace Font) لتمييزها عن باقي المحتوى وإبراز طبيعتها التقنية.
مثال:
لعرض نص كمخرَج لبرنامج كمبيوتر داخل وثيقة HTML، استخدم العنصر <samp> كما يلي:
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
النتيجه
Message from my computer:
File not found.
Press F1 to continue
عنصر <code> في HTML: أضف لمسة فنية لأكواد الحاسوب!
يوفر لك عنصر <code> في HTML طريقةً بسيطةً لعرض شظايا أو بِتَر من أكواد الحاسوب داخل مستندات الويب. حيث يقوم هذا العنصر بعرض النص الموجود داخله بخط أحادي المسافة (monospaced font)، الذي يشبه عادةً خط كتابة الأوامر والنصوص التقنية، مما يساعد على تمييزها عن باقي المحتوى وتسليط الضوء على طبيعتها.
مثال:
لتحويل بضع كلمات إلى كتلة شبيهة بأكواد الحاسوب داخل وثيقة HTML، استخدم العنصر <code> كما يلي:
<code>
x = 5;
y = 6;
z = x + y;
</code>
النتيجه
x = 5; y = 6; z = x + y;
الحفاظ على التنسيق في أكواد الحاسوب مع <HTML <pre
لاحظ أن عنصر <code> في HTML لا يحتفظ بالمسافات والكسورات الزائدة. وهذا يعني أن الأكواد ستعرض بشكل متتابع دون مراعاة التباعد أو تكسير السطور كما كتبت.
لحل هذه المشكلة، يمكنك استخدام عنصر <code> داخل عنصر <pre>. حيث يعمل عنصر <pre> على حفظ تنسيق النصوص، بما في ذلك المسافات والكسورات، مما يضمن عرض أكواد الحاسوب بالشكل الصحيح الذي كتبته به.
مثال:
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
النتيجه
x = 5;
y = 6;
z = x + y;
عنصر <var> في HTML: لتسليط الضوء على المتغيرات!
يوفر لك عنصر <var> في HTML طريقةً بسيطةً لإبراز المتغيرات المستخدمة في نصوص البرمجة أو المعادلات الرياضية داخل مستندات الويب. حيث يعرض هذا العنصر النص الموجود داخله عادةً بخط مائل (italic) مما يساعد على تمييزه عن باقي المحتوى وتسليط الضوء على طبيعته الخاصة.
مثال:
لتحويل مصطلحات إلى شكل يشبه المتغيرات البرمجية داخل وثيقة HTML، استخدم العنصر <var> كما يلي:
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
النتيجه
The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.
ملخص الفصل: عناصر HTML الخاصة بأكواد الحاسوب والتفاعل:
<kbd>: يمثل مدخلات المستخدم من لوحة المفاتيح، غالبًا بخط مائل قليلًا.<samp>: يعرض عينات من مخرجات البرامج النصية، بخط أحادي المسافة.<code>: يعرض شفرات الأوامر والتعليمات البرمجية، بخط أحادي المسافة.<var>: يبرز مصطلحات المتغيرات في النصوص البرمجية والمعادلات، بخط مائل.<pre>: يحافظ على تنسيق النصوص بما في ذلك المسافات والكسورات، مفيد لعرض أكواد الحاسوب والنصوص المنسقة.
