X

اتش.تي.إم.إل الدلالية

٦. التعامل مع العناصر الدلالية المتخصصة

نظري

أ. كيف تعرض المعادلات الرياضية Mathematical Equations والصيغ الكيميائية Chemical Formulas في اتش.تي.إم.إل HTML ؟

يُستخدم عنصر النص العلوي The superscript element لعرض نص كنص علوي. النص العلوي هو رمز symbol أو حرف letter مطبوع فوق السطر العادي من النص.

فيما يلي مثال لاستخدام عنصر العلوي the superscript element لتوضيح الأسس:


<p>.4 يساوي<sup>2</sup>2</p>

22 يساوي 4.

في هذا المثال، يُغلَّف الرقم 2 بين وسمَي sup ليمثل الحرف العلوي superscript داخل الفقرة. في نافذة المعاينة، سترى أن الرقم 2 الثاني أصغر وأعلى قليلاً من الرقم 2 الأول.

تشمل حالات الاستخدام الشائعة لعنصر العلوي the superscript element الأسس، والحروف العلوية، والأرقام الترتيبية.

فيما يلي مثال لاستخدام عنصر العلوي the superscript element لكتابة الحروف العلوية:


<p>
 .في بعض المخطوطات <strong><sup>حـ</sup> سـ</strong> بالاختصار <q>سماحة</q> يُشار أحيانًا إلى كلمة
</p>

يُشار أحيانًا إلى كلمة سماحة بالاختصار سـحـ في بعض المخطوطات.

تشير الحروف العلوية إلى الحروف المكتوبة بشكل علوي in superscript ، عادةً للإشارة إلى الاختصارات abbreviations . الحرف حـ مُحاط بعلامات علوية لتوضيح الاختصار في هذا المثال.

من المهم ملاحظة أن استخدام عنصر الرفع العلوي The superscript element فقط لأغراض طباعية. إذا كنت ترغب في تصميم نص بخط أساس بارز، فعليك استخدام CSS بدلاً من عنصر الرفع العلوي.

لتمثيل المعادلات الكيميائية داخل "اتش.تي.إم.إل" HTML، استخدم عنصر "الرمز السفلي" The subscript element . يستخدم هذا العنصر رمزًا سفليًا يعرض خطًا أساسيًا منخفضًا باستخدام نص أصغر.

فيما يلي مثال لاستخدام عنصر الرمز السفلي The subscript element لإظهار التمثيل الكيميائي لثاني أكسيد الكربون:


<p>CO<sub>2</sub></p>

CO2

يتم وضع الرقم اثنين داخل علامات sub للتوضيح أن الحرف يجب أن يكون منخفضًا.

تتضمن حالات الاستخدام الشائعة لعنصر المؤشر السفلي The subscript element الصيغ الكيميائية chemical formulas والحواشي السفلية footnotes والمتغيرات المؤشرة السفلية variable subscripts.

أسئلة :

ما هو الاستخدام الأساسي لعنصر العلوي the superscript element في HTML؟

١. لعرض النص بلون مختلف. ❌

٢. لإظهار النص بحجم خط أصغر. ❌

٣. لعرض النص كخط علوي فوق السطر العادي. ✅

٤. لتسطير النص. ❌


أي مما يلي يعد مثالاً على استخدام عنصر العلوي the superscript element بشكل صحيح؟

 ❌<p>.4 يساوي<sub>2</sub>2</p>.١

 ✅<p>.4 يساوي<sup>2</sup>2</p>.٢

 ❌<p>.4 يساوي<sul>2</sul>2</p>.٣

 ❌<p>.4 يساوي<sutp>2</sutp>2</p>.٤

ما الذي يجب استخدامه بدلاً من عنصر العلوي the superscript element إذا كنت تريد تصميم نص بخط أساسي مرتفع لأسباب طباعية؟

١. العنصر sub ❌

٢. CSS ✅

٣. العنصر strong ❌

٤. العنصر em ❌

ب. كيف تُمثل أكواد الحاسوب Computer Code في اتش.تي.إم.إل HTML ؟

يُستخدم عنصر الكود المضمّن The inline code element لعرض مقتطفات قصيرة من الكود code داخل النص. ومن الاستخدامات الشائعة لهذا العنصر المقالات التقنية وصفحات التوثيق.

فيما يلي مثال لاستخدام عنصر code لإظهار مقتطف كود CSS:


<p>
 :استخدم الكود التالي CSS لتعيين لون النص إلى اللون الأزرق في
 <code>color: blue;</code>
</p>

لتعيين لون النص إلى اللون الأزرق في CSS، استخدم الكود التالي:

;color: blue

في هذا المثال، تُستخدم خاصية CSS color لتعيين لون النص إلى الأزرق. بوضع هذا المقطع داخل وسم code، يُعلم المتصفح أن النص جزء من شيفرة مضمنة a piece of inline code .

سيطبق المتصفح أنماطًا افتراضية default styles للمحتوى داخل عنصر code. النمط الافتراضي هو خط أحادي المسافة a monospaced font .

عنصر code مُصمم لتمثيل سطر واحد من الكود. إذا أردت تمثيل عدة أسطر، ستحتاج إلى وضع عنصر code داخل عنصر نص مُنسق مسبقًا a preformatted text element .

يتم استخدام عنصر النص المنسق مسبقًا The preformatted text element لتمثيل النص المنسق مسبقًا.

فيما يلي مثال لاستخدام عنصر النص المنسق مسبقًا the preformatted text element لإظهار إعلان CSS:


<pre>
 <code>
  body {
   color: red;
  }
 </code>
</pre>
		
				
 body {
  color: red;
 }

عند استخدام عنصر pre، يجب أن تضع في اعتبارك المسافة لأنه سيعرض بالضبط كما هو مكتوب داخل مستند "اتش.تي.إم.إل" HTML.

ستلاحظ في المتصفح أن الكود مُزاحٌ إلى اليمين بمسافة بادئة. إذا قمت بتغيير المسافة البادئة في مثال الكود، فسترى فرقًا في المسافة البادئة على الشاشة.

عندما يتعلق الأمر بتضمين أمثلة التعليمات البرمجية داخل مستند HTML الخاص بك، يجب عليك استخدام عنصر code للأمثلة القصيرة المضمنة short inline examples .

إذا كنت بحاجة إلى عرض مقتطفات برمجية أطول، فسيتعين عليك استخدام عنصري pre و code.

أسئلة :

ما هو الغرض من عنصر code ؟

١. يُستخدم لإنشاء روابط تشعبية hyperlinks لصفحات ويب أخرى. ❌

٢. يُستخدم لتنسيق النص بخط عريض bold أو مائل italic. ❌

٣. يُستخدم لعرض مقتطفات قصيرة من التعليمات البرمجية short snippets of code داخل النص. ✅

٤. يُستخدم لتضمين الصور وملفات الوسائط المتعددة multimedia files . ❌


ما هو استخدام عنصر النص المنسق مسبقًا (pre) ؟

١. يُستخدم لتطبيق أنماط CSS على النصوص. ❌

٢. يُستخدم لإنشاء الجداول tables والتخطيطات المنظمة structured layouts. ❌

٣. يُستخدم لعرض النصوص المنسقة مسبقًا preformatted text. ✅

٤. يُستخدم لإدراج الروابط التشعبية hyperlinks وعناوين البريد الإلكتروني. ❌


ما هو التنسيق الافتراضي لعنصر code ؟

١. خط أحادي المسافة Monospaced font. ✅

٢. نص مائل Italic بخلفية ملونة colored background. ❌

٣. نص عريض Bold بحجم خط أكبر. ❌

٤. نص مسطر Underlined بخط ثابت العرض. ❌

ج. ما هي استخدامات عناصر "U و S و Ruby" وكيف تعمل؟

يُستخدم عنصر التعليق غير المفصل The unarticulated annotation element ، أو عنصر u باختصار، لتمثيل النص المضمن inline text الذي تم تطبيق تعليق غير نصي non-textual annotation عليه.

فيما يلي مثال على استخدام عنصر u لتسليط الضوء على أخطاء إملائية spelling errors مختلفة:


<p>
 يمكنك استخدام عنصر التعليق غير المفصلي للتمييز
 <u>inccccort</u> <u>spling</u> <u>issses</u>.
</p>

يمكنك استخدام عنصر التعليق غير المفصلي للتمييز inccccort spling issses.

في المثال، الكلمات incorrect و spelling و issues مكتوبة بشكل خاطئ. النمط الافتراضي لعنصر u هو خط أسود أسفل النص.

في لغة HTML4، كان يُستخدم عنصر u لأغراض التنسيق. أما في لغة HTML5، فيُستخدم عنصر u فقط للإشارة إلى أن النص يحتوي على تعليقات توضيحية غير نصية.

إذا كنت ترغب في تنسيق نص ما باستخدام خط تحته، فيجب عليك استخدام CSS بدلاً من HTML.

يجب استخدام عنصر الشطب The strikethrough element ، أو عنصر s باختصار، للإشارة إلى متى لم يعد النص دقيقًا أو ذا صلة.

فيما يلي مثال على استخدام عنصر s لإظهار إلغاء نشاط ما:


<p><s>.ستبدأ رحلة المشي غداً عند الظهر</s></p>
<p>.نظراً لظروف جوية غير متوقعة، تم إلغاء الرحلة</p>

ستبدأ رحلة المشي غداً عند الظهر.

نظراً لظروف جوية غير متوقعة، تم إلغاء الرحلة.

في هذا المثال، تم شطب الجملة الأولى لأن الرحلة تم إلغاؤها لأسباب تتعلق بالطقس.

لا ينبغي استخدام عنصر s لعرض التغييرات التي طرأت على المستند. في هذه الحالة، يكون عنصر النص المحذوف وعنصر النص المُدرج أكثر ملاءمة.

يمثل عنصر ruby نصًا صغيرًا يظهر أعلى أو أسفل النص الرئيسي. ويُستخدم عادةً لعرض نطق الأحرف الآسيوية الشرقية.

إليك مثال على عنصر ruby من صفحة وثائق الويب الخاصة بـ MDN:


<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
明日 (Ashita)

يتم استخدام عنصر rp، أو عنصر الأقواس الاحتياطية fallback parenthesis element في لغة روبي ruby ، كبديل للمتصفحات التي تفتقر إلى دعم عرض التعليقات التوضيحية في لغة روبي ruby.

يُستخدم عنصر rt، أو عنصر نص روبي ruby text element، للإشارة إلى نص التعليق التوضيحي في لغة روبي ruby. ويُستخدم هذا النص عادةً للنطق أو تفاصيل الترجمة في الطباعة في شرق آسيا.

بينما يمكن استخدام عنصر ruby لأنواع أخرى من التعليقات التوضيحية، فإن حالة الاستخدام الأكثر شيوعًا هي للطباعة في شرق آسيا East Asian typography.

أسئلة :

ما هو استخدام العنصر u ؟

١. يُستخدم لعرض الرموز السفلية subscripts في الصيغ الكيميائية. ❌

٢. يُستخدم لتمثيل مدخلات المستخدم user input في نماذج HTML. ❌

٣. يُستخدم لتمثيل النص المضمن inline text الذي يحتوي على تعليقات توضيحية غير نصية non-textual annotation. ✅

٤. يُستخدم لجعل النص مائلاً italicize في HTML. ❌


ما هو استخدام العنصر s ؟

١. يُستخدم هذا الرمز للإشارة إلى أن النص لم يعد دقيقًا accurate أو ذا صلة relevant. ✅

٢. يُستخدم لإنشاء أدوات مساعدة للتنقل navigational aides على مواقع الويب. ❌

٣. يُستخدم لعرض معلومات حقوق النشر copyright information على الصفحات. ❌

٤. يُستخدم لعرض تعليقات الصور captions for images. ❌


ما هو الاستخدام الشائع لعنصر ruby ؟

١. يُستخدم لكتابة تطبيقات روبي ruby applications. ❌

٢. يُستخدم لإنشاء عناصر القوائم list items في الصفحة. ❌

٣. يُستخدم لتطبيق خط تحت النص an underline for text. ❌

٤. يُستخدم لعرض نطق the pronunciation الأحرف الآسيوية الشرقية East Asian characters. ✅