HTML Text Formatting | In Arabic

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

HTML Text Formatting

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

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

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

<!-- 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>

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

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

<!-- 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>

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

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>