الكورس

Advertisements

HTML Text Formatting | In Arabic


HTML Text Formatting – فى هذا الفصل هنتعرف على كيفية تنسيق النص فى لغة HTML؟ وما هى العناصر المستخدمة والفرق بين كل عنصر؟ مع بعض الأمثلة التوضيحية.


 

HTML Text Formatting

 

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

ومن أشهر الوسوم المستخدمة:

  1. <b>: لجعل النص سميك أو قويًا.
  2. <strong>: لجعل النص قويًا (مع إضافة أهمية دلالية).
  3. <i>: لجعل النص مائلًا.
  4. <em>: لجعل النص مؤكدًا.
  5. <small>: لجعل النص أصغر.

 

مثال للتوضيح

يوضح المثال التالي أشهر الوسوم المٌستخدمة فى تنسيق النصوص:

This is normal text.

This is bold text.

This is strongly text.

This is italic text.

This is emphasized text.

This is smaller text.

<!-- Normal Text -->
<p>This is normal text.</p>

<!-- Bold Text -->
<p><b>This is bold text</b>.</p>

<!-- Strong Text -->
<p><strong>This is strongly text</strong>.</p>

<!-- Italic Text -->
<p><i>This is italic text</i>.</p>

<!-- Emphasize Text -->
<p>This is <em>emphasized text</em>.</p>

<!-- Smaller Text -->
<p>This is <small>smaller text</small>.</p>

This is normal text.

This is bold text.

This is strongly text.

This is italic text.

This is emphasized text.

This is smaller text.

 

يمكنك إستخدام هذه الوسوم أيضًا لتنسيق النص:

  1. <mark>: لتمييز النص.
  2. <code>: لعرض جزء من كود.
  3. <del>: لتحديد النص كنص محذوف.
  4. <ins>: لتحديد النص كنص مدرج.
  5. <sub>: يحدد النص السفلى (يظهر النص السفلى بنصف حرف أسفل السطر العادي).
  6. <sup>: يحدد النص العلوى (يظهر النص العلوى بنصف حرف أعلى السطر العادي).

 

مثال للتوضيح

يوضح المثال التالي بعض الوسوم المٌستخدمة فى تنسيق النصوص أيضًا:

This is normal text.

This is Highlighted text.

This is Code.

This is Deleted text!

This is Inserted text.

This is Subscript And Superscripttext!

<!-- Normal Text -->
<p>This is normal text.</p>

<!-- Mark Text -->
<p>This is <mark>Highlighted text</mark>.</p>

<!-- Text as Code -->
<p>This is <code>Code</code>.</p>

<!-- Text as Deleted -->
<p>This is <del>Deleted</del> text!</p>

<!-- Inserted Text -->
<p>This is <ins>Inserted text</ins>.</p>

<!-- Subscript & Superscript Text -->
<p>This is <sub>Subscript</sub> And <sup>Superscript</sup>text!</p>

This is normal text.

This is Highlighted text.

This is Code.

This is Deleted text!

This is Inserted text.

This is Subscript And Superscripttext!


Advertisements

 

الفروقات بين التنسيقات

 

1. الفرق بين الوسم <strong> و<b>

 

وجه الإختلاف: الوسم <strong> يشير إلى أن محتوياته لها أهمية كبيرة، بينما الوسم <b> يُستخدم لجذب انتباه القارئ دون نقل أي أهمية خاصة.

وجه التشابهه: يعرض الوسمين <strong> و <b> النص محاطًا بخط سميك Bold.

<!-- Bold Text -->
<p><b>This is bold text</b>.</p>

<!-- Strong Text -->
<p><strong>This is strongly text</strong>.</p>

 

2. الفرق بين وسم <em> و <i>

 

وجه الإختلاف: الوسم <em> تشير إلى أن محتوياته قد شددت على التركيز مقارنة بالنص المحيط به، بينما يتم استخدام الوسم <i> لفصل جزء من النص عن النص العادي لسبب ما، أو للإشارة إلى نص اصطلاحي تقني أو فني أو عبارة من لغة أخرى وغيرها. 

وجه التشابهه: يعرض كل من الوسميين <em> و <i> النص المرفق به بخط مائل.

<!-- Italic Text -->
<p><i>This is italic text</i>.</p>

<!-- Emphasize Text -->
<p>This is <em>emphasized text</em>.</p>

استخدم الوسميين <em> و <strong> عندما يتطلب محتوى صفحتك أن يكون لبعض الكلمات أو العبارات تأكيد أو أهمية قوية.

 


 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Text Formatting” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.




الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements